一、定義一個(gè)盒子（“menu”）,用來裝這個(gè)導(dǎo)航的。
成都創(chuàng)新互聯(lián)自2013年起，先為桃源等服務(wù)建站，桃源等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為桃源企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
二、用無序列表（ul）中的列（li）放導(dǎo)航的內(nèi)容。
三、把li的浮動(dòng)（float）設(shè)置為向左浮動(dòng)（float：left；），這樣，就實(shí)現(xiàn)了水平導(dǎo)航條了。
四、在做其他的一些修飾。（下面我給我弄的一個(gè)簡單的導(dǎo)航條給你理解）
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title無標(biāo)題文檔/title
style type="text/css"
#menu{
width:500px;
margin:0 auto; /*令盒子居中*/
font-size:20px; /*定義字體的大小*/
}
ul{
margin:0; padding:0; /*把瀏覽器默認(rèn)的間隔去掉*/
list-style:none; /*把前面的序列號(hào)去掉*/
}
li{
float:left; /*向左浮動(dòng)，這個(gè)是實(shí)現(xiàn)水平的重要步驟??！*/
padding:0 15px; /*li里面的字體和邊框的距離*/
}
a{
text-decoration:none; /*去掉超鏈接的下劃線*/
color:#333; /*超鏈接的字體顏色*/
}
a:hover{
color:#696;
}
/style
/head
body
div id="menu"
ul
lia href="#"菜單1/a/li
lia href="#"菜單1/a/li
lia href="#"菜單1/a/li
lia href="#"菜單1/a/li
/ul
/div
/body
/html
一、 head里添加meta移動(dòng)端的樣式
meta name="viewport" content="width=device-width, initial-scale=1.0"/
div class="nav"
!--漢堡logo menu-- label for="toggle"?/label
input type="checkbox" id="toggle"
div class="menu"
a href="#"Business/a
a href="#"Service/a
a href="#"Learn more/a
a href="#"spanFree Trial/span/a
/div/div
這個(gè)漢堡包menu菜單樣子其實(shí)有代碼實(shí)現(xiàn)的 "?" 而且是作為字體顯示的，可以直接用font-size直接調(diào)整大小
二、css樣式 -通用
body{
width: 100%;
height: 100%;
margin:0; //瀏覽器默認(rèn)的body的margin是8px;由瀏覽器的user-agent-stylesheet提供的。所以我們直接覆蓋默認(rèn)就可以了，
}
html{
font-family:'helvetica neue',sans-serif; //可以寫很多種字體樣式，意思是瀏覽器自己一個(gè)個(gè)識(shí)別，前一個(gè)沒有就看后一個(gè)，一直往后找，直到找到可以用的
}.nav{
float: right;
text-align: right;
height: 70px;
line-height: 70px;
border-bottom: 1px solid #eaeaea;
}
label{
display: none;
}
#toggle{
display:none;
}
.menu a{
margin: 0 10px;
text-decoration: none;
color: gray;
}
.menu{
margin: 0 30px 0 0;
}
.menu a span{
color:#54d17a;
}
//添加@media樣式：
@media only screen and (max-width: 500px) {
label{
display: block;
cursor: pointer;
width: 26px;
float: right;
}
.menu{
width: 100%;
display: none;
text-align: center;
}
.menu a{
display: block;
clear:right;
}
#toggle:checked + .menu{ //這是個(gè)技術(shù)點(diǎn)
transition:all 0.4s ease-in;
display: block;
}
}
label用for綁定的input，自帶了點(diǎn)擊事件，點(diǎn)擊了label的哪個(gè)漢堡logo,input就checked，這樣就利用純CSS實(shí)現(xiàn)了點(diǎn)擊按鈕下拉菜單出現(xiàn)的功能
css定義一條導(dǎo)航欄
首先建立一個(gè)DIV，為其命名為“nav”，在DIV中建立一個(gè)ul無序列表，導(dǎo)航共有幾個(gè)欄目，就為列表添加幾個(gè)li的列表項(xiàng)，為每個(gè)列表項(xiàng)中的內(nèi)容加上超鏈接，鏈接到所需的項(xiàng)目頁面。
然后設(shè)置CSS樣式，為列表規(guī)定寬度和高度，去掉列表前面的符號(hào)，代碼為：
ul {width:寬度值；height：高度值； list-style:none；}
如果是橫向?qū)Ш?，還需為里面的列表項(xiàng)li標(biāo)簽設(shè)置左浮動(dòng)的樣式，代碼為：li {float:left;}
每個(gè)欄目之間分隔的距離可通過margin（外邊距）屬性來設(shè)置。
導(dǎo)航條的更多樣式及詳細(xì)步驟可去這里參考
你知道li圖片，就是list-style-image:XX.jpg。XX.jpg就是那個(gè)你說的那條線了，
還有一種方法，就是計(jì)算好導(dǎo)航的文字，把你那條線也一起做成背景圖片，這樣就不用管那么多了
假如你不是太懂，就百度一下“l(fā)ist-style-image”
我想這樣你就明白了
假如還有什么不懂，就HI我，也可以繼續(xù)追問。
重慶分公司
重慶分公司
