《2022年Xhtml第11天-如何制作不用表格的菜单CSSHTML教程.docx》由会员分享，可在线阅读，更多相关《2022年Xhtml第11天-如何制作不用表格的菜单CSSHTML教程.docx（5页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、2022年Xhtml第11天:如何制作不用表格的菜单CSSHTML教程1.不用表格的菜单(纵向)我们先来看菜单的最终效果：#menu {margin: 15px 20px 0px 15px;padding:15px;background: #dfdfdf;color: #666;border:#fff 2px solid; width:160px;}#menu ul {margin: 0px;padding: 0px;border: medium none; line-height: normal; list-style-type: none;display:in
2、line;}#menu li {border-top: #fff 1px solid; margin: 0px;}#menu li a {padding:5px 0px 5px 15px;display: block; font-weight: bold; background: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px; width: 100%; color: #444; text-decoration: none;}#menu li a:hover {
3、background: url(images/icon_dot_lmenu2.gif) #c61c18 no-repeat 2px 8px;color: #fff; }什么是网站标准运用标准的好处怎样过渡相关教程工具资源及链接通常方法我们至少嵌套2层表格来实现这样的菜单，间隔线采纳在td中设置背景色并插入1px高的透亮gif图片实现；背景色的交替效果采纳td的onmouseover事务实现。但查看本菜单的页面代码，你会看到只有如下几句：<div id=menu><ul><li><a title=网站标准 href=http:/www.w3cn
4、.org/webstandards.html>什么是网站标准</a></li><li><a title=标准的好处 href=http:/www.w3cn.org/benefits.html>运用标准的好处</a></li><li><a title=怎样过渡 href=http:/www.w3cn.org/howto.html>怎样过渡</a></li><li><a title=相关教程 href=http:/www.w3cn.org/tutorial
5、.html>相关教程</a></li><li><a title=工具 href=http:/www.w3cn.org/tools.html>工具</a></li><li><a title=资源及链接 href=http:/www.w3cn.org/resources.html>资源及链接</a></li></ul></div> 没有用任何table,而用的是无序列<li>，整个菜单的效果实现的隐私完全在于id=menu，我们再来看cs
6、s中关于menu的定义：(1)首先定义了menu层的主要样式:#menu {margin: 15px 20px 0px 15px; /*定义层的外边框距离*/padding:15px; /*定义层的内边框为15px*/background: #dfdfdf; /*定义背景颜色*/color: #666; /*定义字体颜色*/border:#fff 2px solid; /*定义边框为2px白色线条*/width:160px; /*定义内容的宽度为160px*/} (2)其次定义无序列表的样式：#menu ul {margin: 0px;padding: 0px;b
7、order: medium none; /*不显示边框*/line-height: normal;list-style-type: none;}#menu li {border-top: #fff 1px solid; margin: 0px;} 说明：这里用的是id选择器的派生方法定义(参考第7天：css入门的介绍)了在menu层中的子元素<ul>和<li>的样式。list-style-type: none一句表示不采纳无序列表的默认样式，即：不显示小圆点（我们后面用自己的图标来代替小圆点）。border-top: #fff 1px so
8、lid;则定义了菜单之间的1px间隔线。(3)定义onmouseover效果#menu li a {padding:5px 0px 5px 15px;display: block;font-weight: bold;background: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;width: 100%;color: #444;text-decoration: none;}#menu li a:hover { background: url(images/icon_dot_lmenu2.gif) #c61c18 no-repeat 2px 8px;color: #fff; } 本新闻共3页,当前在第1页123