回覆列表
-
1 # 一顆奶豆
-
2 # 愚喬啊
1、新建html頁面
開啟html編輯軟體，新建一個html頁面。如圖：
2、新增導航標籤
在<body>標籤裡新建一個<ul></ul>標籤，然後在<ul>標籤裡新增幾個<li></li>標籤。如圖：
3、在<li>標籤內新增文字。
在新建的<li>新增要顯示的內容。如圖：
4、建立樣式標籤
在<title>標籤後新建一個<style type="text/css"></style>標籤。
5、建立橫向導航的樣式
在<style>標籤裡新增一個樣式類為：.nav li{}，然後再.nav li類中設定樣式背景顏色為紅色，浮動為左浮動，內邊框上下為8px左右為15px，列表屬性為none，字型顏色為白色。
樣式程式碼為：
nav li{ background-color: red; padding: 8px 15px; float: left; list-style: none; color:#fff; }
6、引用樣式類。
在<ul>標籤內新增，就可以讓nav下的<li>標籤引用到設定好的樣式類。如圖：
7、檢視效果。
把html檔案儲存後，使用瀏覽器開啟即可看到橫向導航選單效果。如圖：
1、a標籤既可以當作連結符號來用，本身也是行內標籤的一種，直接用a標籤輸入文字，可以直接在橫排顯示。
2、可以做出如圖所示效果，橫排顯示的導航。
3、如果想要對整體的導航進行移動位置，可以對整個的a標籤新增上一個大的盒子div，這樣對整體div的移動就可以了。
4、如圖，對div新增居中，添加個描邊就直接影響到整個a標籤內容了。
5、我們還可以使用塊狀標籤div來作為導航的一份子，如果中間有連結的時候需要a標籤。
6、預設的塊狀標籤div是豎排排列的，就是會換行。
7、然後我們將div新增float:left；浮動效果就好了。
8、這樣剛才的豎排導航就變成了橫排排列的導航頁了。
9、很多時候我們做導航會用到無序列表ul或者有序列表ol來製作導航，做法和div也是一樣的，如圖建立ul li標籤；將li新增浮動效果。
10、再新增些邊框值，這樣一個導航頁也好了。