网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容

CSS样式表: 未知长宽元素在已知300px*300px的容器中垂直居中（IE6/7/8/FF）; CSS dashed和dotted的区别; css 超过宽度的文字显示点点; 不同浏览器对CSS3和HTML5的支持状况; 使用DIV+CSS布局网站的优点和缺陷分析; CSS样式表中的position属性详细说明; css 圆角边框; CSS 网页布局问题 li上多出的margin问题; 为什么有些css样式不起作用; tab选项卡布局之利用a的一个选项形式; UL、LI 无序列表实现纯CSS网站导航菜单; 在IE下，当margin:0 auto;无法使得块级元素水平居中时; IE bug input 外层浮动的边距问题; 重置浏览器默认样式; 两种跨浏览器的自适应高的css代码; 纯CSS无hacks的跨游览器自适应高度多列布局推荐; IE中伪类hover的使用及BUG; img与容器下边界的空隙（缝隙）的解决方法; CSS入门篇之传智播客学习; CSS3 倾斜的网页图片库实例教程

No. « ‹ 106 107 108 109 › »

技术文章搜索

关键字

CSS样式表中的网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 217 ::

收藏到网摘: n/a

CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法 CSS图片拼合生成器只需上传zip包即可

网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容

点击运行可以看到效果:

<!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="gb2312">
<head>
<title>网页布局+纯CSS纵向下拉菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="all" name="robots" />
<meta name="author" content="7273771@gmail.com,阳诡子,QQ:7273771" />
<meta name="Copyright" content="blog.529600.com,共同探讨,允许转载" />
<meta name="description" content="下拉菜单,CSS,布局" />
<meta content="下拉,菜单,CSS,布局" name="keywords" />
<style type=text/css>
*{ margin:0; padding:0; border:0;
}
html{ background:#bfc4c7;/*背景颜色*/
}
body{ font:12px/150% '宋体'; margin:0 auto; width:770px; text-align:center;
}
#menu,#nav,#footer{ clear:both;
}
#nav{ padding-left:20px; text-align:left; background:#a60;
}
#footer{ background:#a30;
}
#logo,#banner,#mail,#left,#middle,#right{ float:left; width:180px; background:#f00;
}
#logo,#banner,#mail{ height:60px;
}
#banner{ width:468px; background:#f60;
}
#mail{ width:122px; background:#f90;
}
#left,#right{ width:200px;
}
#left{ background:#093;
}
#middle{ width:370px; background:#063;
}
#right{ background:#033;
}
/*menu部分*/
#menu{ margin:0 auto; width:770px!important; clear:both
}
#menu ul{ list-style:none;
}
#menu li { float:left; position:relative;
}
#menu ul ul { visibility:hidden; position:absolute; left:0px; top:30px;
}
#menu table{ position:absolute; left:0; top:0;
}
#menu ul li:hover ul,#menu ul a:hover ul{ visibility:visible;
}
#menu a{ display:block; text-align:center; text-decoration:none; width:77px; height:30px; color:#000; line-height:30px; background:#c9c9a7;
}
#menu a:hover{ color:#fff; background:#b3ab79;
}
#menu ul ul li { clear:both; text-align:left;
}
#menu ul ul li a{ display:block; width:77px; height:30px; background:#faeec7; color:#000;
}
#menu ul ul li a:hover{ background:#dfc184; color:#000;
}
</style>
</head>
<body> <div id="logo"> logo </div> <div id="banner"> banner </div> <div id="mail"> mail </div>
<div id="menu"> <ul> <li> <a href="">第一分类</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">CSS</a></li> <li><a href="">PHP</a></li> <li><a href="">MySQL</a></li> <li><a href=""><a href="http://www.ruanchen.com/" style="color: #000">Fireworks</a></a></li> <li><a href="">Photoshop</a></li> <li><a href="">Flash</a></li> <li><a href="">Illustrator</a></li> </ul> </li> <li> <a href="">第一分类</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">CSS</a></li> <li><a href="">PHP</a></li> <li><a href="">MySQL</a></li> <li><a href=""><a href="http://www.ruanchen.com/" style="color: #000">Fireworks</a></a></li> <li><a href="">Photoshop</a></li> <li><a href="">Flash</a></li> <li><a href="">Illustrator</a></li> </ul> </li> <li> <a href="">第一分类</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">CSS</a></li> <li><a href="">PHP</a></li> <li><a href="">MySQL</a></li> <li><a href=""><a href="http://www.ruanchen.com/" style="color: #000">Fireworks</a></a></li> <li><a href="">Photoshop</a></li> <li><a href="">Flash</a></li> <li><a href="">Illustrator</a></li> </ul> </li> <li> <a href="">第一分类</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">CSS</a></li> <li><a href="">PHP</a></li> <li><a href="">MySQL</a></li> <li><a href=""><a href="http://www.ruanchen.com/" style="color: #000">Fireworks</a></a></li> <li><a href="">Photoshop</a></li> <li><a href="">Flash</a></li> <li><a href="">Illustrator</a></li> </ul> </li> <li> <a href="">第一分类</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">CSS</a></li> <li><a href="">PHP</a></li> <li><a href="">MySQL</a></li> <li><a href=""><a href="http://www.ruanchen.com/" style="color: #000">Fireworks</a></a></li> <li><a href="">Photoshop</a></li> <li><a href="">Flash</a></li> <li><a href="">Illustrator</a></li> </ul> </li> <li> <a href="">第一分类</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">CSS</a></li> <li><a href="">PHP</a></li> <li><a href="">MySQL</a></li> <li><a href=""><a href="http://www.ruanchen.com/" style="color: #000">Fireworks</a></a></li> <li><a href="">Photoshop</a></li> <li><a href="">Flash</a></li> <li><a href="">Illustrator</a></li> </ul> </li> <li> <a href="">第一分类</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">CSS</a></li> <li><a href="">PHP</a></li> <li><a href="">MySQL</a></li> <li><a href=""><a href="http://www.ruanchen.com/" style="color: #000">Fireworks</a></a></li> <li><a href="">Photoshop</a></li> <li><a href="">Flash</a></li> <li><a href="">Illustrator</a></li> </ul> </li> <li> <a href="">第一分类</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">CSS</a></li> <li><a href="">PHP</a></li> <li><a href="">MySQL</a></li> <li><a href=""><a href="http://www.ruanchen.com/" style="color: #000">Fireworks</a></a></li> <li><a href="">Photoshop</a></li> <li><a href="">Flash</a></li> <li><a href="">Illustrator</a></li> </ul> </li> <li> <a href="">第一分类</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">CSS</a></li> <li><a href="">PHP</a></li> <li><a href="">MySQL</a></li> <li><a href=""><a href="http://www.ruanchen.com/" style="color: #000">Fireworks</a></a></li> <li><a href="">Photoshop</a></li> <li><a href="">Flash</a></li> <li><a href="">Illustrator</a></li> </ul> </li> <li> <a href="">第一分类</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">CSS</a></li> <li><a href="">PHP</a></li> <li><a href="">MySQL</a></li> <li><a href=""><a href="http://www.ruanchen.com/" style="color: #000">Fireworks</a></a></li> <li><a href="">Photoshop</a></li> <li><a href="">Flash</a></li> <li><a href="">Illustrator</a></li> </ul> </li> </ul>
</div> <div id="nav"> 您的位置:网站首页 </div> <div id="left"> left </div> <div id="middle"> middle </div> <div id="right"> right </div> <div id="footer"> footer </div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法 CSS图片拼合生成器只需上传zip包即可

CSS样式表 中的 网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容

评论 (0) All

CSS样式表中的网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容