//復合寫法 body{background:url(../images/1.png) no-repeat center top;}
2019-02-180個贊
所屬章コース:ブロックレベル要素をインライン要素に変換したり、その逆に変換したりする
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>塊元素和行內塊元素相互轉換</title> <style type="text/css"> p{display:inline;width: 200px;height: 200px;background-color: #CCC} b{display:block;} /*div{display:inline-block;height: 30px; width: 400px;background-color: pink}*/ .box{width: 100px;height: 40px;background-color: #ccc;line-height: 40px;text-align: center;} .main{width: 100px;height: 100px;background-color: pink;line-height: 100px;text-align: center;display:none;} .box:hover .main{display:block;} </style> </head> <body> <p>塊級元素轉換為行內元素</p><span>123</span> <b>行內元素轉換為塊級元素</b> <div>將標簽轉換為行內塊元素</div><span>123</span> <div class="box">導航 <div class="main">小菜單 </div> </div> </body> </html>
2019-02-180個贊
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> ul li{list-style:none;width:100px;line-height:40px;text-align:center;background-color:#ccc;margin: 0px 1px;float:left;} .box1{width: 200px;height: 200px;background-color: pink;;float:right;} .clear{clear:both;} </style> </head> <body> <ul> <li>html</li> <li>css</li> <li>javaScript</li> <li>jquery</li> <li>php</li> <li></li> </ul> <div class="clear"></div> <div class="box1">div1</div> <div class="box1">div2</div> <div class="box1">div3</div> </body> </html>
2019-02-180個贊