<!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>