做html橫向導航方法:1.透過ul標籤裡li標籤搭建導覽選單(垂直);2、為li標籤加上「list-style:none」樣式去掉導覽選單前的小黑點;3.為li標籤加上「float: left;」樣式讓導覽列橫向排列即可。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
想法:建立
做html橫向導覽的方法:
#1、新html頁面,開啟html編輯軟體,新建一個html頁面。如圖:
2、新增導航標籤,在
標籤裡新建一個3、在
4、建立樣式標籤,在
5、建立橫向導覽的樣式,在
樣式程式碼為:
.nav li{ background-color: red; padding: 8px 15px; float: left; list-style: none; color:#fff; }
6、引用樣式類別。在
7、查看效果。把html檔案儲存後,使用瀏覽器開啟即可看到橫向導航選單效果。如圖:
所有程式碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>横向导航菜单</title> <style type="text/css"> .nav li{ background-color: red; padding: 8px 15px; float: left; list-style: none; color:#fff; } </style> </head> <body> <ul class="nav"> <li>首页</li> <li>新闻</li> <li>公司产品</li> <li>关于我们</li> <li>公司介绍</li> </ul> </body> </html>
更多程式相關知識,請造訪:程式設計影片! !
以上是怎麼做html橫向導航的詳細內容。更多資訊請關注PHP中文網其他相關文章!