<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>公司网站</title>
<style type="text/css">
*{font-family: "宋体",Arial, Helvetica, sans-serif;}
#header{
width: 917px;
height: 115px;
/*居中*/
margin: 0 auto;
background: url(imageswangzhan/img2.gif) repeat-x;
}
#logo{
float: left;
height: 115px;
/*上、右、下、左*/
padding: 0 0 0 0;
background: url(imageswangzhan/img1.gif) no-repeat;
}
#logo h1{
float: left;
padding: 50px 0 0 40px;
font-size: 36px;
}
#logo h1 a{color: #000000}
#logo h2{
float: left;
padding: 72px 0 0 8px;
font-size: 12px;
border: none;
}
/*选择器类型决定它的前缀 ，中间只需加空格就可以了*/
#logo h2 a{color: #B4B4B4}
#menu{
float: right;
height: 45px;
padding: 70px 25px 0 0;
/* background的属性见图一*/
background: url(imageswangzhan/img3.gif) no-repeat right top;
}
#menu ul{
margin: 0;
padding: 0;
list-style: none;
}
#menu li{
display: inline;
}
#menu a{
padding: 0 15px 0 20px;
/*width,style,color的顺序*/
border-left: 1px solid #DBDBDB;
/*转化小写*/
text-transform: lowercase;
text-decoration: none;;
font-size: 13px;
color: #3B3B3B;
}
#menu .first a{
border: none;
}
#splash{
width: 877px;
height: 170px;
margin: 0 auto;
background: url(imageswangzhan/img5.gif) no-repeat;
border-right: 20px solid #FFFFFF;
border-left: 20px solid #FFFFFF;
}
body{
margin: 30px 0;
padding: 0;
background: #EFEFEF;
font-size: 12px;
color: #000000;
}
h1,h2{
margin: 0;
padding: 0;
text-transform: lowercase;
/*字体的粗细*/
font-weight: normal;
color: #000000;
}
h2{
margin-bottom: 10px;
border-bottom: 1px solid #F4F4F4;
font-size: 26px;
}
ul{
margin-left: 0;
padding-left: 0;
list-style: none;
}
a{
color: #EC5600;
}
a.hover{text-decoration: none;}
img{border: none;}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<h1>公司网站</h1>
<h2><a href="#">健康新生活从我们开始</a></h2>
</div>
<div id="menu">
<ul>
<!-- <li> 标签支持 HTML 中的全局属性 -->
<li class="first"><a href="#" accesskey="1" title="">首页</a></li>
<li><a href="#" accesskey="2" title="">公司简介</a></li>
<li><a href="#" accesskey="3" title="">产品列表</a></li>
<li><a href="#" accesskey="4" title="">关于我们</a></li>
<li><a href="#" accesskey="5" title="">联系我们</a></li>
</ul>
</div>
</div>
<div id="splash"><a href="#"><img src="imageswangzhan/img4.jpg" alt="" width="877" height="140"></a></div>
</body>
</html>
E5B8144A-2641-4645-A5AE-8C08AD3F4A70.png
图一
5701B8C0-C344-4A5A-8E99-1E21104C2A28.png
图二
