iT邦幫忙

2

[鼠年全馬鐵人挑戰] Week11 - 超新手學習筆記:CSS-container容器標籤

  • 分享至 

  • xImage
  •  

Hi~大家這周過的好嗎?

上週開始參加六角學院切版直播班,希望讓自已的切版能力越來越好但現在的程度還算是很新~
所以希望能把在這八週學到的寫成筆記更加深印象~
這週要來寫寫 Container 容器的概念,這是我第一次聽到原來 CSS 可以這樣命名,了解到了以後發現在這樣的命名方式比較方便也更好維護了,以下整理成筆記:

什麼是 container

container 在中文的字面上是容器的意思,可以把底下子層所有的標籤全部包起來,在給 CSS 命名的時候父層可以用 container 讓標籤語意化。

在 HTML 5 出來之前,排版最常用的標籤是 div span,但我們如果想要對div做更進一步的語意化,那就對其做添加 class,如 <div class="header"></div>標示當前的div裡需要寫的是有關頭部的結果。
那時候還沒有相關常用的 h5 標籤,h5的出現讓標籤語意化更進一大步。
正因為業界前端工程師,已習慣這種編碼習慣,所以即便加上 container 的 class並沒有寫上具體的 css 代碼也會讓排版更加統一方便。
使用 container 的 class也是業界已默認的排版命名方式,可以更加方便的維護,也比較看的懂別人寫的 code進而加速排版品質。

container 的 寫法

這次的範例就來用這次的版型作業吧XDD

 <div class="container">
​
    <div class="title-bottom-line">
      <h1>Joanne<br />Chen</h1>
    </div>
​
    <div class="photo">
      <img src="images/photo-1536180931879-fd2d652efddc.png" alt="">
    </div>
​
    <div>
      <div class="title-bottom-line">
        <h2>個人資料</h2>
        <span class="title-en">PROFILE</span>
      </div>
      <div class="mb-72">
        <ul>
          <li class="personal">
            <div class="edu">
              陳久安 Joanne Chen<br />
              1997- <br />
              應屆畢業生/接案設計師/UI 設計實習生
            </div>
            <div class="exp">
              UI 設計修行中/立志當斜槓青年<br />
              獨立接案,內容涵蓋:<br />
              品牌規劃、視覺設計、編輯設計、標準字、物件及印刷品設計等。
            </div>
          </li>
        </ul>
      </div>
      <div class="title-bottom-line">
        <h2>學歷</h2>
        <span class="title-en">EDUCATION</span>
      </div>
      <div class="mb-72 item-wrap">
        <ul class="school">
          <li class="school-item time-line">國立六角師範大學 視覺設計學系 學士學位 | 2016-2020</li>
          <li class="school-item">國立六腳高級中學 美術班 | 2013-2016</li>
        </ul>
      </div>
    </div>
​
  </div>

這裡可以看到,外層使用 container 容器把所有以下的程式碼都包起來,就像一個容器能裝各種不一樣的東西樣式,在使用上也更有彈性,如果有 bug 的時候我們也能輕易找到程式碼所在的地方,加速處理bug的速度。

container 容器是我第一次遇到的方法,也開始使用 container 來寫 css,發現真的方便很多呢,程式碼的品質也提升了:) 希望能更了解 container 的用法,讓排版可以越來越好/images/emoticon/emoticon08.gif


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言