只写了个头部，主要是练手，一些细节没有管。
360首页：
仿写的：
代码：
<!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">
* {
margin: 0px;
padding: 0px;
font-family: "Microsoft YaHei"
}
;
ul li {
list-style: none;
}
#top {
background-color: #fff;
height: 60px;
width: 960px;
margin: 0px auto;
}
.bar {
background: url(images/logo.png) no-repeat;
height: 60px;
margin-top: 6px;
}
#header {
height: 567px;
background: url(images/header.png) no-repeat;
border-bottom: 10px solid #0b84e9;
}
.nav {
font: normal 12px/1em ‘Microsoft YaHei‘, ‘\5fae\8f6f\96c5\9ed1‘, arial, helvetica, sans-serif;
list-style: none;
float: right;
line-height: 1px;
}
.nav li {
float: left;
padding: 25px;
}
.five {
width: 321px;
height: 211px;
background: url(images/five.png) no-repeat;
position: absolute;
left: 890px;
top: 90px;
}
.ima {
position: absolute;
top: 310px;
left: 321px;
background: url(images/product.png) no-repeat;
height: 328px;
width: 864px;
}
.dow {
background: url(images/downd.png) no-repeat;
width: 210px;
height: 73px;
position: absolute;
top: 99px;
left: 500px;
}
.dow2{
background:url(images/t0190f2ad202d20830a.png) no-repeat;
position:absolute;
top:200px;
left:510px;
height:70px;
width:171px;
color:#287200;
color:rgba(40,114,0,0.5);
font: normal 12px/1em ‘Microsoft YaHei‘, ‘\5fae\8f6f\96c5\9ed1‘, arial, helvetica, sans-serif;
text-align:center;
padding-top:38px;
}
</style>
</head>
<body>
<div id = "top">
<div class="bar">
<ul class="nav">
<li>首页</li>
<li>更新日志</li>
<li>下载中心</li>
<li>样本上报</li>
<li>在线求助</li>
</ul>
</div>
</div>
<div id = "header">
<div class="dow"></div>
<div class="dow2">更新于04月22日(27MB)
</div>
<div class="five"></div>
<div class="ima"></div>
</div>
<div id = "mainconten"> 主题内容</div>
<div id = "foote">版权信息</div>
</body>
</html>
时间： 2024-10-10 02:30:29