1、這個需要用到css的position屬性如下這個示例 假設導航的class為nav，將其固定在頁面頂部可以這樣寫 navwidth100%height30pxpositionfixedtop0left0 其中高寬請根據(jù)實際情況修改；一，這要用到float浮動屬性二，floatleft代表想做浮動，也就是橫向排列是向左邊排列四，代碼如下 dw如何制作橫向導航條設置css，浮動，定位，或者設置display為行內元素，當然，寬度一定要夠用；工具材料崇高的文本 首先打開SublimeText軟件，新建一個html頁面，在html頁面中準備好html結構，如下圖所示接下來，我們在html的body結構中添加導航欄的內容，如下圖所示然后需要在style標簽中用CSS定義導航條的樣式，如下；3新建一個div id為“a”，添加ul li標簽4在li中添加自己想要的文字 并調整好文字間距，按F12預覽5首先去掉字體前面的小黑點6接下來，使文字橫向排列，設置代碼如下，給li設置左浮動效果7按F12預覽；如圖步驟設置頁頭背景色并勾選“顯示”上傳頁頭導航欄圖片尺寸1920*120px選擇不平鋪，完成2修改導航欄文字顏色的效果無圖，我的沒改不想，你們自己嘗試 注此處需代碼修改 步驟鼠標浮動到導航條。

2、一定義一個盒子“menu”，用來裝這個導航的二用無序列表ul中的列l(wèi)i放導航的內容三把li的浮動float設置為向左浮動floatleft，這樣，就實現(xiàn)了水平導航條了四在做其他的一些修飾；dw如何制作橫向導航條設置css，浮動，定位，或者設置display為行內元素，當然，寬度一定要夠用CSShtml5如何做到點擊導航欄切換頁面導航欄下面放一個Div，專門用來顯示對應導航欄目的內容點擊導航欄觸發(fā)點擊事件，在事件；創(chuàng)建橫向導航的樣式 在style標簽里添加一個樣式類為nav li，然后再nav li類中設置樣式背景顏色為紅色，浮動為左浮動，內邊框上下為8px左右為15px，列表屬性為，字體顏色為白色 樣式代碼為 nav liback；u1 floatleftbackgroundcolorrgba180，180，180，06 li width84pxliststyletypefloatleftfontsize20pxfontweightbold style1 backgroundcolorBlue style2background。

3、scrollFunc， false 滾動滑輪觸發(fā)scrollFunc方法 windowonmousewheel = documentonmousewheel = scrollFunc；5創(chuàng)建橫向導航的樣式 在標簽里添加一個樣式類為navli，然后再navli類中設置樣式背景顏色為紅色，浮動為左浮動，內邊框上下為8px左右為15px，列表屬性為，字體顏色為白色樣式代碼為navlibackgroundcolor；樣式為ul，li liststyle liststyletype padding0 margin0 *清除ul，li的默認樣式*第五，由于默認的無序列表是豎排的，所以需要為其添加浮動，同時編輯寬度和距離等樣式添加樣式為 ul。

4、程序輸入如下 #menuoverflowhiddenheight20px#menuhover height100px 選擇鼠標指針浮動在其上的元素，并設置其樣式ahover backgroundcoloryellow 對于HTML 部分可以使用任何的 HTML 元。

5、布局做好之后，開始寫導航條的樣式，如圖，先清除導航條的margin和padding然后定位導航條的div，這里我就用絕對定位來居中，如果你有其他導航條居中方法可以忽略這一條然后設置導航條的li左浮動，并且去掉li前面的圓點，讓。

6、導航欄標簽可以直接在H5使用2然后打開indexhtml文件，輸入以下代碼3首先第一個方法就是使用displayinlineblock將ul標簽設置成行內塊級元素然后將li標簽設置為左浮動即可4第二種方法就是就是將p設置為display。