CSS屬性（display）
阿新 • • 發佈：2019-01-06
1.display屬性
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>08display屬性</title> <style> .c1 { background-color: red; /*display: none; !* 讓其在頁面上不顯示 *!*/ /*display: inline; !* 讓其變成一個行內標籤 *!*/ display: inline-block; /* 讓其具有塊級標籤和內聯標籤（行內標籤）特點，就是可以設定長和寬的行內標籤 */ } .c2 { width: 100px; height: 100px; background-color: green; /*display: block; !* 讓其變成一個塊級標籤*!*/ display: inline-block; /* 讓其具有塊級標籤和內聯標籤（行內標籤）特點，就是可以設定長和寬的行內標籤*/ } #ulid1 { background-color: darkslategrey; display: inline-block; list-style-type: none; /* 將標題前面的點去掉 */ } li { display: inline-block; /* 將li標籤變為行內標籤，並且可以設定長和寬 */ border-right: 2px solid bisque; /* 設定右邊框2畫素 實線*/ } li.last { border-right: none; /* 將li最後一個標籤的右邊框設定成沒有 */ } </style> </head> <body> <div class="c1">div</div> <!-- div是塊級標籤，可以設定長和寬 --> <span class="c2">span</span> <!-- span標籤是一個內聯標籤，自己佔多大就佔多大,不能設定長和寬 --> <span class="c2">span</span> <ul id="ulid1"> <li>玉米商城</li> <li>電腦</li> <li>手機</li> <li class="last">平板</li> </ul> </body> </html>
