练习CSS仿360杀毒首页

浏览数：29 / 时间：2015年06月09日

只写了个头部，主要是练手，一些细节没有管。

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>