|
|
<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta content="all" name="robots" />
<meta name="author" content="ajie33(at)gmail.com" />
<meta name="Copyright" content="www.w3cn.org,自由版权,任意转载" />
<meta name="description" content="新网页设计师,web标准的教程站点,推动web标准在中国的应用." />
<meta content="web标准,web标准教程,网站重构, css布局, xhtml, css,xhtml+css,layout, usability, w3cn, CSS+DIV" name="keywords" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.w3cn.org/favicon.ico" type="image/x-icon" />
<title>如何用CSS制作横向菜单? w3cn.org</title>
<!-- 调用样式表 -->
<link rel="stylesheet" href="http://www.w3cn.org/style/001/001.css" type="text/css" media="all" />
<!-- 打印时候使用的样式表 -->
<link rel="stylesheet" type="text/css" media="print" href="http://www.w3cn.org/style/print.css" />
</head>
<body id="w3cn">
<!--页面顶部-->
<div id="top">
<div id="popimg">
<div id="logo"> <a title="link to home. AccessKey: a" accesskey="a" href="http://www.w3cn.org/"
rel="next">
<img height="79" alt="w3cn.org首页" src="http://www.w3cn.org/style/001/logo_w3cn_194x79.gif" width="194" border="0"
/></a>
</div>
<!-- 主菜单 -->
<div id="topmenu">
<ul>
<li id="one"><a title="首页accesskey: b" accesskey="b"
href="http://www.w3cn.org/index.html">首页</a></li>
<li id="two"><a title="新闻动态accesskey: c" accesskey="c"
href="http://www.w3cn.org/news/index.html">新闻动态</a></li>
<li id="three"><a title="规范标准accesskey: d" accesskey="d"
href="http://www.w3cn.org/webstandard/index.html">规范标准</a></li>
<li id="four"><a title="翻译文章accesskey: e" accesskey="e"
href="http://www.w3cn.org/article/index.html">文章教程</a></li>
<li id="five"><a title="相关资源accesskey: f" accesskey="f"
href="http://www.w3cn.org/resource/index.html">资源链接</a></li>
<li id="six"><a title="常见问题accesskey: g" accesskey="g"
href="http://www.w3cn.org/faq/index.html">常见问题</a></li>
<li id="seven"><a title="论坛交流accesskey: i" accesskey="i" href="http://www.blueidea.com/bbs/list.asp?GroupName=%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8" rel="external" target="new">论坛交流</a></li>
</ul>
</div>
</div>
</div>
<!--布局中间区域第一行-->
<div id="smiddle"><div id="scontent"><div id="ctitle">如何用CSS制作横向菜单?</div>
<div id="author">作者：阿捷 2005-4-11 16:54:52</div>
<style type="text/css">
.test2 ul{list-style:none;}
.test3 ul{list-style:none;}
.test4 ul{list-style:none;}
.test5 ul{list-style:none;width:300px;}
.test3 li{float:left;}
.test4 li{float:left;width:100px;}
.test5 li{float:left;width:100px;}
.test6 ul{list-style:none;}
.test6 li{float:left;width:100px;}
.test6 a:link{color:#666;background:#CCC;text-decoration:none;}
.test6 a:visited{color:#666;text-decoration:underline;}
.test6 a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:#F00;}
.test7 ul{list-style:none;}
.test7 li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
.test7 a{display:block;text-align:center;height:30px;}
.test7 a:link{color:#666;background:#CCC;text-decoration:none;}
.test7 a:visited{color:#666;text-decoration:underline;}
.test7 a:hover{color:#FFF; font-weight:bold;text-decoration:underline;background:#F00;}
.test8 ul{list-style:none;}
.test8 li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
.test8 a{display:block;text-align:center;height:30px;}
.test8 a:link{color:#666;background:url(images/arrow_off.gif) #CCC no-repeat 5px
12px;text-decoration:none;}
.test8 a:visited{color:#666;text-decoration:underline;}
.test8 a:hover{color:#FFF;
font-weight:bold;text-decoration:none;background:url(images/arrow_on.gif) #F00 no-repeat 5px
12px;}
</style>
<p>尽管在我的网站和文章里都有提到CSS制作菜单的方法，但很多初学者还是不太清楚如何实现，以及实现原
理，我想专门写一篇详细教程会对大家比较有帮助。</p>
<p>我们先来看一个菜单的例子，最终效果是:</p>
<div class="test8">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>
<div style="clear:both;"></div>
<p>然后我们来详细讲解步骤</p>
<h4>第一步：建立一个无序列表</h4>
<p>我们先建立一个无序列表，来建立菜单的结构。代码是：</p>
<span class="code">
<ul><br />
<li><a href="1">首页</a></li><br />
<li><a href="2">产品介绍</a></li><br />
<li><a href="3">服务介绍</a></li><br />
<li><a href="4">技术支持</a></li><br />
<li><a href="5">立刻购买</a></li><br />
<li><a href="6">联系我们</a></li><br />
</ul>
</span>
<p>效果是：</p>
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
<h4>第二步：隐藏li的默认样式</h4>
<p>因为看起来不是很好看，菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点。</p>
<p>当然，为了更好的控制整个菜单，我们把菜单放在一个div里。页面代码变成：</p>
<span class="code">
<div class="test">
<ul><br />
<li><a href="1">首页</a></li><br />
<li><a href="2">产品介绍</a></li><br />
<li><a href="3">服务介绍</a></li><br />
<li><a href="4">技术支持</a></li><br />
<li><a href="5">立刻购买</a></li><br />
<li><a href="6">联系我们</a></li><br />
</ul>
</div>
</span>
<p>CSS定义为：</p>
<span class="code">
.test ul{list-style:none;}
</span>
<p>说明：“.test ul”表示我要定义的样式将作用在test的层里的ul标签上。</p>
<p>现在的效果是没有圆点了：</p>
<div class="test2">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>
<h4>第三步：关键的浮动</h4>
<p>这里是菜单变成横向的关键，我们给li元素加上一个“float:left;”属性，让每个li浮动在前面一个li的
左面。</p>
<p>CSS定义为：</p>
<span class="code">
.test li{float:left;}
</span>
<p>效果是：</p>
<div class="test3">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>
<div style="clear:both;"></div>
<p>看，菜单变横向了。就这么简单！下面需要做的就是优化细节了。</p>
<h4>第四步：调整宽度</h4>
<p>菜单都挤在一起不好看怎么办？我们来调节li的宽度。</p>
<p>在CSS中添加定义width:100px指定一个li的宽度是100px，当然你可以根据你的需要调整数值：</p>
.test li{float:left;width:100px;}
<p>效果是：</p>
<div class="test4">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>
<div style="clear:both;"></div>
<p>如果我们同时定义外面div的宽度，li就会根据div的宽度自动换行，例如定义了div宽350px，6个li的总宽
度是600px，一行排不下就自动变成两行：</p>
.test{width:350px;}
<p>效果是：</p>
<div class="test5">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>
<h4>第五步：设置基本链接效果</h4>
<p>接下来，我们通过CSS来设置链接的样式，分别定义:link、:visited、:hover的状态</p>
<span class="code">
.test a:link{color:#666;background:#CCC;text-decoration:none;}<br />
.test a:visited{color:#666;text-decoration:underline;}<br />
.test a:hover{color:#FFF; font-weight:bold;text-decoration:underline;background:#F00;}<br />
</span>
<p>效果是：</p>
<div class="test6">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>
<div style="clear:both;"></div>
<h4>第六步：将链接以块级元素显示</h4>
<div style="clear:both;"></div>
<p>有朋友问，菜单链接的背景色为什么没有填满整个li的宽度？恩，解决的方法很简单，在a的样式定义中增
加display:block，使链接以块级元素显示。</p>
<p>同时我们微调了如下细节：</p>
<ul>
<li>用text-align:center将菜单文字居中；</li>
<li>用height:30px增加背景的高度；</li>
<li>用margin-left:3px使每个菜单之间空3px距离；</li>
<li>用line-height:30px;定义行高，使链接文字纵向居中；</li>
</ul>
<p>CSS定义象这样：</p>
<span class="code">
.test a{display:block；text-align:center;height:30px;}<br />
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
</span>
<p>效果变成：</p>
<div class="test7">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>
<div style="clear:both;"></div>
<p>这样就漂亮多了吧。</p>
<h4>第七步：定义背景图片</h4>
<p>我们通常都会在每个链接前加一个小图标，这样导航更清楚。CSS是采用定义li的背景图片来实现的：</p>
<span class="code">
.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px
12px;text-decoration:none;}<br />
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif)
#F00 no-repeat 5px 12px;}
</span>
<p>说明：“background:url(arrow_off.gif) #CCC no-repeat 5px 12px;”这句代码是一个CSS缩写，表示背
景图片是arrow_off.gif；背景颜色是#CCC；背景图片不重复"no-repeat"，背景图片的位置是左边距5px、上
边距12px；</p>
<p>默认状态下，图标为arrow.off.gif，当鼠标移动到链接上，图标变为arrow_on.gif</p>
<p>效果变成：</p>
<div class="test8">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>
<div style="clear:both;"></div>
<p>现在css的完整代码是：</p>
<span class="code">
.test ul{list-style:none;}<br />
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}<br />
.test a{display:block;text-align:center;height:30px;}<br />
.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px
12px;text-decoration:none;}<br />
.test a:visited{color:#666;text-decoration:underline;}<br />
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif)
#F00 no-repeat 5px 12px;}
</span>
<p>页面的完整代码是：</p>
<span class="code">
<div class="test"><br />
<ul><br />
<li><a href="1">首页</a></li><br />
<li><a href="2">产品介绍</a></li><br />
<li><a href="3">服务介绍</a></li><br />
<li><a href="4">技术支持</a></li><br />
<li><a href="5">立刻购买</a></li><br />
<li><a href="6">联系我们</a></li><br />
</ul><br />
</div>
</span>
<p>好了，主要步骤就是这7步，立刻拷贝和修改代码试试，你也可以用CSS做横向菜单了！</p>
<p>
</p>
</body>
</html> |
|
IP卡
狗仔卡
发表于 2007-10-8 08:49:54
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
转播
分享
淘帖
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
楼主
