【css】2小時初學者教學

Поділитися
Вставка
  • Опубліковано 25 жов 2024

КОМЕНТАРІ • 119

  • @GrandmaCan
    @GrandmaCan  11 місяців тому +5

    ✏最新課程 : 網頁開發組合包 - 前端網頁開發技術一次掌握!
    grandmacan.com/courses/dmS4146YJasRcWA3NURx
    即日起至2024/10/27前購買,即享41折優惠~

  • @y19970814
    @y19970814 9 місяців тому +3

    看到26分的建模說明後,就知道你非等閒之輩,這教學淺顯易懂的程度,都讓我媽問我為什麼要跪在地上看yt了

  • @我想學英文
    @我想學英文 2 роки тому +29

    33:16 固定定位
    37:15 相對定位relative
    39:55 絕對定位 absolute
    45:05 opacity border-radius
    47:10 border-radius
    54:25 把CSS 的標籤獨立到另外一個檔案
    55:50 The rel attribute specifies the relationship between the current document and the linked document.
    Only used if the href attribute is present.
    : relationship 代表關係
    56:00
    (Hypertext REFerence) The HTML code used to create a link to another page. The HREF is an attribute of the anchor tag, which is also used to identify sections within a document.
    1:02:30 class="one dog" class裡面可以有兩個不同的名稱

  • @greenyuan764
    @greenyuan764 3 роки тому +31

    谢谢老师,我花费了1天时间学会了html初级内容,现在开始css,希望老师继续出教学片,带我们体验职业程序员的生活

  • @cynthia168
    @cynthia168 2 роки тому +37

    小白你真的太屌了! 之前想過為什麼用float 會把文字跑在左右,但你可以講解圖示的這麼先進! 感謝你花時間的幫助我們成長

  • @wilsontseng1013
    @wilsontseng1013 2 роки тому +4

    真的教得非常好,我幾乎把你教的所有程式語言都看過,都快速的學到~收益良多~感謝~

  • @keguo9574
    @keguo9574 2 роки тому +22

    人生中重要的老师,虽然未谋面。

  • @鄧世宇
    @鄧世宇 2 роки тому +4

    感恩大大,我的論文系統介面完全靠你的教學

  • @che19841101
    @che19841101 Рік тому +2

    立體圖型說明 太用心了~!

  • @两只喵
    @两只喵 Рік тому +2

    终于听懂这个float了,来自大陆的感谢🙏

  • @hongzi-gui370
    @hongzi-gui370 2 роки тому +2

    小白老師教學很有邏輯 系統化,超級清楚好理解 尤其那個3D說明float 清楚明瞭 讚讚

  • @l_.z5457
    @l_.z5457 3 роки тому +36

    請問甚麼時候出java script 的教學 最近很需要

  • @yulin4630
    @yulin4630 Рік тому +2

    特別用3D示意圖整個就懂了 謝謝你的用心

  • @王迎芃
    @王迎芃 Рік тому +3

    26分用3D教材解釋真的太棒了❤

  • @挖石油-m7m
    @挖石油-m7m 3 роки тому +7

    再次感謝小白
    真的講得超讚
    好喜歡

  • @LA-Wang
    @LA-Wang 3 роки тому +11

    感謝老師講解!不過學會基礎的 CSS 還是很難把頁面弄得好看
    我這種對美感沒天份的還是乖乖回去寫後端好了 QQ

  • @romona76
    @romona76 Рік тому +2

    看完了!!看兩遍!!

  • @JUANG-LIFE
    @JUANG-LIFE 2 роки тому +1

    謝謝小白,看完起影片才豁然開朗,好喜歡你的教學,期待有更深入的線上課程

  • @blueblue-tm9uk
    @blueblue-tm9uk 10 місяців тому +1

    謝謝, 很清楚實用!

  • @esther6220
    @esther6220 3 роки тому +11

    許願老師出javascript的教學影片~
    你的講解真的連我阿嬤都會

  • @Fullsunfl00wer
    @Fullsunfl00wer Рік тому +2

    謝謝老師教學!

  • @苏欣昊
    @苏欣昊 Рік тому +2

    小白好牛, 学习到了很多

  • @johnvoidman6616
    @johnvoidman6616 2 роки тому +2

    老師教學的真的太好了,對我幫助很大,感謝!

  • @johnnny8049
    @johnnny8049 Рік тому +2

    謝謝老師講解

  • @許谷歌-y2y
    @許谷歌-y2y 2 роки тому +6

    你怎麼這麼會教學阿 ❤

  • @leo55662006
    @leo55662006 2 роки тому +2

    練愛了 小白好讚!!

  • @lmh651
    @lmh651 3 роки тому +2

    講得很不錯 基本上看一遍這些入門的就都懂了

  • @nexusler5485
    @nexusler5485 3 роки тому +3

    感谢大大的分享教学!看了你的影片我和我阿嬤的基础都稳了😀

  • @jimpaul15
    @jimpaul15 2 роки тому +1

    真的很讚 一天直接學爆 收穫滿滿

  • @hayden8730
    @hayden8730 3 роки тому +3

    講解非常好,希望能出各系列的進階版内容(比如中級/高級)

  • @joelin5577
    @joelin5577 3 роки тому +1

    看完了 淺顯易懂 真是非常棒的教學

  • @nitecheng
    @nitecheng 3 роки тому +4

    谢谢小白,真的教的很详细,希望会有display grid的教学影片~

  • @CY-bk6mp
    @CY-bk6mp 8 місяців тому +1

    感謝!

  • @許廷瑋-x6x
    @許廷瑋-x6x Рік тому +2

    謝謝老師

  • @ily1380
    @ily1380 Рік тому +2

    希望各種程式語法有進階的內容 謝謝~

  • @綠豆-o8r
    @綠豆-o8r 3 роки тому +4

    之前是看amos老師金魚腦學會的
    做完專題後一直想複習
    感謝小白用更簡單更清楚的方式幫我複習完了之前學的東西
    而且我很喜歡妳的教學風格
    希望之後能簡單介紹一下wordpress的使用方式
    之後出會員制或開直播我一定斗內

    • @joelin5577
      @joelin5577 3 роки тому

      他有開帳號ㄟ 我也打算抖一波

  • @白馬義從寶葵
    @白馬義從寶葵 2 роки тому +3

    帥哦小白

  • @yulin4630
    @yulin4630 Рік тому +2

    謝謝🙏

  • @cong-yaolin2791
    @cong-yaolin2791 2 роки тому +1

    很有幫助。
    看似簡單的css需要搭配內外物件屬性做定位,不知道的常常發生物件亂跑的狀況。
    感謝教學!

  • @xufengzheng1318
    @xufengzheng1318 2 роки тому +1

    讲的非常好!谢谢你

  • @zong-linwu6190
    @zong-linwu6190 2 роки тому +1

    感謝分享 ❤ !

  • @wadanemacho
    @wadanemacho 2 роки тому +2

    牛逼 float你真得让元素浮起来了

  • @Jason__Chu
    @Jason__Chu Рік тому +2

    謝謝老師,已訂閱付費🎉

  • @46軒
    @46軒 2 роки тому +1

    真棒, 謝謝老師...

  • @nunonunosan
    @nunonunosan 2 роки тому +2

    謝謝小白,真的超複雜。如果自己學不知道要卡多久QQ

  • @jrchin2973
    @jrchin2973 Рік тому +1

    請問為何我想將設計好的網站的網址傳給別人看時,瀏覽器一直無法打開我的網頁?謝謝

  • @whiterabbit2296
    @whiterabbit2296 3 роки тому +2

    Boss when will you release bootstrap video? or anything with third party styling like apexcharts

  • @PrettyOrients
    @PrettyOrients 2 роки тому +2

    小白你教得真的很好,非常清晰易懂,謝謝你!我看到你有贊助連結,香港人可贊助嗎?

  • @wahuo3966
    @wahuo3966 2 роки тому +1

    感謝

  • @cheer16max
    @cheer16max 3 роки тому +50

    item跟width的I念法剛好相反
    width 發一的音
    item 發唉的音
    切記

    • @林十三-w4m
      @林十三-w4m 3 роки тому

      小白老師能私訊一下嗎?謝謝您

  • @crumblywing
    @crumblywing Рік тому +2

    謝謝阿嬤、謝謝小白

  • @shixiongcao2523
    @shixiongcao2523 3 роки тому +1

    谢谢您,感谢您的教程,请问可以出一个vs code的使用和配置教程吗?

  • @hongxin9899
    @hongxin9899 2 роки тому +1

    小白老师,可否把每次课的代码发给我们呢

  • @God8163
    @God8163 2 роки тому

    小白你好! 我有問題想提問
    影片最後動畫的部分,一開始class為什麼要給2個名字呢
    我想知道的是,以您的為例
    像是animation-name.animation-duration這些屬性
    不可以跟.box那一欄寫一起嗎
    還是只是方便我們理解呢?
    謝謝解答!!

  • @五岳英杰
    @五岳英杰 2 роки тому +1

    太好了。

  • @apctrader
    @apctrader 2 роки тому +2

    感谢感谢

  • @佑-m6h
    @佑-m6h 2 роки тому +1

    教學很棒,但是 ID 我可以在一個 html 多個標籤設定同 ID

  • @gordon2016
    @gordon2016 3 роки тому +2

    真有用

  • @g880822
    @g880822 2 роки тому

    想問一下
    justify-content:space-around跟justify-content:space-evenly差在哪邊 有點分不清

  • @vito9380
    @vito9380 3 роки тому +3

    老師如果出個RoR付費課程我願意買爆

  • @弦寒
    @弦寒 Рік тому

    max-width 是最大宽度
    但那普通的 width 不也一样吗 如果给500px那它也是只会到500px
    感觉好像一样的东西 有什么差别吗🤔

  • @解藥-g1l
    @解藥-g1l 2 роки тому +1

    float那邊用3D呈現,點醒我的疑問

  • @key3508
    @key3508 2 роки тому

    您好,我想詢問,我到了第一步驟要移除OFFICE,但[開始]那個按鈕不能按,有什麼解決方法嗎~

  • @sihanmao7751
    @sihanmao7751 2 роки тому

    请问用class=container做flex box的时候 可以用ID代替class吗?如果只有想给一个单一的section style,是不是用id比较好?

  • @garyli3117
    @garyli3117 3 роки тому

    小白大大你好:
    有一個關於margin的小疑問
    假設有兩個區塊的數值都是margin:40px
    我用f12查看的時候發現這兩個區塊的margin空間是重疊的,
    即a區塊的下半部margin空間與b區塊上半部margin空間重疊,所佔的空間一共是40px而不是80px
    請問這個是我弄錯語法還是有其他的原因呢?

  • @sandersnolan6895
    @sandersnolan6895 3 роки тому +1

    在这儿多学点东西,主要因为这是中文,如果这些程序类网络课程我只看英文教程,会听漏很多知识,就只能是看看老外敲敲代码了

  • @wuyanchu
    @wuyanchu 2 роки тому

    thx and god bless you ^_^

  • @hankstsai7211
    @hankstsai7211 3 роки тому +4

    希望大大可以成立line群感謝

  • @我爱作业
    @我爱作业 3 роки тому

    老师为什么我的animation那边他的颜色不会改变我的代码没写错但是我注意到我@keyframes 是蓝色的然后后面的change-color是白色的其他代码都没问题就是css跑不了

  • @Protokletos
    @Protokletos 2 роки тому

    老师您好,请问如果css文件和html文件不在同一个文件夹时,应该如何写入呢

  • @kianyangphoto1478
    @kianyangphoto1478 3 роки тому +6

    有没有交流群啊

    • @GrandmaCan
      @GrandmaCan  3 роки тому +2

      目前還沒有哦
      有問題就直接留言ㄅ~

    • @estreellachiang1978
      @estreellachiang1978 2 роки тому

      @@GrandmaCan 可以請問03:10處為何在div內設自體統一為20px,但h1&p內文字在網站上看起來沒有一樣大?

    • @kueako8774
      @kueako8774 2 роки тому

      @@estreellachiang1978 h1是標題

  • @LEEJONZEDMoe
    @LEEJONZEDMoe Рік тому +2

    😀😀😀😇😇😇

  • @黄宇辰-b4b
    @黄宇辰-b4b 3 роки тому +2

    小白老师,能不能,弄个课件,好多记不住。

  • @zhiyiman448
    @zhiyiman448 Рік тому

    为什么我的电脑opacity需要用在background-color之后

  • @TK-pe5nz
    @TK-pe5nz 3 роки тому +5

    好佛心可以出會員交深一些

  • @瀲月
    @瀲月 3 роки тому +1

    標籤 屬性 指令要刻意背嗎 有夠多怎麼辦...

    • @miniappletheapple
      @miniappletheapple 3 роки тому +3

      標籤的話其實不太用,常用的也就幾個,慢慢就能記住,忘了也能查,屬性的話...對就真的只能記了,不過我也是這樣過來的,加油

    • @BabyYiOvO
      @BabyYiOvO 3 роки тому

      @@miniappletheapple 不過好像用英文會好記一些,因爲很多都是英文縮寫(指標籤)

    • @miniappletheapple
      @miniappletheapple 3 роки тому

      @@BabyYiOvO 用英文的話有些根本不用記吧,而且其實很多都是簡寫

  • @ku9522
    @ku9522 Рік тому

    請教各位大大,在40:20處height會內縮40px,width(右邊)為何不會跟著內縮40px?

    • @狗狗貓咪
      @狗狗貓咪 Рік тому

      我是剛學也還不確定,如果說明有誤的話歡迎其他大大在底下指正我,上述的問題我覺得應該是因為他的兩個 border 只有設定 height 而沒有設定 width ,所以寬主要會根據網頁的大小改變,並不會因為拿掉了藍塊而往內縮

  • @joelin9186
    @joelin9186 3 роки тому

    • @BabyYiOvO
      @BabyYiOvO 3 роки тому

      ;是要打入在引號裡面ㄅ

    • @BabyYiOvO
      @BabyYiOvO 3 роки тому

      Style應該是attribute,後面引號裡ㄉ應該是value

  • @hanghang9104
    @hanghang9104 3 роки тому +1

    内容挺好的 谢谢分享 但是英语太难懂了 relative item 读的完全不对 bottom column也是不好懂

  • @clearlove-cp8fn
    @clearlove-cp8fn 3 роки тому +1

    [問卦] 小白是個帥哥嗎?

  • @puden0122
    @puden0122 3 роки тому

    請問怎麼讓字體置中

  • @黃聿睿
    @黃聿睿 3 роки тому

    請問為什麼我設定右半邊的margin 不管怎麼設定都會跑到無限遠呢

    • @BabyYiOvO
      @BabyYiOvO 3 роки тому

      右半邊ㄉmargin是那個「margin-right」ㄇ?

  • @robbinluo2810
    @robbinluo2810 2 роки тому

    请问这是什么编辑器

  • @EriaWist
    @EriaWist 3 місяці тому

    書籤 23:51

  • @Ztk1024
    @Ztk1024 Рік тому

    flex 1:14

  • @hongxin9899
    @hongxin9899 2 роки тому

    小白老师,如果把你技术都学会了,一个月可以挣多少钱😄

  • @hsuabu
    @hsuabu 2 роки тому +3

    你阿嬤很厲害欸!

  • @johnnyxix2102
    @johnnyxix2102 3 роки тому

    還是沒搞懂 什麼時候用 relative , absolute ,fixed
    ...

    • @十字Cross
      @十字Cross 3 роки тому +10

      fixed(固定定位):像某些網頁的邊邊會出現一堆廣告一直跟著你移動時會用到(基本上很少會利用到)
      relative(相對定位) :會在原位置放出一個隱形的空間不能讓你放東西(特點是從原位置進行偏移)
      absolute(絕對定位) :原位置相當於沒有東西,排版時會被當作空氣(定位框架和fixed一樣是整個網頁,只是他不會跟隨你移動)
      影片中也有教到:
      用relative 包住absolute 的時候absolute 定位的框架會從整個網頁縮小到relative 定義的那個物品
      再來是我自己寫了以後的一些想法(有可能有錯,我不能很確定):
      [絕對定位]可以和[相對定位]配合,但[固定定位]卻不能配合(定位框架一直是整個網頁)
      如果[相對定位]害一個地方空出來不好看,可以用margin-top:-?px來讓整體上移
      至於什麼時候用,我的想法是:
      fixed(固定定位):雖然很難用,無法和relative 配合(但是可以把它放在畫面左邊或右邊,用來當作移動的目錄也可以)
      relative(相對定位):雖然會讓一個地方空出來,但把握好前面的知識(margin-top)其實是沒問題
      (可以利用它從原位置偏移的特性,來進行一些物件重疊之類的效果吧?因為我也不太會用到,還是用來和[絕對定位]配合比較方便)
      absolute(絕對定位):基本上排版用這個是最方便的,由於是直接在網頁的框架定座標,所以只要設計好樣式,之後就可以排出來了,而且也不會一直黏著你

  • @xxnull3257
    @xxnull3257 3 роки тому +1

    UA-cam广告也太多了吧

    • @salarygoal4932
      @salarygoal4932 3 роки тому

      去擴充軟體下載 廣告封鎖器(電腦

  • @lmh651
    @lmh651 3 роки тому

    Items不是讀作依疼死 是哀疼死
    Infinite的重音節在最前面

  • @jeffdogpig
    @jeffdogpig 3 роки тому +2

    你怎麼什麼都會阿...

    • @bunnyastro2601
      @bunnyastro2601 3 роки тому +1

      html js css這種都算基本吧

    • @jeffdogpig
      @jeffdogpig 3 роки тому

      @@bunnyastro2601 真的嗎 不過聽說學過C語言的話學習其他程式語言就相對簡單多了

    • @bunnyastro2601
      @bunnyastro2601 3 роки тому

      @@jeffdogpig 網頁基本的程式跟其他程式筆起來好學很多
      C語言算是裡面難度高的
      但基本邏輯都差不多那樣而已
      C C#那些比較麻煩的是軟體操作跟api串接的部分~各種奇怪的錯誤

  • @dalecheung3711
    @dalecheung3711 2 роки тому

    有点啰嗦,但适合初学者。。就是这台腔还有单词的发音。。。😅

    • @pizzafortrashlegend6510
      @pizzafortrashlegend6510 2 роки тому +9

      你是要來學東西還是上正音班

    • @fakemaker3854
      @fakemaker3854 2 роки тому +2

      香港人表示 台灣國語聽起來才是最舒服最好聽
      中國的普通話一堆兒話音
      聽起來只會讓人覺得很噁心

    • @wadanemacho
      @wadanemacho 2 роки тому

      @@fakemaker3854 你来听听我的川普 你能听出一个儿化音算我输

    • @makeLi-te1jj
      @makeLi-te1jj 10 місяців тому

      你说儿豁@@wadanemacho