第一步:建立一个无序列表
我们先建立一个无序列表,来建立菜单的结构。代码是:

<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的宽度自动换行,例如定义了div宽350px,6个li的总宽度是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:block;text-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做横向菜单了!

ul li menu的更多相关文章

  1. ul li设置横排,并除去li前的圆点

    效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...

  2. 使用CSS把ul,li制作成表格

    查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...

  3. html ul li的学习

    DIV+CSS里,我们用得最多的就是ul li来显示数据,如新闻按钮等. <div id="menu"> <ul> <li><a href ...

  4. css控制UL LI 的样式详解

    用<ul>设置导航 <style> #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} </ ...

  5. UL LI 布局 TAB 切换条

    web页面实现tab的功能有几种实现方式,下面是使用UL LI DIV方式实现的tab. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  6. css案例学习之ul li dl dt dd实现二级菜单

    效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  7. 竖向折叠二级导航JS代码(可防刷新ul/li结构)

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    ...

  8. css控制UL LI 的样式详解(推荐)

    代码如下: <div id="menu"> <ul> <li><a href="#">首页</a>& ...

  9. DIV+CSS布局重新学习之css控制ul li实现2级菜单

    竖状菜单: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

随机推荐

  1. [luoguP2325] [SCOI2005]王室联邦(树分块乱搞)

    传送门 想了半小时,没什么思路.. 看了题解,是个叫做树分块的奇奇怪怪的操作.. 题解 树分块的研究 #include <cstdio> #include <cstring> ...

  2. 【leetcode】lower_bound

    int binary_search(const vector<int>& stones,int val){ int sz=stones.size(); ,r=sz-; while( ...

  3. http 400报错

    http 400报错---springmvc相关: 1.使用了json入参,传递给了对象,如果对象里的属性,如这里的Bonus是int类型,你传入了非int类型,这里就会报400 2.使用了@Requ ...

  4. springmvc简单的xml文件配置步骤

    1.配置web.xml的servlet标签,在此标签中配置服务器配置文件 2.配置web.xml的servlet-mapping标签 3.配置application.xml的自动扫描包的位置 4.配置 ...

  5. Nk 1430 Divisors(因子数与质因数)

    Time Limit: 5000 ms    Memory Limit: 10000 kB   Total Submit : 432 (78 users)   Accepted Submit : 10 ...

  6. Codeforces Round #291 (Div. 2) C. Watto and Mechanism [字典树]

    传送门 C. Watto and Mechanism time limit per test 3 seconds memory limit per test 256 megabytes input s ...

  7. 计算机windows7连接打印机

    计算机连接打印机 (1)查看打印机的名字. 示例,打印机名为 HP LaserJet M1522 .... (2)打开windows开始菜单,点击[设备和打印机],然后查看打印机和传真那个区域是否有打 ...

  8. go--常量&运算符

    常量const 1.常量声明: const ( a = b c ) fmt.Println(a) fmt.Println(b) fmt.Println(c)// ======222 ====: 2.并 ...

  9. 激活win10系统的方法(亲测)

    WIN+X 按A (或者点击左下角有个windows小图标“鼠标右键”选择选择“命令提示符号(管理员)”) 输入下面命令,回车(一行按一个回车键)slmgr.vbs /upkslmgr /ipk W2 ...

  10. (25)python urllib库

    urllib包包含4个模块,在python3里urllib导入要用包名加模块名的方式. 1.urllib.request 该模块主要用于打开HTTP协议的URL import urllib.reque ...