39,084
社区成员
发帖
与我相关
我的任务
分享
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>360同城帮</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<div id="box">
<div id="header">
<div id="header1">
<div style="line-height: 32px;">
<span style="color: #185;">北京</span>
<a href="#">【切换城市】</a>
<a href="#">同城帮首页</a>
</div>
</div>
<hr />
<div id="header2">
<div style="float: right;">
<ul id="header2_ul">
<li><a href="#">登陆</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">我的订单</a></li>
<li><a href="#">在线客服</a></li>
<li><a href="#">客服服务</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">投诉建议</a></li>
</ul>
</div>
</div>
<div id="header3">
<div id="header3_01">
</div>
<div id="header3_02">
<ul>
<li><a href="#">二手优品</a></li>
<li><a href="#">手机回收</a></li>
<li><a href="#">手机维修</a></li>
<li><a href="#">电脑维修</a></li>
<li><a href="#">以旧换新</a></li>
<li><a href="#">手机租用</a></li>
</ul>
</div>
</div>
</div>
<div id="ad">
<div id="inAd">
<ul>
<li><a href="#">修手机</a></li>
<li><a href="#">修电脑</a></li>
<li><a href="#">卖手机</a></li>
<li><a href="#">卖电脑</a></li>
</ul>
</div>
</div>
<div id="main">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
reset.css部分
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {
margin: 0;
padding: 0;
}
fieldset,
img {
border: none;
}
img {
display: block;
}
address,
caption,
cite,
code,
dfn,
th,
var {
font-style: normal;
font-weight: normal;
}
ul,
ol {
list-style: none;
}
body {
color: #333;
font: 12px/20px "SimSun", "宋体", "Arial Narrow", HELVETICA;
background: #fff;
/ overflow-y: scroll;
/ overflow-x: hidden;
}
a {
color: #666;
text-decoration: none;
}
a:visited {
color: #666;
}
a:hover,
a:active,
a:focus {
color: #ff8400;
text-decoration: underline;
}
#box {
width: 600px;
height: 1000px;
margin: 0 auto;
background-color: #F7F7F7;
}
#header1 {
height: 32px;
color: #666;
}
#header2_ul>li {
width: 60px;
float: left;
}
#header2_ul>li>a {
text-align: center;
}
#header3 {
position: relative;
height: 80px;
}
#header3_01 {
width: 129px;
height: 42px;
background-image: url(../img/logol.png);
\ background-size: 129px 21px;
position: absolute;
top: 20px;
}
#header3_02 {
float: right;
line-height: 60px;
}
#header3_02>ul>li {
width: 60px;
float: left;
}
#header3_02>ul>a {
text-align: center;
}
#inAd {
width: 600px;
height: 175px;
background-image: url(../img/12134.png);
background-size: 600px 175px;
position: relative;
}
#inAd ul {
position: absolute;
left: 0;
top: 0;
}
#inAd li {
margin-top: 1px;
width: 100px;
height: 42px;
background-color: rgba(0, 0, 0, 0.5);
}
#inAd li a {
text-align: center;
font-size: 24px;
}