<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天天生鲜首页</title>
<link rel="stylesheet" href="../css/reset.css">
</head>
<body>
<div class="top_wrap">
<div class="top">
<div class="top_l fl">欢迎来到天天生鲜网上商城</div>
<div class="top_r fr">
<ul class="fr">
<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>
<li><a href="#">|</a></li>
<li><a href="#">我的订单</a></li>
</ul>
</div>
</div>
</div>
<div class="header clearfix">
<div class="h_left fl">
<img src="../images/logo.png" alt="">
</div>
<div class="h_center fl">
<div class="search">
<input type="text" placeholder="搜素商品">
<input type="button" value="搜素">
</div>
</div>
<div class="h_right fr">
<div class="cart">
<a href="#">我的购物车</a>
<span>1</span>
</div>
</div>
</div>
</body>
</html>
<style>
.top_wrap {
background-color: #f7f7f7;
height: 30px;
border-top: 1px solid #000000;
border-bottom: 1px solid #666666;
line-height: 30px;
}
.top {
width: 1200px;
margin: 0 auto;
color: #666666;
font-size: 12px;
}
.top_l {
width: 200px;
}
.top_r{
width: 1000px;
}
.top ul li {
float: left;
margin-left: 15px;
}
.top ul li a {
color: #666666;
}
.top ul li a:hover {
color: #37ab40;
}
.header {
width: 1200px;
height: 150px;
margin: 0 auto;
}
.h_left {
width: 200px;
}
.h_center {
width: 760px;
}
.h_right {
width: 240px;
}
.header .h_left img {
margin-left: 18px;
margin-top: 32px;
}
.search {
margin-top: 34px;
margin-left: 94px;
height: 42px;
width: 520px;
border: 1px solid #37ab40;
background-image: url(../images/icons.png);
background-repeat: no-repeat;
background-position: 7px -334px;
}
.search input[type=text] {
width: 375px;;
outline: none;
margin-left: 35px;
height: 38px;
border: 0;
}
.search input[type=button] {
width: 102px;
height: 44px;
border: 0;
background-color: #37ab40;
position: relative;
left: 4px;
color: white;
}
.cart {
width: 210px;
margin-top: 36px;
height: 46px;
line-height: 44px;
text-align: center;
}
.cart a {
width: 140px;
height: 40px;
font-size: 16px;
display: inline-block;
color: #37ab40;
border: 1px solid #dddddd;
padding-left: 13px;
background-image: url(../images/icons.png);
background-repeat: no-repeat;
background-position: 8px -298px;
}
.cart span {
width: 40px;
height: 42px;
font-size: 24;
display: inline-block;
background-color: #ff8800;
position: relative;
top: -1px;
right: 5px;
}
</style>
