div+css如何布局头部导航条！ 如何用div+css做漂亮的横排导航栏
div+css\u5982\u4f55\u5e03\u5c40\u5bfc\u822a\u5148\u7528DIV\u6765\u628a\u5bfc\u822a\u7684\u4f4d\u7f6e\u5b9a\u4e0b\u6765\uff01 \u7136\u540e\u7528CSS\u8bbe\u7f6eDIV\u4e2d\u5bfc\u822a\u8fde\u63a5\u7684\u5c5e\u6027\uff0c\u6bd4\u5982\u989c\u8272\u4e0b\u5212\u7ebf\u7b49\u7b49\u3002 \u5177\u4f53\u600e\u4e48\u505a\u8981\u770b\u4f60\u600e\u4e48\u8bbe\u8ba1\u4e86\u3002
\u6bd4\u5982\u8bf4\u767e\u5ea6\u7a7a\u95f4\u7684\u5bfc\u822a\u5c31\u662f\u4ee5\u4e0b\u7684\u8bbe\u7f6e\u65b9\u6cd5\uff1a
/*\u5bfc\u822a\u680f\u8bbe\u7f6e*/
\u7a7a\u95f4\u540d\u79f0\u548c\u7b80\u4ecb\u533a\u57df
#header \u4e3b\u4f53\u90e8\u5206{height:89px;background:#3399CC}
#header div.lc \u5de6\u80cc\u666f\u56fe{background:url(temp1/hdl.jpg) no-repeat}
#header div.rc \u53f3\u80cc\u666f\u56fe{background:url(temp1/hdr.jpg) no-repeat top right}
#header div.tit \u7a7a\u95f4\u540d\u79f0{top:8px;left:20px;line-height:22px;font-size:20px;font-family:\u9ed1\u4f53}
#header div.tit a.titlink \u7a7a\u95f4\u540d\u79f0\u94fe\u63a5{color:#FFFFFF;text-decoration:none}
#header div.tit a.titlink:visited{color:#FFFFFF;text-decoration:none}
#header div.desc \u7a7a\u95f4\u7b80\u4ecb{top:33px;left:20px;color:#FFFFFF;font-size:13px}
#tabline TAB\u83dc\u5355\u4e0b\u65b9\u7684\u6a2a\u7ebf{top:89px;background-color:#FFFFFF}
#tab TAB\u83dc\u5355\u4e3b\u4f53{top:67px;background:url(temp1/tabbg.gif) repeat-x}
#tab a.on,#tab a.on:link,#tab a.on:visited TAB\u9009\u4e2d\u72b6\u6001{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\u4e0eTAB\u4e4b\u95f4\u7684\u5206\u5272\u7b26\u201c|\u201d{color:#FFFFFF;font-size:14px}
#tab a:link TAB\u672a\u9009\u4e2d\u72b6\u6001{color:#FFFFFF;text-decoration:none;font-size:14px}
#tab a:visited{color:#FFFFFF;text-decoration:none;font-size:14px}
#tab2 \u8bbe\u7f6eTAB\u83dc\u5355\u4e3b\u4f53{background:#DAE9F5}
#tab2 span TAB\u9009\u4e2d\u72b6\u6001{color:#000000;font-size:12px;font-weight:bold}
#tab2 a TAB\u672a\u9009\u4e2d\u72b6\u6001{font-size:12px}
#tab2 a:link{color:#0000CC}
#tab2 a:visited{color:#0000CC}
}
\u770b\u4f60\u662f\u76f4\u63a5\u5728div\u91cc\u9762\u505acss\u683c\u5f0f\u8fd8\u662f\u989d\u5916\u8c03\u7528css\uff0c\u5efa\u8bae\u662f\u540e\u8005,\u8fd9\u6837\u770b\u7740\u6bd4\u8f83\u7b80\u6d01\u3002
html\u5f15\u5165\u5916\u90e8css:
\u6bd4\u5982\u4f60\u7684html\u6587\u4ef6\u91cc\u6709\u4e00\u4e2adiv\u6a21\u5757
\u5bfc\u822a1
\u5bfc\u822a2
\u5bfc\u822a3
\u5728\u53e6\u5916\u4e00\u4e2acss\u6587\u4ef6\u91cc\u5e03\u7f6e\u683c\u5f0f
#daohang{
height: 30px;
background-color: white;
border: solid 1px yellow;
margin: 2px 0;
line-height: 30px;
.........
}
\u4f9d\u6b21\u7c7b\u63a8\u8bbe\u7f6e3\u4e2a\u5b50div\u7684\u683c\u5f0f\u3002class\u7528\u4e8e\u8bbe\u7f6e3\u4e2a\u5b50div\u7684\u5171\u540c\u683c\u5f0f\uff1b
\u6bd4\u5982\u8bbe\u7f6e\u5171\u540c\u5b57\u4f53\uff1a
.geshi{
font-family: \u5fae\u8f6f\u96c5\u9ed1;
}
\u9700\u8981\u4ec0\u4e48\u6837\u7684\u6392\u7248\u683c\u5f0f\u767e\u5ea6\u4e0b\u600e\u4e48\u8bbe\u7f6e\u5c31\u884c\u4e86 \u4e0a\u9762\u8fd9\u4e2a\u4e3b\u8981\u662f\u6846\u67b6,\u5177\u4f53\u7684\u683c\u5f0f\u5c31\u5728css\u6587\u4ef6\u91cc\u9762\u8bbe\u7f6e,\u4ec0\u4e48\u989c\u8272\\u80cc\u666f\\u5b57\u4f53\\u4f4d\u7f6e\u7b49\u7b49\u90fd\u5728css\u91cc\u8bbe\u7f6e\u5c31\u884c,html\u7684div\u91cc\u9762\u4e0d\u9700\u505a\u4ec0\u4e48\u64cd\u4f5c
1、新建一个html页面。
2、在html页面上新建三个div标签，分别为这三个div添加class为:header、main、footer。
3、创建style标签用于设置css样式。在title标签下创建一个style标签，然后为header类设置div的高、背景颜色样式。
4、为显示主要内容的main类设置样式。在style标签里设置main类样式的边框、宽、高、背景颜色。
5、设置底部footer的样式。在style标签里添加footer类样式的背景颜色和高度。
6、保存好html文件后使用浏览器查看效果。
7、在浏览器上看到div标签和浏览器存在一些空白的像素，为了去掉这些空白的像素我们需要把body标签设置外边框。
采用列表标签ul li + CSS布局+浮动。
实现代码;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.21shipin.com</title>
<style type="text/css">
#nav {
height: 30px;
width: 100%;
background-color: #c00;
}
#nav ul {
margin: 0 0 0 30px;
padding: 0px;
font-size: 12px;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
#nav li {
list-style-type: none;
display: inline;
}
#nav li a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding: 7px 10px;
color: #FFF;
}
#nav li a:hover {
color: #ff0;
background-color: #f00;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>HomePage</li>
<li>Div CSS教程</li>
<li>CSS布局实例</li>
<li>CSS2.0教程 </li>
<li>CSS在线手册</li>
<li>Web标准</li>
<li>XHTML教程</li>
</ul>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子边框</title>
<style type="text/css">
*{
text-align:center;
}
span{
font-size:30px;
}
.head{
width:95%;
height:50px;
border:3px solid red;
color:red;
position:fixed; //这个定位方式是最重要的，他可以将盒子固定在指定的位置
top:0px; //这就是定位的位置，距离顶端0px
}
.head_black{
width:100%;
height:56px;
}
.content{
width:100%;
height:1000px;
border:3px solid blue;
color:blue;
}
</style>
</head>
<div class="head">
<span>头部</span>
</div>
<div class="head_black"> <!-- 设置空白，因为head在定为fixed后是不占据页面空间的-->
</div>
<div class="content">
<span>下部</span>
</div>
<body>
</body>
</html>
直接贴我看了题写的实例代码吧。我想你应该是这个意思吧。把导航栏固定在最上部。重点都在里面，如有疑问 欢迎追问
浮动或定位
你最好买本书从基础开始学，最好不要动不动找人要代码，不然你学不会的。
推荐现成的导航源代码，来自渴切-来源中文css框架，供你参考
绛旓細璁茬湡锛屾垜瑙夌潃杩欎釜鏄渶绠鍗曚簡銆甯冨眬锛屼綘鍋氫竴涓潤鎬侀〉闈㈢殑鏃跺欏湪鑴戝瓙閲屾瀯鎬濓紝涓昏鍒嗕负鍑犲潡銆備竴鑸槸澶撮儴锛瀵艰埅锛屼富棰橈紝鑴氶儴銆傚ソ锛屽氨鏈夎繖鍥涗釜div锛屽厛鍐欎笂骞朵笖缁欎粬浠竴涓猧d銆傜敤涓涓ぇ鐨刣iv鍖呰捣鏉ワ紝杩欐牱濂藉浐瀹氫笂闈㈠洓涓洅瀛愮殑甯冨眬銆傚啓CSS锛岃瀹氬ぇ灏忥紝鐢ㄧ粷瀵瑰畾浣嶇浉瀵瑰畾浣嶏紝娴姩涔嬬被鐨勫浐瀹氬ソ甯冨眬銆傛渶鍚庣粰浠栦滑...
绛旓細鍔熻兘鏄姹傛湁瓒冲鐨勭粡楠屾潵鏀拺鐨勶紝蹇呴』鍒嗕负鍑犲ぇ閮ㄥ垎锛岀瓥鍒掞紝鍒朵綔锛屼綋楠岋紝瀹屽杽锛屽洟闃熼厤鍚堝緢閲嶈锛屽彧鏈夋妸鎻″ソ澶ф柟鍚戯紝鎵嶈兘鍋氬嚭鏇村ソ鐨勪骇鍝併傚浜庣幇鍦ㄥ晢涓氬寲妯″瀷鐨勬瀯寤猴紝蹇呴』鏈変竴濂楀畬鍠勭殑甯傚満杩愯惀鐞嗗康鍜屼紭绉鐨勫洟闃燂紝鎵嶈兘鏇村ソ鐨勬惌寤轰綘鎯宠鏋勫缓鐨勫钩鍙般傛垜鐩镐俊鑵捐涔熸槸濡傛銆傛垜甯屾湜妤间富鑳藉厛浠庡熀纭鍋氳捣锛岀劧鍚庡涔犱竴...
绛旓細绗3绔犺嚦绗9绔狅紝涓姝ユ娣卞叆锛岃缃浘鐗囥佽儗鏅佽〃鏍笺佽〃鍗曟牱寮忥紝濡傛敼鍙橀摼鎺ユ晥鏋溿侀紶鏍囩壒鏁堝拰椤甸潰婊氬姩鏉★紝浠ュ強鍒朵綔瀹炵敤鑿滃崟濡傜櫨搴瀵艰埅鏉°傛护闀滃簲鐢ㄩ儴鍒嗭紝灞曠ず浜嗗悇绉嶈瑙夋晥鏋滐紝濡傛ā绯娿侀忔槑鍜岄槾褰辩瓑銆傝繘鍏ョ浜岄儴鍒嗭紝绗10绔犵悊瑙CSS瀹氫綅鍜div甯冨眬锛屽涔燿iv涓巗pan鐨勫尯鍒紝浠ュ強鐩掑瓙妯″瀷鍜屽厓绱犲畾浣嶃傚疄渚嬪鍥剧墖绛惧悕鍜...
绛旓細鐒跺悗棣栭〉涓寮濮嬪彲浠ラ噰鍙栭槻瀵艰埅,鐒跺悗鏄痓anner鍥俱傚湪涓嬮潰灏辨槸浣犵殑鍚勯」涓氬姟鐨勪粙缁嶃 鍙互鍙傝冨悇涓珵浜夊鎵嬬殑甯冨眬鏄鎬庝箞鏍鐨勩傜劧鍚庢妸浠栦滑濂界殑鍦版柟鎴彇杩囨潵銆傜綉绔欓椤甯冨眬鎬庝箞淇敼缃戠珯棣栭〉甯冨眬涓鑸槸閫氳繃div+css杩涜淇敼鐨勩傜綉绔欓椤电殑鍐呭甯冨眬璁捐瑕佸缃戠珯鐢ㄦ埛杩涜闇姹傚垎鏋,鎶婄敤鎴锋渶鍏虫敞鐨勫唴瀹规斁缃湪棣栭〉鏍忕洰鐨勭獊鍑轰綅缃;缃戠珯棣栭〉...
绛旓細<style>.head{width:100%;height:60px;}.main{width:70%;height:400px;float:left;}.main{width:30%;height:400px;float:right;}.footer{width:100%;height:60px;}</style><div class ="head">杩欓噷鏄痟ead鍖哄煙</div><div class ="main">杩欓噷鏄富瑕佸唴瀹瑰尯鍩</div><div class="main_left...
绛旓細鍥哄畾瀹藉害銆傚綋鐢ㄦ埛璋冩暣娴忚鍣ㄧ獥鍙ｇ殑澶у皬鏃讹紝甯冨眬鐨勫ぇ灏忎笉浼氭敼鍙橈紝閫氬父鏄900鍒1100鍍忕礌瀹斤紙鏈甯歌鐨勬槸960鍍忕礌锛夈傚綋鐢ㄦ埛璋冩暣娴忚鍣ㄧ獥鍙ｇ殑澶у皬鏃讹紝甯冨眬鐨勫ぇ灏忎細鍙戠敓鍙樺寲銆傦紙涓CSS濯掍綋鏌ヨ鐩哥粨鍚堬紝瀹冭兘澶熼傚簲鏈澶у拰鏈灏忓睆骞曪紝涓氱晫绉颁箣涓哄搷搴旀ц璁★級銆傚脊鎬с傚綋娴忚鍣ㄧ獥鍙ｅ彉瀹芥椂锛屼笉浠呭竷灞鍙樺锛岃屼笖鎵鏈夊唴瀹...
绛旓細<html><head><style type="text/css">#login {right:50px; position:absolute; }</style></head><body><div id="login"><table><td class="login_1">鐧婚檰</td><td>瀵艰埅</td><td>鏉＄洰</td><td>娉ㄥ唽</td></table></div></body></html>/*濡傛灉浣犺繕鏄鐢╯pan<div id="login...
绛旓細鎯冲湪鍝釜鏍囩涓婁綔鐢ㄤ笂CSS鏍峰紡 鍙互鍦ㄦ爣绛句腑鍔犱竴涓狪D灞炴 渚嬪<table width="950" border="0" id=1> 鐒跺悗鍦–SS鏂囦欢涓啓 1{ css鏍峰紡} 杩欐牱灏卞彲浠ユ槸鎯矯SS鏍峰紡甯冨眬浜嗭紒<div id=1>棣栭〉 瀵艰埅1 瀵艰埅2 瀵艰埅3</div> <div id=2><img src="/img/logo.gif" width="189" height="75...
绛旓細绠鍗曡阿浜嗕竴涓紝涓昏娑夊強涓涓诞鍔紝涓涓猦over鐨勯殣钘忥紝鏄剧ず锛屼笉鏄緢澶嶆潅锛屽彲浠ヨ嚜宸卞皾璇曞啓涓嬶紝浠ヤ笅浠ｇ爜浠呬緵鍙傝 <!DOCTYPE html><html> <head> <style> div.menu-bar{ margin:0 auto; width: 1024px; } div.menu-bar ul {margin: 0;padding: 0;height: 100%;width: 100%...
绛旓細鐢CSS鎺у埗鐨勪笅鎷夎彍鍗曪紝鍦ㄥ悇涓祻瑙堝櫒涓〃鐜扮殑涓嶅瀹岀編锛屾渶浣崇殑鏂规硶鏄娇鐢╦Query鏉ュ埗浣滐紝浠ｇ爜濡備笅锛屽姞浜嗕竴涓紦鍔ㄧ殑鏁堟灉锛歔HTML閮ㄥ垎]<div id="nav"> <ul> <li><a href="#">鑿滃崟闆</a></li> <li><a href="#">鑿滃崟涓</a></li> <ul class="childnav"> <li><a href="#">瀛愯彍鍗<...
