怎么寫橫向導航用css

制作網站頁面時，導航圖標都是必不可少的部分，那么，如何用css來制作簡單的橫向導航呢？

東西/原料

HBuilder
Adobe Dreamweaver

方式/步調

1
第一步，新建html頁面
在html編纂器軟件內，新建html頁面，（一般我們常利用的兩條目編纂器是HBuilder和Adobe Dreamweaver，這里我利用的軟件是HBuilder）。如圖：
2
第二步，添加導航的標簽
在<body></body>添加<div class="nav"></div>,于<div class="nav"></div>中心添加<ul></ul>,在<ul>內添加<li>標簽，<li>內同時添加<a>標簽，便利毗連導航跳轉。如圖：
3
第三步，添加導航內容
在新建的<a></a>內，添加橫標的目的導航要顯示的內容。如圖：
4
第四步，建立樣式標簽
在<title></title>下方添加一個<style type="text/css"></style>
5
第五步，建立橫標的目的導航的樣式代碼
在<style>標簽里添加一個樣式類為：.nav寬度為1200像素，在整個頁面擺布居中；.nav ul li斷根失落li的自帶樣式，li的每個寬度為180像素，li左浮動，實現橫標的目的導航樣式，布景為紅色，高度為30像素，為了上下居中，行高應與li高度一致，文字擺布居中；a標簽去失落下劃線，給字體顏色為白色。
樣式代碼為：
.nav{ width: 1200px; margin-left: auto; margin-right: auto;}
.nav ul li{
list-style: none;
width:180px;
float: left;
height: 30px;
line-height: 30px;
background: red;
text-align: center;
}
.nav ul li a {
text-decoration: none;
color: #fff;

}
如圖：
6
第六步，結果預覽
源文件html保留后，利用瀏覽器打開預覽結果。如圖：
7
所有代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>橫標的目的導航</title>
<style type="text/css">
.nav {
width: 1200px;
margin-left: auto;
margin-right: auto;
}

.nav ul li {
list-style: none;
width: 180px;
float: left;
height: 30px;
line-height: 30px;
background: red;
text-align: center;
}

.nav ul li a {
text-decoration: none;
color: #fff;
}
</style>
</head>

<body>
<div class="nav">
<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>
</ul>
</div>
</body>

</html>
END

發表于 2020-04-22 19:00
閱讀 ( 859 )
分類：其他類型

怎么寫橫向導航用css

東西/原料

方式/步調

你可能感興趣的文章

相關問題

0 條評論

作家榜 ?

推薦文章