HTML 之 標準版面設計
阿新 • • 發佈：2019-03-25
clas blog 段子 doc ctype 1.5 itl fixed 右移 代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ /*position用於固定標題頭永遠放在上面*/ position: fixed; right:0; left:0; top:0; background-color: #2459a2; /*height、line-height用於設置行高，並將內容居中*/ height: 48px; line-height: 48px; } .pg-body{ background-color: white; /*margin-top: 用於設置去頂部的邊距，頭部是48px,所以這裏是50px,預留了一部分空間;*/ margin-top: 48px; height: 5000px; } .w{ /*width:為頭部具體內容寬度;*/ width: 980px; margin: 0 auto; } .pg-header .menu{ /*使其既具有block的寬度和高度特性*/ display: inline-block; /*使該標簽的上下邊距為0，左右邊距為10px*/ padding: 0 10px; color: white; } /*當鼠標放到此位置時，進行背景顏色替換 */ .pg-header .menu:hover{ background-color: aqua; } </style> </head> <body> <div class="pg-header"> <div class="w"> <a class="logo">LOGO</a> <a class="menu">全部</a> <a class="menu">42區</a> <a class="menu">社區</a> <a class="menu">段子</a> <a class="menu">1024</a> <!--float:right 讓登陸標簽右移動--> <div class="menu" style="float: right">登陸</div> <!--float:right 讓註冊標簽右移動--> <div class="menu" style="float: right">註冊</div> <!--當父div管不住子div的float時，可使用如使下面的語句--> <div style=“clear:both;”></div> </div> </div> <div class="pg-body"> <div class="w">bbbb</div> </div> </body> </html>
展示
HTML 之 標準版面設計