iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 16
1
自我挑戰組

迷路的前端工程系列 第 16

第十六日:Display

  • 分享至 

  • xImage
  •  

第十四日回顧:
我們在前天介紹了一些置中的方法,而今天要介紹其中一種間接方法的基礎,display 屬性

我們在之前有介紹到行內元素(inline element)與塊狀元素(block element),而我們可以透過 display 屬性來更改其元素的型態

display : inline; 更改成行內元素
display : block; 更改成塊狀元素
display : none; 更改成空元素,會消失在頁面當中

有一個很經典的使用方式即為水平的清單

<ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
</ul>

原本的樣子會像是這個樣子

  • 01
  • 02
  • 03
    而我們在增加了一些 CSS code
ul li{
 display : inline;
 }

就會變成
01 02 03
這個操作可以幫助我們的 nav 導覽列有著更佳的創建方法

而我們在學會 JS 控制 CSS 後 display:none 可以幫助我們將一些需要暫時不顯示的元素隱形。

今天就先介紹行內元素與塊狀元素和空元素的切換,其餘內容讓我們繼續在以後擠出來吧

小抱怨專區:
進攻 Spring 中,希望這次不會卡太久...


上一篇
第十五日:前後端是什麼
系列文
迷路的前端工程16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言