.w { width : 1200px; margin: 0 auto; } .header { position: relative; height: 90px; background-color: #c81623; } .header h1 { position: absolute; top: 10px; left: 0; width: 250px; height: 70px; background-color: aqua; } .header h1 a { display: block; width: 250px; height: 70px; background: url(../images/logo.jpg) no-repeat; background-size: 250px 70px; font-size: 0; }
<header class="header w"> <h1> <a href="#" title="昕之优选官网">昕之优选购物网站</a> </h1> </header>
<!-- 搜索框 --> <div class="search"> <input type="search" name="" id="" placeholder="请输入" /> <button>搜索</button> </div>
.search { position: absolute; top: 16px; left: 400px; width: 490px; height: 36px; border: 2px solid #ed3947; border-radius: 5px; } .search input { position: absolute; top: 0; left: 0; width: 400px; height: 32px; padding-left: 12px; } .search button { position: absolute; top: 0; right: 0; width: 90px; height: 34px; background-color: #ed3947; font-size: 16px; color: #fff; }
.hotwords { position: absolute; top: 57px; left: 400px; width: 490px; height: 36px; } .hotwords a { margin: 0 10px; }
<!-- 热搜词 --> <div class="hotwords"> <a href="" class="style_red">海外直购</a> <a href="">优选自有品牌</a> <a href="">品质奶粉</a> <a href="">人气面膜</a> <a href="">华为手机</a> <a href="">电器专卖</a> </div>
<!-- 购物车 --> <div class="shopcart"> 我的购物车 </div>
.shopcart { position: absolute; top: 16px; right: 74px; width: 144px; height: 36px; line-height: 34px; text-align: center; font-size: 15px; color: #000; border: 2px solid #ed3947; border-radius: 5px; background-color: #f1f1f1; } .shopcart::before { content: ''; font-family: 'icomoon'; } .shopcart::after { content: ''; font-family: 'icomoon'; }