msn ie脱机设置错误
web2.0中流行的设计
2007/11/07 12:57 | by
页面最终效果：
点击查看
这个菜单制作上的确有些麻烦。
倾斜的平行四边会造成 首尾两角相重合的区域。
那么背景颜色的更换就值得揣摩。
因为ie6不支持li的focus 所以小有点难度。
这里固定li a 的宽度为单个倾斜四边形的宽度。然后使用 相对加绝度定位 调节他们相互的距离。
让他们首尾有重叠区域。也就是切图时候拉开。定义时候拉近。很简单的思路。
当然 背景需要用到通明gif 或者png .因为重叠区域不能相互被挡住。
注意ie6不支持通明png
完整页面页面代码如下：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
li {
display: inline;
}
#a,#b,#c,#d,#e,#f {
position: relative;
}
#a {
left: 0px;
}
#b {
left: 70px;
}
#c {
left: 140px;
}
#d {
left: 210px;
}
#e {
left: 280px;
}
#f {
left: 350px;
}
li a {
width: 90px;
font-weight: bold;
text-align: center;
color: #FFFFFF;
line-height: 30px;
text-decoration: none;
position: absolute;
background-image: url(222.gif);
background-repeat: no-repeat;
background-position: center top;
}
li a:hover {
background-position: center bottom;
color: #000000;
}
body {
background-color: #999999;
}
-->
</style>
</head>
<body>
<ul>
<li id="a"><a href="#1">menu1</a></li>
<li id="b"><a href="#1">menu2</a></li>
<li id="c"><a href="#1">menu3</a></li>
<li id="d"><a href="#1">menu4</a></li>
<li id="e"><a href="#1">menu5</a></li>
<li id="f"><a href="#1">menu6</a></li>
</ul>
</body>
</html>
点击查看
这个菜单制作上的确有些麻烦。
倾斜的平行四边会造成 首尾两角相重合的区域。
那么背景颜色的更换就值得揣摩。
因为ie6不支持li的focus 所以小有点难度。
这里固定li a 的宽度为单个倾斜四边形的宽度。然后使用 相对加绝度定位 调节他们相互的距离。
让他们首尾有重叠区域。也就是切图时候拉开。定义时候拉近。很简单的思路。
当然 背景需要用到通明gif 或者png .因为重叠区域不能相互被挡住。
注意ie6不支持通明png
完整页面页面代码如下：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
li {
display: inline;
}
#a,#b,#c,#d,#e,#f {
position: relative;
}
#a {
left: 0px;
}
#b {
left: 70px;
}
#c {
left: 140px;
}
#d {
left: 210px;
}
#e {
left: 280px;
}
#f {
left: 350px;
}
li a {
width: 90px;
font-weight: bold;
text-align: center;
color: #FFFFFF;
line-height: 30px;
text-decoration: none;
position: absolute;
background-image: url(222.gif);
background-repeat: no-repeat;
background-position: center top;
}
li a:hover {
background-position: center bottom;
color: #000000;
}
body {
background-color: #999999;
}
-->
</style>
</head>
<body>
<ul>
<li id="a"><a href="#1">menu1</a></li>
<li id="b"><a href="#1">menu2</a></li>
<li id="c"><a href="#1">menu3</a></li>
<li id="d"><a href="#1">menu4</a></li>
<li id="e"><a href="#1">menu5</a></li>
<li id="f"><a href="#1">menu6</a></li>
</ul>
</body>
</html>
您写的简单易懂，学起来很快，太感谢了～