製作4--w3school導航欄
阿新 • • 發佈：2020-10-04
效果圖：
製作思路：
[html]
1.導航欄固定寬、高，可以用ul>li*7、nav套a、div套a
[css]
2.設定ul、nav、div寬高背景顏色
3.設定li水平佈局（左浮動）、行高（行高可以把li的高度撐開，所以可以不用設定高度）
4.設定a清除下劃線、字型顏色、字型大小，由於a是行內元素，不支援設定寬高，但是滑鼠移動到li上有可能不是超連結，需要超連結把li撐開，所以把a變成塊元素，a繼承父元素li的行高
5.設定a左右的內邊距
6.設定滑鼠移到a上，hover
程式碼1：
nav.html
<body> <ul class="menu"> <li><a href="javascript:;" title="HTML 系列教程">HTML/CSS</a></li> <li><a href="javascript:;" title="瀏覽器指令碼教程">Browser Side</a></li> <li><a href="javascript:;" title="伺服器指令碼教程">Server Side</a></li> <li><a href="javascript:;" title="程式設計教程">Programming</a></li> <li><a href="javascript:;" title="XML 系列教程">XML</a></li> <li><a href="javascript:;" title="建站手冊">Web Building</a></li> <li><a href="javascript:;" title="參考手冊">Reference</a></li> </ul> </body>
style.css
.menu { width: 1219px; height: 48px; background-color: #E8E7E3; margin: 100px auto; } .menu li { float: left; /* 高度可以不寫，line-height把高度撐開 */ height: 100%; line-height: 48px; /* 1.直接設定li大小 2.設定a大小，把li撐大（在區域裡面都屬於超連結） */ } .menu a { text-decoration: none; color: #777; font-size: 18px; display: block; /* margin: 0 40px; */ padding: 0 40px; } .menu a:hover { background-color: rgb(61, 61, 62); color: #E8E7E3; }
程式碼2：
nav.html
<body> <nav class="nav-menu"> <a href="javascript:;" title="HTML 系列教程">HTML/CSS</a> <a href="javascript:;" title="瀏覽器指令碼教程">Browser Side</a> <a href="javascript:;" title="伺服器指令碼教程">Server Side</a> <a href="javascript:;" title="程式設計教程">Programming</a> <a href="javascript:;" title="XML 系列教程">XML</a> <a href="javascript:;" title="建站手冊">Web Building</a> <a href="javascript:;" title="參考手冊">Reference</a> </nav> </body>
style.css
.nav-menu {
width: 1219px;
height: 48px;
background-color: #E8E7E3;
margin: 100px auto;
line-height: 48px;
}
.nav-menu a {
display: block;
float: left;
text-decoration: none;
padding: 0 40px;
color: #777;
font-size: 18px;
}
.nav-menu a:hover {
background-color: rgb(61, 61, 62);
color: #E8E7E3;
}