Web前端開發(fā)技術(shù)項目教程（HTML5 CSS3 JavaScript）（微課版） 課件 6.3任務(wù)引入 制作與美化水平導(dǎo)航欄

項目6非遺項目申報指南頁面信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》CSS高級應(yīng)用任務(wù)6.3制作與美化水平導(dǎo)航欄前端技術(shù)開發(fā)任務(wù)引入一非遺項目申報指南頁面的原型圖制作水平導(dǎo)航欄任務(wù)描述制作與美化水平導(dǎo)航欄1.使用列表創(chuàng)建水平導(dǎo)航欄，在頁面上居中顯示。2.列表項內(nèi)容為超鏈接，并設(shè)置超鏈接樣式。3.文字樣式的設(shè)置。4.列表樣式的設(shè)置。5.鼠標懸停時列表項樣式的設(shè)置。任務(wù)實施二3124列表項不顯示項目符號，背景樣式的設(shè)置等設(shè)置超鏈接樣式使用列表來創(chuàng)建導(dǎo)航欄，并放置在一個層中，便于管理列表項設(shè)置浮動，讓其橫向排列列表樣式超鏈接樣式創(chuàng)建列表列表項橫向排列任務(wù)實施二水平導(dǎo)航欄HTML代碼<divid="nav"><ul> <li>

<ahref="#"target="_blank">首頁</a> </li>…</ul></div>1.設(shè)置層的大小2.設(shè)置層的背景色層“nav”的CSS代碼#nav{ width:1000px; height:60px; background:#CCC;

margin:0auto;}3.設(shè)置層在頁面上居中顯示階段性網(wǎng)頁效果任務(wù)實施二1.清除列表默認樣式，邊距和填充2.設(shè)置列表項寬度，并使其浮動起來導(dǎo)航欄列表的CSS代碼#navul{ width:1000px; height:60px; margin:0px; padding:0px; }3.設(shè)置列表項的行高=列表高度=層高度，最外層父元素的高度#navulli{ float:left; width:200px; line-height:60px;

list-style:none;

text-align:center; background:#990000;} 4.設(shè)置列表項不顯示項目符號，文字居中5.設(shè)置列表項背景色階段性網(wǎng)頁效果任務(wù)實施二1.設(shè)置超鏈接樣式2.設(shè)置超鏈接懸停狀態(tài)時，背景顏色為黑色。導(dǎo)航欄列表的CSS代碼#navullia{

font-size:20px;

text-decoration:none;

color:#fff;}#navulli:hover{ background:#000;}#navulli{ background:url("../img/bg_6.png");}3.設(shè)置導(dǎo)航欄背景圖片感謝觀看