网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容
www.diybl.com 时间 ： 2010-10-08 作者：网络 编辑：hawk 点击： [ 评论 ]
网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--定义过渡型DOCTYPE-->
<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" /><!--关键词-->
<!--CSS样式开始-->
<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><!--CSS样式结束-->
</head><!--网页头部结束-->
<body><!--网页主体开始-->
<div id="logo">
logo
</div>
<div id="banner">
banner
</div>
<div id="mail">
mail
</div>
<div id="menu">
<ul>
<li>
第一分类<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li>XHTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li><font color=red>Fireworks</font></li>
<li>Photoshop</li>
<li>Flash</li>
<li>Illustrator</li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
<![endif]-->
</li>
<li>
第一分类<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li>XHTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li><font color=red>Fireworks</font></li>
<li>Photoshop</li>
<li>Flash</li>
<li>Illustrator</li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
<![endif]-->
</li>
<li>
第一分类<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li>XHTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li><font color=red>Fireworks</font></li>
<li>Photoshop</li>
<li>Flash</li>
<li>Illustrator</li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
<![endif]-->
</li>
<li>
第一分类<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li>XHTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li><font color=red>Fireworks</font></li>
<li>Photoshop</li>
<li>Flash</li>
<li>Illustrator</li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
<![endif]-->
</li>
<li>
第一分类<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li>XHTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li><font color=red>Fireworks</font></li>
<li>Photoshop</li>
<li>Flash</li>
<li>Illustrator</li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
<![endif]-->
</li>
<li>
第一分类<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li>XHTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li><font color=red>Fireworks</font></li>
<li>Photoshop</li>
<li>Flash</li>
<li>Illustrator</li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
<![endif]-->
</li>
<li>
第一分类<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li>XHTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li><font color=red>Fireworks</font></li>
<li>Photoshop</li>
<li>Flash</li>
<li>Illustrator</li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
<![endif]-->
</li>
<li>
第一分类<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li>XHTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li><font color=red>Fireworks</font></li>
<li>Photoshop</li>
<li>Flash</li>
<li>Illustrator</li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
<![endif]-->
</li>
<li>
第一分类<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li>XHTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li><font color=red>Fireworks</font></li>
<li>Photoshop</li>
<li>Flash</li>
<li>Illustrator</li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
<![endif]-->
</li>
<li>
第一分类<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li>XHTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li><font color=red>Fireworks</font></li>
<li>Photoshop</li>
<li>Flash</li>
<li>Illustrator</li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
<![endif]-->
</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>如果图片或页面不能正常显示请点击这里
CSS技术文档推荐文章
频道地图
CSS技术文档相关文章
