需要注意的地方见注释:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html,body {
margin: -12px 0 0 0;
padding: 0;
border: 0;
width:100%;
height:100%;
}
#wrapper{
margin:0 auto;
padding:0;
width:80%;
height:100%;
}
#top {
margin: 0 auto;
width: 100%;
height: 100px;
background-color: #ddd;
filter: alpha(opacity = 70); /*IE透明*/
-moz-opacity:0.7; /*Mozilla早期版本透明*/
opacity: 0.7; /*firefox透明*/
text-align: center;
padding:0px;
border-bottom:5px solid red;
}
#nav {
background: #dadada;
width: 100%;
height: 50px;
line-height: normal;
border-bottom: 2px solid #804040;
font-size: large;
margin: 0 auto;
padding: 0px;
overflow:hidden;
}
#nav ul {
margin: 0px 0px 0px 50px;
list-style-type: none;
line-height: 50px; /*设定UL行高*/
white-space:nowrap; /*文本不换行*/
}
#nav ul li {
float: left;
margin: -1px;
border: 1px solid #c0c0c0;
background: #abd3be;
border-right-width: 3px;
}
#nav ul a {
text-decoration: none;
padding: 15px 15px; /*确定a标标签的大小*/
color: #408080;
white-space: nowrap;
star: expression(οnfοcus=this.blur); /*缺除链接虚线框,只有IE能识别,所以直接加在a标签上了*/
border:1px solid #c0c0c0;;
}
#nav a:hover { /*设置动态效果*/
color: #fff; /*设定前景颜色,也可以在此时设定自己想要的背景颜色*/
border-right-color:#008040;
border-left-color:#808080;
border-top: 1px solid #400080;
border-bottom: 1px solid #400080;
}
#sign{
filter: alpha(opacity = 50);
-moz-opacity:0.5;
opacity: 0.5;
width:88px;
height:50px;
background:#abd3be;
position:absolute;
left:190px;
top:81px;
z-index:6;
display:none;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="wrapper">
<div id="top">
<h1>logo</h1>
</div>
<div id="nav">
<ul>
<li>
<a href="#" οnfοcus="this.blur()" title="Link 1"><span>Link 1</span></a>
</li>
<li>
<a href="#" οnfοcus="this.blur()" title="Link 2"><span>Link 2</span></a>
</li>
<li>
<a href="#" οnfοcus="this.blur()" title="Link 3"><span>Link 3</span></a>
</li>
<li>
<a href="#" οnfοcus="this.blur()" title="Link 4"><span>Long 4</span></a>
</li>
<li>
<a href="#" οnfοcus="this.blur()" title="Link 5"><span>Link 5</span></a>
</li>
<li>
<a href="#" οnfοcus="this.blur()" title="Link 6"><span>Link 6</span></a>
</li>
<li>
<a href="#" οnfοcus="this.blur()" title="Link 7"><span>Link 7</span></a>
</li>
<li>
<a href="#" οnfοcus="this.blur()" title="Link 8"><span>Link 8</span></a>
</li>
</ul>
</div>
</div>
<div id="sign"></div>
</body>
</html>