看你是直接在div里面做css格式還是額外調(diào)用css，建議是后者,這樣看著比較簡潔。
創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供新城網(wǎng)站建設(shè)、新城做網(wǎng)站、新城網(wǎng)站設(shè)計(jì)、新城網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、新城企業(yè)網(wǎng)站模板建站服務(wù)，10余年新城做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
html引入外部css:
link rel="stylesheet" href="文件路徑/文件名.css"
比如你的html文件里有一個div模塊
div id ="daohang"
div id = "daohang1" class =“geshi”導(dǎo)航1/div
div id ="daohang2" class =“geshi”導(dǎo)航2/div
div id ="daohang3" class =“geshi”導(dǎo)航3/div
/div
在另外一個css文件里布置格式
#daohang{
height: 30px;
background-color: white;
border: solid 1px yellow;
margin: 2px 0;
line-height: 30px;
.........
}
依次類推設(shè)置3個子div的格式。class用于設(shè)置3個子div的共同格式；
比如設(shè)置共同字體：
.geshi{
font-family: 微軟雅黑;
}
需要什么樣的排版格式百度下怎么設(shè)置就行了 上面這個主要是框架,具體的格式就在css文件里面設(shè)置,什么顏色\背景\字體\位置等等都在css里設(shè)置就行,html的div里面不需做什么操作
[img]用CSS的滑動門技術(shù)可以做 步驟：1.素材：找背景圖片(圖片的width與height 要與ul的一致) 2.代碼：style type="text/css" /*確定菜單的整體位置*/ body{margin-top:20px; margin:0;} /* 設(shè)置ul的樣式*/ ul.menu{ font-family:Arial; font-size:14px; background:url(滑動門技術(shù)/hdm.jpg); padding:0 0 0 8px; list-style:none; height:32px;/*背景圖片的高*/ width:400px;/*背景圖片的寬*/ } .menu li {float:left;}/*設(shè)置#menu中的li屬性 。li原本的塊級元素，設(shè)置向左浮動，這樣使得各列表橫向排列*/ ul li a {display:block;/pp line-height:32px;/pp color:#ddd;/pp text-decoration: none;/pp padding: 0 0 0 14px;/pp } li strong { display:block;} li a:hover strong{ color:#fff; background:url(滑動門技術(shù)/Lt_hdm.jpg) ; background-color:#999999;} /style /head body ul class="menu"lia href=" " strongCSS/strong/a/li lia href="#"strongHTML/strong/a/li lia href="#"strongDreamweaver/strong/a/li lia href="#"strongPhotoshop/strong/a/li lia href="#"strongHome/strong/a/li /ul /body
CSS導(dǎo)航樣式
導(dǎo)航條的制作可以采用一個列表，并對之中的列表項(xiàng)浮動定位，再加上細(xì)節(jié)上的樣式設(shè)計(jì)，一個導(dǎo)航就完成了，下面根據(jù)不同的導(dǎo)航實(shí)例分析一下。
橫向?qū)Ш?/p>
BADY部分
body
!—以列表作為導(dǎo)航條，列表項(xiàng)作為導(dǎo)航頻道，很好的利用了列表標(biāo)簽--
ul id="nav"
lia href="#" id="current"首頁/a/li
lia href="#"文章/a/li
lia href="#"參考/a/li
lia href="#"博客/a/li
lia href="#"論壇/a/li
lia href="#"聯(lián)系/a/li
/ul
/body
CSS部分
style type="text/css"
!--
#nav {
height:26px;
border-bottom:2px solid #2788da;
}
#nav li {
/*針對列表項(xiàng)，去除列表前面的樣式，并使之浮動定位，形成橫向?qū)Ш綏l*/
float:left;
list-style-type:none;
}
#nav li a {
/*將導(dǎo)航文字作為塊級元素，使之可以像一個方塊按鈕一樣去運(yùn)作，對之進(jìn)行樣式設(shè)計(jì)*/
color:#000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color:#eee;
margin-left:2px;
}
#nav li a#current { /*此樣式是想模仿一種文件夾樣式，當(dāng)前文檔所在頻道會顯示為與其他頻道不同的樣式*/
background-color:#2788da;
color:#fff;
}
#nav li a:hover{ /*設(shè)置鼠標(biāo)懸在按鈕上的樣式，注意，a:hover只有在a標(biāo)簽中有href屬性中的才有效*/
background-color:#bbb;
color:#fff;
}
--
/style
先用DIV來把導(dǎo)航的位置定下來！ 然后用CSS設(shè)置DIV中導(dǎo)航連接的屬性，比如顏色下劃線等等。 具體怎么做要看你怎么設(shè)計(jì)了。
比如說百度空間的導(dǎo)航就是以下的設(shè)置方法：
/*導(dǎo)航欄設(shè)置*/
空間名稱和簡介區(qū)域
#header 主體部分{height:89px;background:#3399CC}
#header div.lc 左背景圖{background:url(temp1/hdl.jpg) no-repeat}
#header div.rc 右背景圖{background:url(temp1/hdr.jpg) no-repeat top right}
#header div.tit 空間名稱{top:8px;left:20px;line-height:22px;font-size:20px;font-family:黑體}
#header div.tit a.titlink 空間名稱鏈接{color:#FFFFFF;text-decoration:none}
#header div.tit a.titlink:visited{color:#FFFFFF;text-decoration:none}
#header div.desc 空間簡介{top:33px;left:20px;color:#FFFFFF;font-size:13px}
#tabline TAB菜單下方的橫線{top:89px;background-color:#FFFFFF}
#tab TAB菜單主體{top:67px;background:url(temp1/tabbg.gif) repeat-x}
#tab a.on,#tab a.on:link,#tab a.on:visited TAB選中狀態(tài){margin-top:3px;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF;border-top:1px solid #FFFFFF;line-height:19px;background-color:#F3F1F1;color:#197CAE;font-size:14px}
#tab span TAB與TAB之間的分割符“|”{color:#FFFFFF;font-size:14px}
#tab a:link TAB未選中狀態(tài){color:#FFFFFF;text-decoration:none;font-size:14px}
#tab a:visited{color:#FFFFFF;text-decoration:none;font-size:14px}
#tab2 設(shè)置TAB菜單主體{background:#DAE9F5}
#tab2 span TAB選中狀態(tài){color:#000000;font-size:12px;font-weight:bold}
#tab2 a TAB未選中狀態(tài){font-size:12px}
#tab2 a:link{color:#0000CC}
#tab2 a:visited{color:#0000CC}
}
Xhtml?Code:
ul?id="ullist"
lia?href="#"最近來訪/a
div111111/div
/li
lia?href="#"好友/a
div22222/div
/li
/ul
Css?Code:
body?{?background:#ffd4ef;?font:12px?Arial,?Helvetica,?sans-serif;}
#ullist{?height:200px;?list-style:none;?position:relative;?width:202px;}
#ullist?li{?display:inline;?margin-right:10px;}
#ullist?li?a{?background:#ffd4ef;?border:1px?solid?#daa7b8;?border-bottom:1px?solid?#ffd4ef;?color:#f00;?height:12px;?line-height:12px;?left:20px;?padding:3px?5px;?position:absolute;?text-decoration:none;?top:0;?z-index:10;}
#ullist?li?a.ss{?border-bottom:1px?solid?#daa7b8;}
#ullist?li?div{?background:#ffd4ef;?border:1px?solid?#daa7b8;?height:100px;?left:0;?position:absolute;?top:19px;?width:200px;?z-index:9;}
jQuery?Code:
$('#ullist?li?div').hide().eq(0).show();
$('#ullist?li?a').eq(1).css("left","100px").addClass("ss");
$('#ullist?li').click(function(){
$('#ullist?li?div').hide();
$('#ullist?li?a').addClass("ss");
$(this).find('div').show();
$(this).find('a').removeClass("ss").blur();
});
附效果圖一張，如下所示：
先碼好導(dǎo)航欄所需要的基本的HTML代碼
這個就不必多說具體的代碼如下：
html
head
title橫向?qū)Ш綑?title
style
!----
/style
/head
body
div class="nav"
ul
lia href="#"首頁/a/li
lia href="#"導(dǎo)航1/a/li
lia href="#"導(dǎo)航2/a/li
lia href="#"導(dǎo)航3/a/li
lia href="#"導(dǎo)航4/a/li
lia href="#"導(dǎo)航5/a/li
lia href="#"導(dǎo)航6/a/li
/ul
/div
/body
/html
下面我們通過CSS 來改變他的樣式。
首先我們先讓導(dǎo)航在瀏覽器的中間。不過在讓他居中前得先設(shè)置一個寬度，沒有寬度就沒法居中，這個的原因我就不用贅述了吧！
現(xiàn)在常用的網(wǎng)站寬度為960或980（當(dāng)然也有其他的，一些網(wǎng)站會根據(jù)訪客的顯示器大小有不同寬度的樣式，原因我就不在這多廢話了）我們在這就用980吧。
方法是在style/style之間加入如下代碼來改變他的寬度。為了讓結(jié)果明顯，我們給它又加了一個邊框。
style
!--
.nav ul{
width:980px;/*設(shè)置元素寬度為980px*/
border:1px solid #000;/*設(shè)置一個顏色為#000，寬度為1px的邊框*/
}
--
/style
接下來我們讓他居中。我們在樣式中加入以下代碼。
.nav ul{
width:980px;/*設(shè)置元素寬度為980px*/
border:1px solid #000;/*設(shè)置一個顏色為#000，寬度為1px的邊框*/
margin:0px auto 0px auto;/*也可以簡寫為margin:0 auto*/
}
因?yàn)槲覀円龅氖菣M向的導(dǎo)航欄，所以現(xiàn)在我們要把它變成橫向排列。我們在樣式中加入以下代碼。
.nav ul li{
float:left;/*讓li元素左浮動*/
}
我們看到測試結(jié)果如圖4。
邊框之所以擠到一起了是因?yàn)楦右院?li就變成了聯(lián)級元素，就沒有寬和高了，所以也就沒法把邊框撐起來了啊。（具體的原因想知道可以百度）當(dāng)然稍后我們可以給ul或.nav加上高度。
接下來，我們通過給元素a添加樣式，讓他更美觀。加入以下代碼。
.nav ul li a{
width:80px;/*設(shè)置元素寬為80px*/
height:28px;/*設(shè)置高度為28px*/
line-height:28px;/*設(shè)置行距為28px，讓文字在每行的中間位置*/
background:red;/*設(shè)置元素的背景為紅色*/
color:#FFF;/*文字顏色是白色*/
margin:5px 10px;
font-size:12px;/*用12號字*/
display:block;/*這個比較關(guān)鍵，因?yàn)閍本身就是聯(lián)級元素，本身不具有寬高，用這個把它變成塊級元素，這樣前面設(shè)置的寬和高就能起作用了*/
text-align:center;/*讓文本居中*/
text-decoration:none; /*去掉下劃線*/
}
我們再加入點(diǎn)互動，當(dāng)訪客鼠標(biāo)放到某個元素上的時候，這個元素要有別于其他元素。要實(shí)現(xiàn)這個我們就要用到:hover這個偽類。在樣式中加入以下代碼。
.nav ul li a:hover{ /*這個大概的意思就是當(dāng)鼠標(biāo)放到這個a元素的上面時，這個a元素的樣式就按下面的代碼執(zhí)行*/
width:78px;
height:26px;
line-height:28px;
border:1px solid red;
color:red;
background:#FFF;
}
最后稍微整理一下代碼
.nav ul{
width:980px;
margin:0px auto;
height:38px;
padding:0;
}
.nav ul li{
float:left;
}
.nav ul li a{
width:80px;
height:28px;
line-height:28px;
background:red;
color:#FFF;
margin:5px 10px;
font-size:12px;
display:block;
text-align:center;
text-decoration:none;
}
.nav ul li a:hover{
width:78px;
height:26px;
line-height:28px;
border:1px solid red;
color:red;
background:#FFF;
}
看看效果，成功沒？
思路就是這樣的，其中還可以再加一些自己的元素，比如背景圖片之類，效果就更好了。
重慶分公司
重慶分公司
