CSS样式制作导航条的步骤 怎么用html+css做一个导航条
\u4f7f\u7528ul\u6807\u7b7e\u548ccss\u5236\u4f5c\u5bfc\u822a\u6761\u76f4\u63a5\u4e0a\u4e2a\u5b9e\u4f8b\u5427\uff1a
\u7b2c\u4e00\u6b65\uff0c\u6253\u5f00\u8f6f\u4ef6Adobe Dreamweave CS6\uff0c\u521b\u5efa\u4e00\u4e2a\u65b0\u7684HTML\u3002\u7b2c\u4e8c\u6b65\uff0c\u5728\u5de5\u4f5c\u533a\u57df\uff08body\uff09\u7528\u6807\u7b7e ul \u548c li \u8f93\u5165\u5bfc\u822a\u7684\u5185\u5bb9\u3002\u7b2c\u4e09\uff0c\u7f16\u8f91\u6837\u5f0fCSS\u3002\u5728\u6807\u7b7e\u4e4b\u95f4\u5199\u5165\u6837\u5f0f\u8868\u3002\uff0c\u7b2c\u56db\uff0c\u7d27\u63a5\u4e0a\u4e00\u6b65\u3002\u7531\u4e8e\u65e0\u7ebf\u5e8f\u5217\u5177\u6709\u9ed8\u8ba4\u6837\u5f0f\uff0c\u524d\u9762\u7684\u5706\u70b9\uff08\uff09\uff0c\u6240\u4ee5\u5148\u5199\u53bb\u9664\u9ed8\u8ba4\u6837\u5f0f\u7684\u6837\u5f0f\u3002\u6837\u5f0f\u4e3a\uff1aul,li { list-style:none; list-style-type:none; padding:0; margin:0;} /*\u6e05\u9664ul,li\u7684\u9ed8\u8ba4\u6837\u5f0f*/\u7b2c\u4e94\uff0c\u7531\u4e8e\u9ed8\u8ba4\u7684\u65e0\u5e8f\u5217\u8868\u662f\u7ad6\u6392\u7684\uff0c\u6240\u4ee5\u9700\u8981\u4e3a\u5176\u6dfb\u52a0\u6d6e\u52a8\uff0c\u540c\u65f6\u7f16\u8f91\u5bbd\u5ea6\u548c\u8ddd\u79bb\u7b49\u6837\u5f0f\u3002\u6dfb\u52a0\u6837\u5f0f\u4e3a\uff1a ul li { float:left; width:80px; height:30px; background:#900; line-height:30px; text-align:center; margin-right:2px; color:#fff;} \u6548\u679c\uff0c\u7b2c\u516d\uff0c\u5982\u679c\u9700\u8981\u4e3a\u5bfc\u822a\u6dfb\u52a0\u94fe\u63a5\uff08\uff09\uff0c\u540c\u65f6\u83b7\u5f97\u9f20\u6807\u6ed1\u8fc7\u6548\u679c\uff0c\u5373\u9700\u8981\u5bf9 "a"\u4e3a\u6807\u7b7e\u7f16\u5199\u6837\u5f0f\u3002\u6837\u5f0f\u4e3a\uff1a ul li a { display:block; height:30px; text-decoration:none; color:#fff;} ul li a:hover { background:#999;}\u6700\u7ec8\u9884\u89c8\u6548\u679c\u3002\u5b8c\u6574\u4ee3\u7801\uff1a
\u65e0\u6807\u9898\u6587\u6863 ul,li { list-style:none; list-style-type:none; padding:0; margin:0;} /*\u6e05\u9664ul,li\u7684\u9ed8\u8ba4\u6837\u5f0f*/ ul li { float:left;width:100px; height:30px; background:#900; line-height:30px; text-align:center; margin-right:2px; } ul li a { display:block; height:30px; text-decoration:none; color:#fff;} ul li a:hover { background:#999;} \u5bfc\u822a\u4e00 \u5bfc\u822a\u4e8c \u5bfc\u822a\u4e09 \u5bfc\u822a\u56db \u5bfc\u822a\u4e94
\u9996\u5148\u5efa\u7acb\u4e00\u4e2aDIV\uff0c\u4e3a\u5176\u547d\u540d\u4e3a\u201cnav\u201d\uff0c\u5728DIV\u4e2d\u5efa\u7acb\u4e00\u4e2a\u65e0\u5e8f\u5217\u8868\uff0c\u5bfc\u822a\u5171\u6709\u51e0\u4e2a\u680f\u76ee\uff0c\u5c31\u4e3a\u5217\u8868\u6dfb\u52a0\u51e0\u4e2a\u7684\u5217\u8868\u9879\uff0c\u4e3a\u6bcf\u4e2a\u5217\u8868\u9879\u4e2d\u7684\u5185\u5bb9\u52a0\u4e0a\u8d85\u94fe\u63a5\uff0c\u94fe\u63a5\u5230\u6240\u9700\u7684\u9879\u76ee\u9875\u9762\u3002
\u7136\u540e\u8bbe\u7f6eCSS\u6837\u5f0f\uff0c\u4e3a\u5217\u8868\u89c4\u5b9a\u5bbd\u5ea6\u548c\u9ad8\u5ea6\uff0c\u53bb\u6389\u5217\u8868\u524d\u9762\u7684\u7b26\u53f7\uff0c\u4ee3\u7801\u4e3a\uff1a
ul {width:\u5bbd\u5ea6\u503c\uff1bheight\uff1a\u9ad8\u5ea6\u503c\uff1b list-style:none\uff1b}
\u5982\u679c\u662f\u6a2a\u5411\u5bfc\u822a\uff0c\u8fd8\u9700\u4e3a\u91cc\u9762\u7684\u5217\u8868\u9879\u6807\u7b7e\u8bbe\u7f6e\u5de6\u6d6e\u52a8\u7684\u6837\u5f0f\uff0c\u4ee3\u7801\u4e3a\uff1ali {float:left;}
\u6bcf\u4e2a\u680f\u76ee\u4e4b\u95f4\u5206\u9694\u7684\u8ddd\u79bb\u53ef\u901a\u8fc7margin\uff08\u5916\u8fb9\u8ddd\uff09\u5c5e\u6027\u6765\u8bbe\u7f6e\u3002
\u5bfc\u822a\u6761\u7684\u66f4\u591a\u6837\u5f0f\u53ca\u8be6\u7ec6\u6b65\u9aa4\u53ef\u53bb\u8fd9\u91cc\u53c2\u8003http://jingyan.baidu.com/article/da1091fb05fe93027849d600.html
二、用无序列表（ul）中的列（li）放导航的内容。
三、把li的浮动（float）设置为向左浮动（float：left；），这样，就实现了水平导航条了。
四、在做其他的一些修饰。（下面我给我弄的一个简单的导航条给你理解）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#menu{
width:500px;
margin:0 auto; /*令盒子居中*/
font-size:20px; /*定义字体的大小*/
}
ul{
margin:0; padding:0; /*把浏览器默认的间隔去掉*/
list-style:none; /*把前面的序列号去掉*/
}
li{
float:left; /*向左浮动，这个是实现水平的重要步骤！！*/
padding:0 15px; /*li里面的字体和边框的距离*/
}
a{
text-decoration:none; /*去掉超链接的下划线*/
color:#333; /*超链接的字体颜色*/
}
a:hover{
color:#696;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
.nav{ width:800px; height:30px; line-height:30px; background:#FC9; margin:0 auto; text-align:center;}
.nav a{ display:block; width:100px; float:left; color:#000; text-decoration:none;}
.nav a:hover{ color:red; text-decoration:underline; background:#369; }
</style>
</head>
<body>
<div class="nav">
<a href="#">体育</a><a href="#">科学</a><a href="#">教育</a><a href="#">娱乐</a><a href="#">体育</a><a href="#">科学</a><a href="#">教育</a><a href="#">娱乐</a>
</div>
</body>
</html>
这里有几个例子，先看看
http://www.lanrentuku.com/js/nav.html
<style
type="text/css">
.nav{
color:#FFFFFF;font-size:15px;background:url(sma/nav_bg.png)
repeat-x;width:1005px;
height:46px;}
.nav
ul{}
.nav
li{
margin-left:5px;float:left;
width:100px;
white-space:nowrap;list-style:none;
text-align:center;
line-height:46px; }
</style>
</head>
<body>
<div
class="nav">
<ul>
<li>网站首页</li>
<li>公司简介</li>
<li>产品展示</li>
<li>新闻资讯</li>
<li>招聘英才</li>
<li>产品案例</li>
<li>销售网络</li>
<li>在线订单</li>
<li>联系我们</li>
</ul>
</div>
</body>
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/>
<title>无标题文档</title>
<style
type="text/css">
*{
margin:0;
padding:0;}
.nav{
width:800px;
height:30px;
line-height
:30px;
background:#FC9;
margin:0
auto;
text-align
:center;}
.nav
a{
display:block;
width:100px;
float:left;
color:#000;
text-decoration
:none;}
.nav
a:hover{
color:red;
text-decoration:
underline
;
background:#369;
}
</style>
</head>
<body>
<div
class="nav">
<a
href="#">体育</a><a
href="#">科学</a><a
href="#">教育</a><a
href="#">娱乐</a><a
href="#">体育</a><a
href="#">科学</a><a
href="#">教育</a><a
href="#">娱乐</a>
</div>
</body>
</html>
绛旓細1銆侀鍏堟墦寮Sublime Text杞欢锛屾柊寤轰竴涓猦tml椤甸潰锛屽苟涓斿湪html椤甸潰涓噯澶囧ソhtml缁撴瀯锛屽涓嬪浘鎵绀 2銆佹帴涓嬫潵鎴戜滑鍦╤tml鐨刡ody缁撴瀯閲屾坊鍔犲鑸潯鐨勫唴瀹癸紝濡備笅鍥炬墍绀 3銆佺劧鍚庡氨闇瑕佸湪style鏍囩涓敤CSS瀵瀵艰埅鏉＄殑鏍峰紡杩涜瀹氫箟浜嗭紝濡備笅鍥炬墍绀猴紝涔﹀啓鏍峰紡鐨勬椂鍊欎竴瀹氳娉ㄦ剰鍐欏湪style鏍囩閲岄潰 4銆佹渶鍚庤繍琛宧tml椤甸潰锛...
绛旓細鍦╰itle>鏍囩鍚庢柊寤轰竴涓猻tyletype="text/css">/style>鏍囩銆5銆佸垱寤烘í鍚瀵艰埅鐨勬牱寮 鍦╯tyle>鏍囩閲屾坊鍔犱竴涓牱寮忕被涓猴細.navli{}锛岀劧鍚庡啀.navli绫讳腑璁剧疆鏍峰紡鑳屾櫙棰滆壊涓虹孩鑹诧紝娴姩涓哄乏娴姩锛屽唴杈规涓婁笅涓8px宸﹀彸涓15px锛屽垪琛ㄥ睘鎬т负none锛屽瓧浣撻鑹蹭负鐧借壊銆傛牱寮忎唬鐮佷负锛歯avli{background-color:red;paddin...
绛旓細棣栧厛鎵撳紑SublimeText杞欢锛屾柊寤轰竴涓猦tml椤甸潰锛屽湪html椤甸潰涓噯澶囧ソhtml缁撴瀯锛屽涓嬪浘鎵绀恒傛帴涓嬫潵锛屾垜浠湪html鐨刡ody缁撴瀯涓坊鍔瀵艰埅鏍忕殑鍐呭锛屽涓嬪浘鎵绀恒傜劧鍚庨渶瑕佸湪style鏍囩涓敤CSS瀹氫箟瀵艰埅鏉＄殑鏍峰紡锛屽涓嬪浘鎵绀恒傚啓鏍峰紡鐨勬椂鍊欎竴瀹氳娉ㄦ剰鍐欏湪鏍峰紡鏍囩閲屻傛渶鍚庯紝杩愯html椤甸潰锛屾偍灏嗙湅鍒板涓嬪浘鎵绀虹殑瀵艰埅鏍忋
绛旓細涓銆佸畾涔変竴涓洅瀛愶紙鈥渕enu鈥濓級,鐢ㄦ潵瑁呰繖涓鑸殑銆備簩銆佺敤鏃犲簭鍒楄〃锛坲l锛変腑鐨勫垪锛坙i锛夋斁瀵艰埅鐨勫唴瀹广備笁銆佹妸li鐨勬诞鍔紙float锛夎缃负鍚戝乏娴姩锛坒loat锛歭eft锛涳級锛岃繖鏍凤紝灏卞疄鐜颁簡姘村钩瀵艰埅鏉浜嗐傚洓銆佸湪鍋鍏朵粬鐨勪竴浜涗慨楗般傦紙涓嬮潰鎴戠粰鎴戝紕鐨勪竴涓畝鍗曠殑瀵艰埅鏉＄粰浣犵悊瑙ｏ級<!DOCTYPE html PUBLIC "-//W3C...
绛旓細绠鍗曠殑璇达紝姣涚幓鐠冨叾瀹炲氨鏄鍥剧墖鎴栬呰儗鏅娇鐢ㄧ浉搴旂殑鏂规硶杩涜妯＄硦澶勭悊銆傝繖绉嶆晥鏋滃鐢ㄦ埛鏉ヨ鏄崄鍒嗗叿鏈夎瑙夊啿鍑诲姏鐨勩4.CSS3+Js瀹炵幇鍝嶅簲寮忓鑸潯 浠婂ぉ鍒朵綔浜嗕竴涓搷搴斿紡瀵艰埅鏉★紝鑳藉鑷姩闅忕潃涓嶅悓鐨勫睆骞曞垎杈ㄧ巼鎴栨祻瑙堝櫒绐楀彛澶у皬鐨勪笉鍚岃屾敼鍙瀵艰埅鏉＄殑鏍峰紡锛岃繖閲屼富瑕佺敤鍒扮殑灏辨槸CSS3鐨凪edia Query銆傚叿浣撳彲浠ユ煡鐪...
绛旓細1銆佹柊寤轰竴涓猦tml椤甸潰銆2銆佸湪html椤甸潰涓婃柊寤轰笁涓猟iv鏍囩锛屽垎鍒负杩欎笁涓猟iv娣诲姞class涓:header銆乵ain銆乫ooter銆3銆佸垱寤簊tyle鏍囩鐢ㄤ簬璁剧疆css鏍峰紡銆傚湪title鏍囩涓嬪垱寤轰竴涓猻tyle鏍囩锛岀劧鍚庝负header绫昏缃甦iv鐨勯珮銆佽儗鏅鑹叉牱寮忋4銆佷负鏄剧ず涓昏鍐呭鐨刴ain绫昏缃牱寮忋傚湪style鏍囩閲岃缃甿ain绫绘牱寮忕殑杈规銆佸銆侀珮...
绛旓細绗竴姝ワ紝鎵撳紑杞欢Adobe Dreamweave CS6锛屽垱寤轰竴涓柊鐨凥TML銆傜浜屾锛屽湪宸ヤ綔鍖哄煙锛坆ody锛夌敤鏍囩 ul 鍜 li 杈撳叆瀵艰埅鐨鍐呭銆傜涓夛紝缂栬緫鏍峰紡CSS銆傚湪鏍囩涔嬮棿鍐欏叆鏍峰紡琛ㄣ傦紝绗洓锛岀揣鎺ヤ笂涓姝ャ傜敱浜庢棤绾垮簭鍒楀叿鏈夐粯璁ゆ牱寮忥紝鍓嶉潰鐨勫渾鐐癸紙锛夛紝鎵浠ュ厛鍐欏幓闄ら粯璁鏍峰紡鐨勬牱寮銆傛牱寮忎负锛歶l,li { list-style:none...
绛旓細濡傚浘锛鍒朵綔瀵艰埅鏉鑿滃崟涓鑸槸鐢ㄤ竴涓猟iv宓屽ul鍜宭i鏍囩锛岀劧鍚巐i閲岄潰鏈塧鏍囩銆傚竷灞鍋氬ソ涔嬪悗锛屽紑濮嬪啓瀵艰埅鏉＄殑鏍峰紡锛屽鍥撅紝鍏堟竻闄ゅ鑸潯鐨刴argin鍜宲adding銆傜劧鍚庡畾浣嶅鑸潯鐨刣iv锛岃繖閲屾垜灏辩敤缁濆瀹氫綅鏉ュ眳涓紝濡傛灉浣犳湁鍏朵粬瀵艰埅鏉″眳涓柟娉曞彲浠ュ拷鐣ヨ繖涓鏉°傜劧鍚庤缃鑸潯鐨刲i宸︽诞鍔紝骞朵笖鍘绘帀li鍓嶉潰鐨勫渾鐐癸紝璁╁鑸...
绛旓細鍒涘缓鏍峰紡鏍囩 鍦╰itle鏍囩鍚庢柊寤轰竴涓猻tyle type="text/css"/style鏍囩銆傚垱寤烘í鍚瀵艰埅鐨勬牱寮 鍦╯tyle鏍囩閲屾坊鍔犱竴涓牱寮忕被涓猴細.nav li{}锛岀劧鍚庡啀.nav li绫讳腑璁剧疆鏍峰紡鑳屾櫙棰滆壊涓虹孩鑹诧紝娴姩涓哄乏娴姩锛屽唴杈规涓婁笅涓8px宸﹀彸涓15px锛屽垪琛ㄥ睘鎬т负none锛屽瓧浣撻鑹蹭负鐧借壊銆 鏍峰紡浠ｇ爜涓猴細 .nav li{...
绛旓細1銆佸皢瀵艰埅鏍閲岄潰鐨勫嚑涓潯鐩兘鍋氭垚鏃犲簭鍒楄〃閲岄潰鐨勯」 2銆佸埄鐢╟ss灏嗗垪琛ㄩ」鐨刲ist-style,float绛夌瓑灞炴ц缃紝浣垮垪琛ㄩ」妯帓鎺掑垪銆3銆佽缃摼鎺ョ殑灞炴у氨鍙互浜嗐備竴鑸兘鏄繖鏍鍋氱殑锛屽埄鐢ㄥ浘鐗囨垨鑰協lash鐨勮瘽锛岀綉椤典細鍙樺ぇ涓鐐癸紝瀵逛簬缃戦熸參鐨勪汉鏉ヨ锛屼笉鏂逛究璁块棶銆傛墍浠ュ湪鑳藉埄鐢css鐨鍦版柟灏卞敖閲忛伩鍏嶇敤鍥剧墖鎴栬協alsh ...
