请问怎么用div+css写出横式导航栏？新手求指教。 怎么用html+css做一个导航条
\u5982\u4f55\u7528DIV+CSS\u505a\u6f02\u4eae\u7684\u6a2a\u6392\u5bfc\u822a\u680f
\u4ee3\u7801\u5982\u4e0b\uff1a
Nav Demo *{ padding:0; margin:0; box-sizing:border-box;}.nav{ font-size: 0; text-align: center; background-color: #666;}.nav li{ padding: 14px 20px; display: inline-block; font-size: 14px; color: #fff;}.nav li:hover{ background-color: #999; cursor: pointer;}.nav li.on{ background-color: #fff; color: #333;} nav1 nav2 nav3 nav4 nav5 nav6
\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
<style>
.nav { padding: 35px 0px; background: url(http://img0.bdstatic.com/img/image/ps-logo.png) no-repeat left center; }
ul { list-style: none; width: 1024px; padding: 0px; margin: 0px auto; margin-top: 35px; overflow: hidden; }
ul li { float: left; width: 180px; height: 30px; line-height: 30px; margin: 0px 10px; border: solid 1px #c00; text-align: center; border-radius: 3px; font-size: 14px; -webkit-transition: background-color 1s ease; -moz-transition: background-color 1s ease; -o-transition: background-color 1s ease; transition: background-color 1s ease; }
ul li:hover { background-color: #c00; color: #fff; }
</style>
<div class="nav">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
</ul>
</div>
<style>
.logo{float:left;}
.nav{float:right;}
.nav li{float:left;}
</style>
<div class="head">
<div class="logo"></div>
<div class="nav">
<ul>
<li><a href="#">栏目导航</a></li>
<li><a href="#">栏目导航</a></li>
<li><a href="#">栏目导航</a></li>
<li><a href="#">栏目导航</a></li>
</ul>
</div>
</div>
绛旓細鍚屾椂鍦CSS涓娇鐢╢loat:left鎺у埗鏉庡悜宸︽诞鍔ㄥ疄鐜版按骞宠彍鍗曘傝娉ㄦ剰锛孶L鎴朥L鐨勭埗瀹瑰櫒鐨勫搴﹀繀椤诲ぇ浜庢墍鏈塴i瀹藉害鐨勬诲拰銆備緥濡 html鎬庝箞鎶婁竴琛屽浘鐗囧彉涓よ妯悜鎺掑垪锛熺粰鍥剧墖鐨刾娣诲姞涓婃诞鍔ㄦ爣绛 float:left锛沨tml缃戦〉瀵艰埅鏉＄殑璁剧疆锛1銆佸鑸潯鐨勮缃晥鏋 2銆侀氳繃鍒楄〃鍒朵綔ul>/ul> 3銆佸鑸潯鐨DIV鏍峰紡璁剧疆 4銆...
绛旓細缁欒娣诲姞鑳屾櫙鐨div娣诲姞background鏍峰紡 div { background:url(../images/pic1.jpg) no-repeat 10px 20px; } 鍏朵腑10px鏄í鍧愭爣璺濈锛20px绾靛潗鏍囪窛绂汇
绛旓細鍒嗕笁娈div灏卞ソ浜嗭紝绗竴娈靛拰绗笁娈电粰涓猰argin-top鍜宐order-top灞炴э紝涓棿閭ｆ鐢ㄦ潵杈撳叆鏂囧瓧銆傚笇鏈涜兘甯埌浣犮
绛旓細鏍囩鏄粯璁ゆ崲琛岀殑锛屼綘鍙互閫夋嫨鐢ㄨ〃鏍煎疄鐜帮紝涔熷彲浠ラ夋嫨鐢↗S灏嗗鏁板垪姝ｅ父鏄剧ず锛屽伓鏁板垪鐨勬诞鍔ㄥ埌鍙充晶璇曡瘯銆
绛旓細浣犺繖浠ｇ爜锛屾湰韬氨闂锛岋紝<div style="overflow:auto;width:100%">鏄粈涔堟儏鍐典笅鍑虹幇婊氬姩鏉″憿锛熷氨鏄湪杩欎釜div閲岀殑鍏冪礌瀹藉害瓒呭嚭浜100%鍚庢墠浼氬嚭鐜 閭ｄ綘鐨勫厓绱犲張鐢ㄤ簡float:left锛屽乏娴姩锛屽彸娴姩鏄粈涔堬紝锛屽氨鏄墍鏈夌敤浜嗙殑鍏冪礌锛屽悜宸︽诞鍔ㄩ潬鎷紝瀹冭櫧鐒舵槸鍦ㄤ竴琛岋紝浣嗘槸鍙槸鐪嬭捣鏉ュ湪涓琛岃屽凡锛屽叾瀹炲洜涓虹敤浜...
绛旓細鐢css璁剧疆濂芥í鍚戝洓绛夊垎涓殑涓涓洅瀛愮殑澶у皬楂樺害锛岀劧鍚庢妸璁剧疆濂界殑鐩掑瓙锛屽鍒跺洓鍒嗭紝鏀惧埌浣犵殑閭ｄ釜绌洪棿灏卞ソ浜嗐<div class=1> <div class=2></div> <div class=2></div> <div class=2></div> <div class=2></div> </div> css锛.1{height: ; weight:...杩欎釜鏍规嵁闇瑕佽嚜宸辫缃畗 .2{杩欎釜...
绛旓細娌＄湅鍒版湁鍥,涓鑸笅杈规鏄:style="border-top:1px dashed #ccc" dashed 鏄櫄绾 style="border-top:1px solid #000000" solid 鏄疄绾 杩欐槸鍩烘湰鐨CSS浣犱笉鐭ラ亾,鐪嬫潵浣犻渶瑕佺殑鏄竴涓狢SS鎵嬪唽,
绛旓細<div class="enter"> <div class="logo"> <span>鍒囨崲1</span> <span>鍒囨崲2</span> </div> <div class="content">鍒囨崲1鍐呭</div> <div class="content" style="display:none">鍒囨崲2鍐呭</div> </div> 鑷繁鍘诲姞鏍峰紡鍜屽垏鎹㈡晥鏋滐紝甯冨眬涓鑸氨杩欐牱 ...
绛旓細<!DOCTYPE html><html> <head> <title>MyHtml.html</title><style type="text/css">#main{width:500px;height: 300px;}#top{width:500px;height: 100px;background-color: red;}#content{width:500px;height: 100px;background-color: blue;}#bottom{width:500px;height: 100px;backgrou...
绛旓細<head> <style> ul { padding:0;margin:0;text-decoration:none;} li { float:left;display:inline;border:solid 1px Gray;padding:5px 0px;margin:0;} ul li a { padding:5px 10px;margin:0px;} ul li a:hover { background-color:#009900;} </style> </head> <body> <div > ...
