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>
?
?