关闭

如何使用CSS制作横向菜单

标签: css产品floatdivurlclass
421人阅读 评论(0) 收藏 举报
分类:

尽管在我的网站和文章里都有提到CSS制作菜的方法,但很多初学者是不太清楚如何实现,以及实现原理,我想专门写一篇详细教程会大家比有帮助。

先来看一个菜的例子,最效果是:

然后我详细讲步骤

第一:建立一个无序列表

先建立一个无序列表,来建立菜构。代是:

<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>

效果是:

第二li的默认样

看起来不是很好看,菜通常都不需要li点,我们给UL一个式来消除点。

当然,了更好的控制整个菜,我把菜放在一个div里。面代码变成:

<div class="test"> <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>

CSS义为

.test ul{list-style:none;}

明:“.test ul”表示我要定式将作用在test里的ul标签上。

在的效果是没有点了:

第三关键的浮

里是菜单变成横向的关键,我们给li元素加上一个“float:left;”属性,让每li在前面一个li的左面。

CSS义为

.test li{float:left;}

效果是:

看,菜单变横向了。就这么简单!下面需要做的就是细节了。

第四

在一起不好看怎么办?我调节li度。

CSS中添加定width:100px指定一个li度是100px,当然你可以根据你的需要整数

.test li{float:left;width:100px;}

效果是:

如果我外面div度,li就会根据div度自动换行,例如定div350px6li总宽度是600px,一行排不下就自动变成两行:

.test{width:350px;}

效果是:

第五置基本接效果

接下来,我CSS接的式,分:link:visited:hover的状

.test a:link{color:#666;background:#CCC;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:underline;background:#F00;}

效果是:

第六:将块级元素

有朋友,菜单链接的背景色没有填整个li度?恩,解决的方法很简单,在a式定中增加display:block,使接以块级元素示。

了如下细节

  • 用text-align:center将菜单文字居中;
  • 用height:30px增加背景的高度;
  • 用margin-left:3px使每个菜单之间空3px距离;
  • 用line-height:30px;定义行高,使链接文字纵向居中;

CSS这样

.test a{display:blocktext-align:center;height:30px;}
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}

效果成:

这样就漂亮多了吧。

第七:定背景

通常都会在接前加一个小图标这样导航更清楚。CSS是采用定li的背景片来实现的:

.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}

明:“background:url(arrow_off.gif) #CCC no-repeat 5px 12px;”句代是一个CSS写,表示背景片是arrow_off.gif;背景色是#CCC;背景片不重"no-repeat",背景片的位置是左5px、上12px

下,图标为arrow.off.gif,当鼠接上,图标变为arrow_on.gif

效果成:

css的完整代是:

.test ul{list-style:none;}
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
.test a{display:block;text-align:center;height:30px;}
.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}

面的完整代是:

<div class="test">
<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>

好了,主要步骤就是7,立刻拷和修改代码试试,你也可以用CSS做横向菜

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:371525次
    • 积分:4016
    • 等级:
    • 排名:第8001名
    • 原创:45篇
    • 转载:171篇
    • 译文:0篇
    • 评论:24条
    最新评论