1.小米導航欄示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>06小米商城導航條示例</title> <style> /* 全局通用的樣式，去除瀏覽器默認的內邊距和外邊距 */ * { margin: 0; /* 去除瀏覽器默認的margin和padding */ padding: 0; } /* 將ul前面的原點去除 */ ul { list-style-type: none; /* 將ul列表前面的小圓點去掉 */ } /* 去除a標簽的下划線 */ a { text-decoration-line: none; } /* 設置li左浮動，每個li標簽的右面有15個像素點 */ .nav-left > ul > li { float: left; padding-right: 15px; } /* 設置a標簽字體顏色為白色 */ .nav-left > ul > li > a { color: white; } /* 設置登錄、注冊、購物車的div標簽為右浮動 */ .nav-right { float: right; /*padding-right: 15px;*/ } /* 設置div標簽下的a標簽每個a標簽的右面有15px的內邊距 */ .nav-right > a { padding-right: 15px; color: white; /* 設置a標簽字體顏色為白色 */ } /* 設置整個導航欄的背景顏色 */ .nav { background-color: darkslategrey; } /* 目的為了撐起來，因為孩子全都是浮動的，都脫離了文檔流，所以要增加一個偽元素的孩子，這個孩子的左右不能有浮動，所以就將標簽撐起來了 */ .clearfix:after, /* 增加偽元素，在內容的后面增加 */ .clearfix:before { /* 增加偽元素，在內容的前面增加 */ clear: both; /* 左右都不能有浮動 */ content: ''; display: block; /* 變成塊級標簽 */ } .temp { width: 90%; /* 只占父標簽的百分之90的寬度 */ margin: 0 auto; padding: 12px; } .other { height: 1000px; /*margin-top: 20px;*/ background-color: coral; /*margin: 0 auto;*/ } </style> </head> <body> <!-- 導航欄 --> <div class="nav"> <div class="temp clearfix"> <!-- 讓nav里的內容只占nav的多少多少 --> <div class="nav-left"> <ul> <li><a href="">玉米商城</a></li> <li><a href="">大米</a></li> <li><a href="">小米</a></li> <li><a href="">黑米</a></li> <li><a href="">小強</a></li> <li><a href="">花生</a></li> <li><a href="">豆漿</a></li> <li><a href="">牛奶</a></li> </ul> </div> <div class="nav-right"> <a href="">登錄</a> <a href="">注冊</a> <a href="">購物車</a> </div> </div> </div> <!-- 其他 --> <div class="alw"> <div class="other">我是其他的內容</div> </div> </body> </html>
