小編給大家分享一下css怎么實現(xiàn)橫向導航和豎向導航欄,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
站在用戶的角度思考問題,與客戶深入溝通,找到榕江網(wǎng)站設計與榕江網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗,讓設計與互聯(lián)網(wǎng)技術結合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:網(wǎng)站制作、網(wǎng)站設計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名申請、虛擬空間、企業(yè)郵箱。業(yè)務覆蓋榕江地區(qū)。
一、豎向導航
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<style>
ul{
list-style-type:none;
margin:0;
padding:0;
}
a{
display:block;
background-color:green;
color:white;
width:80px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active{
background-color:#98bf21;
}
</style>
</head>
<body>
<ul>
<li><aherf="">首頁</a></li>
<li><aherf="">學習中心</a></li>
<li><aherf="">考試中心</a></li>
<li><aherf="">考試動態(tài)</a></li>
</ul>
</body>
</html>
運行結果:
2345截圖20180821104848.png
二、橫向導航:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<style>
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:left;
}
a{
display:block;
background-color:pink;
color:white;
width:80px;
text-align:center;
padding:4px0px;
text-decoration:none;
}
a:hover,a:active{
background-color:gray;
}
</style>
</head>
<body>
<ul>
<li><aherf="">首頁</a></li>
<li><aherf="">學習中心</a></li>
<li><aherf="">考試中心</a></li>
<li><aherf="">考試動態(tài)</a></li>
</ul>
</body>
</html>
以上是“css怎么實現(xiàn)橫向導航和豎向導航欄”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)頁標題:css怎么實現(xiàn)橫向導航和豎向導航欄
網(wǎng)頁URL:http://muchs.cn/article8/phojop.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設計公司、定制開發(fā)、網(wǎng)站策劃、企業(yè)建站、網(wǎng)站設計、網(wǎng)站維護
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)