怎么用列表和浮动，创建网页的横向导航条 css html制作网页，用ul和li制作横向导航栏
\u5982\u4f55\u5e94\u7528ul\u3001li\u6807\u7b7e\u521b\u5efacss\u6a2a\u5411\u5bfc\u822a\u83dc\u5355\uff1fxhtml\u4ee3\u7801\u9996\u5148\u5b9a\u4e49\u4e86\u4e00\u4e2a\u5bb9\u5668div id="nav"\u3002\u8fd9\u4e2a\u5bb9\u5668\u7528\u6765\u653e\u7f6e\u8fd9\u4e2a\u65e0\u5e8f\u5217\u8868\u6a2a\u5411\u5bfc\u822a\u83dc\u5355\u7684\u5185\u5bb9\uff0c\u4f46\u4e5f\u6709\u4eba\u8ba4\u4e3a\u8fd9\u4e2a\u5bb9\u5668\u662f\u591a\u4f59\u7684\uff0c\u76f4\u63a5\u5b9a\u4e49ul id="nav"\u5c31\u53ef\u4ee5\u4e86\u3002\u6211\u4eec\u4e0d\u5efa\u8bae\u4f60\u8fd9\u6837\u505a\uff0c\u8981\u77e5\u9053\u6211\u4eec\u7684\u7ad9\u70b9\u662f\u53ef\u6269\u5c55\u7684\uff0c\u6211\u4eec\u8981\u4e3a\u5c06\u6765\u7684\u6269\u5c55\u7559\u6709\u8db3\u591f\u7684\u4f59\u5730\uff0c\u5047\u5982\u6211\u4eec\u7684\u5bfc\u822a\u6837\u5f0f\u8bbe\u8ba1\u7684\u66f4\u52a0\u590d\u6742\uff0c\u4ec5\u6709\u7684ul\u662f\u4e0d\u80fd\u6ee1\u8db3\u9700\u8981\u7684\u3002\u6211\u4eec\u5b9a\u4e49\u8fd9\u6837\u7684\u5bb9\u5668\u4e5f\u66f4\u7b26\u5408\u6211\u4eec\u7f16\u5199\u4ee3\u7801\u7684\u4e60\u60ef\u3002#nav\u5b9a\u4e49\u4e86\u7a97\u53e3\u7684\u5bbd\u9ad8\u53ca\u80cc\u666f\u989c\u8272\u3002#nav ul\u5305\u542b\u6709margin\u548cpadding\u58f0\u660e\uff0c\u5b57\u4f53\u53ca\u989c\u8272\u58f0\u660e\u3002line-height: 30px;\u662f\u975e\u5e38\u91cd\u8981\u7684\u5b9a\u4e49\uff0c\u5047\u5982\u53d6\u6d88\u6389\u884c\u9ad8\u7684\u5b9a\u4e49\uff0c\u6211\u4eec\u7684\u94fe\u63a5\u6587\u5b57\u5782\u76f4\u5c45\u4e2d\u5c31\u53ef\u80fd\u53d7\u5230\u5f71\u54cd\u3002white-space: nowrap;\u6216\u8bb8\u5927\u5bb6\u5e76\u4e0d\u80fd\u7406\u89e3\u6709\u4ec0\u4e48\u4f5c\u7528\uff0c\u5b83\u5b9a\u4e49\u4e86\u5f3a\u5236\u5728\u540c\u4e00\u884c\u5185\u663e\u793a\u6240\u6709\u6587\u672c\uff0c\u76f4\u5230\u6587\u672c\u7ed3\u675f\u6216\u8005\u906d\u9047br\u5bf9\u8c61\u3002 #nav li\u4e2d\u7684list-style-type: none;\u53bb\u9664\u4e86\u5217\u8868\u9879\u6240\u4f7f\u7528\u7684\u9884\u8bbe\u6807\u8bb0\u3002\u4f7f\u5176\u66f4\u8c61\u662f\u7eaf\u6587\u672c\uff0c\u800c\u6ca1\u6709\u5217\u8868\u6807\u8bb0\u3002display: inline;\u58f0\u660e\u5219\u80fd\u591f\u8ba9\u5217\u8868\u9879\u76ee\u5728\u9875\u9762\u4e0a\u4ece\u5de6\u5411\u53f3\u6d6e\u52a8\uff0c\u800c\u4e0d\u4f1a\u8ba9\u6bcf\u4e2a\u9879\u76ee\u663e\u793a\u5728\u5355\u72ec\u7684\u884c\u91cc\u800c\u4ece\u4e0a\u81f3\u4e0b\u7684\u6392\u5217\u3002\u8fd9\u4e24\u9879\u58f0\u660e\u662f\u6211\u4eec\u5b9e\u73b0\u65e0\u5e8f\u5217\u8868\u6a2a\u5411\u5bfc\u822a\u83dc\u5355\u7684\u8981\u5bb3\u3002#nav li a\u548c#nav li a:hover\u5b9a\u4e49\u4e86\u94fe\u63a5\u7684\u6837\u5f0f\u3002\u5176\u4e2d\u7684\u5185\u5bb9\u5c31\u4e0d\u4f5c\u6df1\u5165\u4e86\uff0c\u552f\u4e00\u8981\u8bb2\u7684\u5c31\u662f\uff1apadding: 7px 10px;\u5b83\u662f\u7528\u6765\u63a7\u5236\u94fe\u63a5\u6587\u5b57\u4e4b\u95f4\u7684\u7a7a\u767d\u95f4\u9694\u7684\uff0c\u4f60\u53ef\u4ee5\u8bd5\u7740\u6539\u53d8\u6570\u503c\u8bd5\u8bd5\u770b\u3002
\u5c06ul\u91cc\u9762\u7684li\u6807\u7b7e\u90fd\u8bbe\u7f6e\u4e3a\u53f3\u6d6e\u52a8\u5373\u53ef\u3002\u5982\uff1a
\u9879\u76ee1 \u9879\u76ee1 \u9879\u76ee1 \u9879\u76ee1
1、用Dreamweaver新建一个HTML文件。
2、修改title为html+css实现横向导航。
3、新建一个div id为“a”，添加ul li标签。
4、在li中添加自己想要的文字 并调整好文字间距,按F12预览。
5、首先去掉字体前面的小黑点。
6、接下来，使文字横向排列，设置代码如下，给li设置左浮动效果。
7、按F12预览，效果如下。
第一步、编写横向菜单的HTML代码架构
请将以下代码添加到HTML文档的导航栏区域中。
<ul id="menu">
<li><a href="http://www.baidu.com">Baidu.Com</a></li>
<li><a href="http://www.Code52.Net">Code52.Net</a></li>
<li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
<li><a href="http://www.google.com"
第二步、编写CSS代码
1、设置公共样式
将以下CSS代码添加到HTML文档的<head>...</head>标签范围中。
<style type="text/css">
#menu {
font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
}
#menu, #menu li {
list-style:none; /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
}
</style>
<ul>中的各条目<li>默认都是纵向排列的，需要定义CSS来让其横向排列起来。
Tips：因为现在将导航栏拉出来独立讲解，所以需要设置一些公共样式，如果在 body 或其他地方已经重设了默认效果，以上代码可以去掉
2、让文字横排
<ul>标签下的项目<li>默认是纵向排列的，需要定义额外的CSS属性让其横向排列。
<style type="text/css">
#menu li {
float:left; /* 往左浮动 */
}
</style>
3、设置链接样式：
<style type="text/css">
#menu li a {
display:block; /* 将链接设为块级元素 */
padding:8px 50px; /* 设置内边距 */
background:#3A4953; /* 设置背景色 */
color:#fff; /* 设置文字颜色 */
text-decoration:none; /* 去掉下划线 */
border-right:1px solid #000; /* 在左侧加上分隔线 */
}
</style>
用内边距（即填充padding）的方式，让每个菜单变得宽一些，如果菜单是中英文混排的，建议设置单个菜单的高宽，这样可以避免中英文字符行高不一致导致的高度误差。设置固定高度的方式：
<style type="text/css">
#menu li a {
display:block; /* 将链接设为块级元素 */
width:150px; /* 设置宽度 */
height:30px; /* 设置高度 */
line-height:30px; /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */
text-align:center; /* 居中对齐文字 */
background:#3A4953; /* 设置背景色 */
color:#fff; /* 设置文字颜色 */
text-decoration:none; /* 去掉下划线 */
border-right:1px solid #000; /* 在左侧加上分隔线 */
}
</style>
4、链接悬停效果：
通过以上几步的综合作用，一个横向导航栏的初步框架就出现了。此步主要是定义链接的悬停效果，让导航栏更美观。当然，如果要让导航栏更炫丽，可以在CSS悬停属性上定义背景图片。
<style type="text/css">
#menu li a:hover {
background:#146C9C; /* 变换背景色 */
color:#fff; /* 变换文字颜色 */
}
</style>
这里的代码一个缺陷，最右边会多出来一个边框，由于 :first-child 伪类不被IE系列浏览器所支持，我们只能单独写一个样式，将最后一个边框去掉，同时要给 HTML 代码增加一个额外选择符。
<ul id="menu">
<li><a href="http://www.baidu.com">Baidu.Com</a></li>
<li><a href="http://www.Code52.Net">Code52.Net</a></li>
<li><a href="http://www.yahoo.com">Yahoo.com</a></li>
<li><a href="http://www.google.com" type="text/css">
#menu li a.last {
border-right:0; /* 去掉左侧边框 */
}
</style>
好了，到这里一个简单的横向导航菜单就制作完成了
<!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=gb2312" />
<style type="text/css">
body{
background-color:white;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
color:white;
}
ul,li{
margin:0px;
padding:0px;
}
li{
display:inline;
list-style:none;
list-style-position:outside;
text-align:center;
font-weight:bold;
float:left;
}
a:link{
color:#336601;
text-decoration:none;
float:left;
width:100px;
padding:3px 5px 0px 5px;
}
a:visited{
color:#336601;
text-decoration:none;
float:left;
padding:3px 5px 0px 5px;
width:100px;
}
a:hover{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#539D26;
}
a:active{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#539D26;
}
#nav{
width:600px;
height:30px;
border-bottom:0px;
padding:0px 5px;
position:absolute;
z-index:1;
left: 198px;
top: 25px;
}
.list{
line-height:20px;
text-align:left;
padding:4px;
font-weight:normal;
}
.menu1{
width:120px;
height:auto;
margin:6px 4px 0px 0px;
border:1px solid #9CDD75;
background-color:#F1FBEC;
color:#336601;
padding:6px 0px 0px 0px;
cursor:hand;
overflow-y:hidden;
filter:Alpha(opacity=70);
-moz-opacity:0.7;
}
.menu2{
width:120px;
height:18px;
margin:6px 4px 0px 0px;
background-color:#F5F5F5;
color:#999999;
border:1px solid #EEE8DD;
padding:6px 0px 0px 0px;
overflow-y:hidden;
cursor:hand;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">站酷首页
<div class="list">
<a href="#">我的Png</a><br />
<a href="#">我的Gif</a><br />
<a href="#">我的酷站</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子
<div class="list">
<a href="#">我的CHINAY</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信
<div class="list">
<a href="#">我的CHINAY</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理
<div class="list">
<a href="#">我的CHINAY</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
</ul>
</div>
</body>
</html>
要点是利用好css的float; 设置好列表各子元素的宽度
例:ul li{width:50px;float:left;}<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
</ul>
绛旓細鐢ㄦ牱寮忔帶鍒朵竴涓嬪氨鍙互浜嗭紝姣斿璁﹍i宸娴姩
绛旓細鍙互鍦ㄢ滀緥澶栨儏鍐碘濅腑娣诲姞鍏佽鐨缃戠珯鍒楄〃锛杩樺彲浠ュ湪鈥滅瓫閫夌骇鍒濅腑閫夋嫨鈥滈珮鈥濄佲滀腑鈥濄佲滀綆鈥濅笁涓瓫閫夌骇鍒傚脊鍑虹獥鍙ｉ樆姝㈢▼搴忚缃幇鍦ㄦ偍鍐嶄篃涓嶇敤琚脊鍑哄箍鍛婇獨鎵颁簡!PS锛氫絾鏄姝㈣剼鏈悗锛屽脊鍑虹獥鍙涓庢诞鍔骞垮憡鏄病浜嗭紝鑰屽叾瀹冪敱鑴氭湰瀹炵幇鐨勫姛鑳藉拰鏁堟灉涔熻涓嶅埌浜嗐傝繖鏄剧劧涓嶆槸鎴戜滑闇瑕佺殑锛岃繖灏辫璇风涓夋柟杞欢...
绛旓細鍗充娇娴忚鍣ㄨ兘瑙ｆ瀽锛夛紝dt搴旇鍜宒l锛宒d涓璧风敤锛屼负鏃犲簭鍒楄〃锛濡傦細 鍙皢dt鎹㈡垚span鎴栬呭叾浠栬鍐呭厓绱犮傚涓嬶細 鏈鏂板姩鎬佽繘鍏
绛旓細2銆鍒楄〃榛樿鐨勬樉绀轰负绾靛悜 瑕妯悜鏈2鍔炴硶锛氾紙1锛塪isplay:inline;(2) float:left; 瀵硅薄鍚戝乏娴姩 涔熷氨鏄墍鏈夌殑閮戒竴涓尐鐫涓涓殑鍚戝乏闈犻綈 鍏跺疄block浣犲彲浠ヨ繖鏍风悊瑙 璁╁叾瀹藉害鎴栬呭搷搴斿尯涓烘暣涓埗鏍囩鐨100 姣斿浣犳妸11111鏀惧湪涓涓猟iv閲 涓嶅仛CSS瀹氫箟鐨勮瘽 鍙湁11111閭ｅ嚑涓瓧鎵嶈兘鍝嶅簲榧犳爣 濡傛灉浣...
绛旓細UR鏄粈涔堬紵鏄惂锛娴姩li锛岃缃搴﹀拰楂樺害鍗冲彲
绛旓細鎿嶄綔鍥炬枃娣锋帓:鍦ㄩ渶瑕佺殑浣嶇疆鍔犲叆涓涓彧鏈変竴涓崟鍏冩牸鐨勮〃鏍硷紝骞惰缃ソ鍏朵粬灞炴с傚湪琛ㄦ牸涓坊鍔犲浘鐗囷紝骞惰缃ソ琛ㄦ牸鐨勫ぇ鏍″啀璁剧疆琛ㄦ牸涓衡滃乏娴姩鈥濓紝璋冩暣鏂囧瓧锛岃鏂囧瓧鍦ㄨ〃鏍肩殑鍙宠竟銆傝繖鏍凤紝鍥炬枃鐩搁厤鐨勬贩鎺掑氨寰楀埌浜嗐傝繘涓姝ュ涔犵殑寤鸿:琛ㄦ牸鐨勬搷浣滄瘮杈冨鏉傦紝闇瑕佸弽澶嶇殑缁冧範锛屽涔濡備綍鐢琛ㄦ牸鏋勯犵壒娈椤甸潰锛濡備綍瀹炵幇澶嶆潅...
绛旓細css鎬庝箞鐢ㄦ诞鍔鎶婄珫鐫鏂囧瓧鍙樻垚妯潃锛熸湁涓ょ鏂规硶鍙互灏嗙旱鍚戝垪琛ㄨ浆鍙樻垚妯悜鍒楄〃銆備娇鐢ㄥ唴鑱(inline)鎴栨诞鍔(float)鐨勫垪琛ㄩ」銆傝繖涓ょ鏂规硶閮藉緢濂斤紝浣嗗鏋滀綘鎯抽摼鎺ュ埌鍏锋湁鐩稿悓鐨勫ぇ灏忥紝浣犲繀椤浣跨敤娴姩鐨鏂规硶銆傚唴鑱斿垪琛ㄩ」 寤虹珛涓涓í鍚戝鑸爮鐨勬柟娉曚箣涓鏄寚瀹氬厓绱狅紝瀹炰緥 1 2 3 li{ display:inline;} display:inline;...
绛旓細濡傦細鏃犲簭閾炬帴鏇夸唬鏃犲簭鍒楄〃銆傚綋鍙互浣跨敤a鏍囩杩涜鎺掑垪鏃讹紝灏变笉瑕佷娇鐢ㄦ棤搴忓垪琛ㄣ侫鏍囩鏄鍏冪礌锛屼粬浼氳嚜鍔鐨勬í鍚鎺掑垪銆侺i涓哄潡绾у厓绱狅紝瑕佹兂妯悜鏄剧ず锛屽繀椤婚厤鍚坒loat銆備篃鍙互璁惧畾li鏍囩display锛歩nline锛屽皢鍧楃骇鍙樹负琛岀骇杈惧埌椤甸潰鎵瑕佺殑鏁堟灉銆傝繖鏍蜂細浣夸唬鐮佹洿绠娲併7銆佷笉婊ョ敤Web瀛椾綋銆傚湪Web缂栫爜涓紝CSS榛樿搴旂敤...
绛旓細杩欐槸鎴戝啓鐨勪竴涓鑸紝浣犺嚜宸辩湅鍚с俵i骞跺垪搴旇瀹氫箟鍏秄loat灞炴т负left銆<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> menu </TITLE> </HEAD> body{ padding-top:200px;text-align:center;font-size:13px;} content{ margin:0 auto;text-align...
绛旓細5.涓嶈鏀惧埆浜虹殑鎼滅储寮曟搸銆佽〃鍗曘佽鏁板櫒绛夈傚湪浣犺嚜宸辩殑缃戦〉閲屻傝繖鏍峰仛浼氬共鎵板畠鐨勬甯歌繍琛岋紝澧炲姞鏈嶅姟鍣ㄧ殑璐熻浇锛岄櫎闈炰富浜鸿〃绀哄彲浠ヨ繛鎺ュ埌浠栫殑cgi-bin鎴栬匤avaClass銆傛兂鍒涘缓涓涓缃戠珯锛涓婁紶鑷繁鐨勫浘鐗囧拰瑙嗛锛屾湁浜虹煡閬鎬庝箞鍋氬悧锛熻姳閽变拱绌洪棿涔板煙鍚嶏紝鎵句釜缃戦〉妯℃澘涓婁紶锛堟垨鑰呰姳閽辨壘浜虹粰浣犺璁★級锛岀綉椤涓婁紶涔嬪悗锛...
