WEB2.0网页制作标准教程(11)不用表格的菜单(2)
作者:阿捷 来源:w3cn 时间:2008-02-19 19:36:00
2.不用表格的菜单(横向)
上面是纵向的菜单,如果要显示横向菜单,用li也可以吗?当然是可以的,下面给出代码,效果就在本页顶部:
页面代码
<div id="submenu">
<ul>
<li id="one"><a title="首页" href="http://www.w3cn.org/">Home</a></li>
<li id="two"><a title="关于我们" href="http://www.w3cn.org/aboutus.html">关于我们</a></li>
<li id="three"><a title="网站标准" href="http://www.w3cn.org/webstandards.html">网站标准</a></li>
<li id="four"><a title="标准的好处" href="http://www.w3cn.org/benefits.html">标准的好处</a></li>
<li id="five"><a title="怎样过渡" href="http://www.w3cn.org/howto.html">怎样过渡</a></li>
<li id="six"><a title="相关教程" href="http://www.w3cn.org/tutorial.html">相关教程</a></li>
<li id="seven"><a title="工具" href="http://www.w3cn.org/tools.html">工具</a></li>
<li id="eight"><a title="资源及链接" href="http://www.w3cn.org/resources.html">资源及链接</a></li>
<li id="nine"><a title="常见问题" href="http://www.w3cn.org/faq.html">常见问题</a></li>
</ul>
</div>
样式表代码
#submenu {
MARGIN: 0px 8px 0px 8px;
PADDING: 4px 0px 0px 0px;
BORDER: #fff 1px solid;
BACKGROUND: #dfdfdf;
COLOR: #666;
HEIGHT:25px; }
#submenu ul {
CLEAR: left;
MARGIN: 0px;
PADDING:0px;
BORDER: 0px;
LIST-STYLE-TYPE: none;
TEXT-ALIGN: center;
DISPLAY:inline;
}
#submenu li {
FLOAT: left;
DISPLAY: block;
MARGIN: 0px;
PADDING: 0px;
TEXT-ALIGN: center}
#submenu li a {
DISPLAY: block;
PADDING:2px 3px 2px 3px;
BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
FONT-WEIGHT: bold;
WIDTH: 100%;
COLOR: #444;
TEXT-DECORATION: none;
}
#submenu li a:hover {
BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
COLOR: #fff; }
#submenu ul li#one A { WIDTH: 60px}
#submenu ul li#two A { WIDTH: 80px}
#submenu ul li#three A { WIDTH: 80px}
#submenu ul li#four A { WIDTH: 90px}
#submenu ul li#five A { WIDTH: 80px}
#submenu ul li#six A { WIDTH: 80px}
#submenu ul li#seven A { WIDTH: 60px}
#submenu ul li#eight A { WIDTH: 90px}
#submenu ul li#nine A { WIDTH: 80px}
以上代码不逐一分析了。横向菜单的关键在于:定义<li>样式时的"
FLOAT: left;
"语句。另外注意UL定义中的
DISPLAY:inline;
一句表示将li强制作为内联对象呈递,从对象中删除行,通俗讲就是li不换行。实现横向排列。你也可以象例子中定义每个子菜单的宽度,控制菜单的间隔。好了,你也可以动手试试,用li实现各种各样的菜单样式。
Tips:如果你子菜单的宽度总和大于层的宽度,菜单会自动折行,利用这个原理可以实现单个无序列表的2列或者3列排版,这是原来HTML很难实现的。
感谢zhuweiwei指出横向菜单的bug,本文7月6日修正。
标签:菜单,表格,css,web2.0
0
投稿
猜你喜欢
python入门教程之基本算术运算符
2023-05-24 11:48:21
python使用正则表达式检测密码强度源码分享
2022-06-26 15:54:42
Pycharm连接远程服务器过程图解
2023-07-25 04:37:53
Python 转换文本编码实现解析
2022-07-15 15:58:49
python调试模式无响应解决案例
2021-03-27 00:23:18
python pip安装的包目录(site-packages目录的位置)
2022-08-23 13:20:38
php实现文章评论系统
2024-05-13 09:53:40
python3 pillow模块实现简单验证码
2021-07-04 11:10:44
python OpenCV图像金字塔
2021-11-03 04:00:48
如何将数据访问页绑定到断开连接的 ADO 记录集上?
2009-12-03 20:07:00
python-web根据元素属性进行定位的方法
2021-05-04 04:22:35
数据库之:Mysql数据库服务器安装与配置
2010-08-31 14:11:00
检测python爬虫时是否代理ip伪装成功的方法
2021-07-31 20:23:44
SQLServer中数据库文件的存放方式,文件和文件组
2024-01-25 21:38:25
Pyqt+matplotlib 实现实时画图案例
2022-01-06 12:52:23
Python创建二维数组实例(关于list的一个小坑)
2021-04-29 19:28:13
python实现多进程按序号批量修改文件名的方法示例
2021-10-30 08:33:42
Mootools 1.2教程(21)——类(二)
2008-12-28 20:58:00
pytorch cnn 识别手写的字实现自建图片数据
2023-04-18 02:39:22
Java 正则表达式功能及应用
2022-03-25 10:07:09