html.zip

<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="1.css"> <script src="1.jquery"></script> <script src="js"></script> <script src="2.js"></script> <style type="text/css"> body{ font-size:12px; font-family:Arial; } nav.top_outer { background-color: rgb(242, 242, 242); border-bottom:1px solid #e7e7e7; } nav div.top { margin: 0 auto; width: 1000px; padding-top: 5px; padding-bottom: 5px; } nav div.top a, nav div.top span { color: rgb(156, 155, 154); margin: 0 10px; } nav div.top a:hover { text-decoration: none; color: rgb(196, 0, 0); } .redColor { color: rgb(196, 0, 0) !important; } .reverse { transform: rotateY(180deg); /*原来的购物车图标方向向左，改成向右*/ } </style> <nav class="top_outer"> <div class="top"> <a href="#"> <span class="glyphicon glyphicon-home redColor"></span> 天猫首页 </a> <span>喵，欢迎来到天猫</span> <a href="#">请登录</a> <a href="#">免费注册</a> <span class="pull-right"> <a href="#">我的订单</a> <a href="#"> <span class="glyphicon glyphicon-shopping-cart redColor reverse"></span> 购物车<strong>0</strong>件 </a> </span> </div> </nav> <style type="text/css"> body{ font-size:12px; font-family:Arial; } img#logo { position: absolute; left: 230px; top: 30px; } div.searchDiv { background-color: #C40000; width: 400px; margin: 50px auto; padding: 1px; height: 40px; } div.searchDiv input { outline: none; width: 275px; height: 36px; margin: 1px; border: 1px solid transparent; } div.searchDiv button { background-color: #C40000; border: 1px solid transparent; color: white; font-weight: bold; font-size: 20px; width: 110px; } div.searchBelow span, div.searchBelow a { color: rgb(134, 134, 134); display: inline-block; margin-top: -17px; } div.searchBelow>span>span { margin: 20px; } div.searchBelow a:hover { color: #C40000; text-decoration: none; } </style> <style type="text/css"> body{ font-size: 12px; font-family: Arial; } footer { margin-top: 20px; border-top: 1px solid rgb(231, 231, 231); } div.footerImg { text-align: center; padding: 20px; border-bottom: 1px solid rgb(231, 231, 231); } div.footerMid { padding: 30px 10px; width: 1007px; margin: 0 auto; } div.mid_column { float: left; width: 220px; top: 100px; } div.mid_column a { display: block; padding-top: 3px; color:#999; } div.mid_column span.mid_column_title, div.mid_img span.mid_column_title { color: #646464; font-weight: bold; font-size: 16px; } div.mid_column a:hover { text-decoration:none; color: #C40000; } div.footerLogo { margin: 0 auto; width: 1007px; } div.footerBelow_outer { border-top: 2px solid rgb(196, 0, 0); background-color: black; } div.footerBelow { margin: 0 auto; width: 1007px; padding: 5px; } div.footerBelow .whiteLink a, div.footerBelow .whiteLink span { color: white; padding-right: 5px; } div.footerBelow .whiteLink, div.footerBelow .license { padding: 5px 0 10px 5px; } div.footerBelow .license span { color: rgb(151, 152, 156); } div.footerBelow .license div { padding: 10px 0 5px 0; } div.footerBelow .whiteLink a:hover { text-decoration: none; } </style> <style type="text/css"> body{ font-size:12px; font-family:Arial; } img#logo { position: absolute; left: 230px; top: 30px; } div.searchDiv { background-color: #C40000; width: 400px; margin: 50px auto; padding: 1px; height: 40px; } div.searchDiv input { outline: none; width: 275px; height: 36px; margin: 1px; border: 1px solid transparent; } div.searchDiv button { background-color: #C40000; border: 1px solid transparent; color: white; font-weight: bold; font-size: 20px; width: 110px; } div.searchBelow span, div.searchBelow a { color: rgb(134, 134, 134); display: inline-block; margin-top: -17px; } div.searchBelow>span>span { margin: 20px; } div.searchBelow a:hover { color: #C40000; text-decoration: none; } </style> <div class="search_outer"> <a href="#"> <img id="logo" src="img/logo.png" /> </a> <div class="searchDiv"> <input type="text" name="keyword" placeholder="洗衣粉"> <button type="submit" >搜索</button> <div class="searchBelow"> <span><a href="#">鼠标</a><span>|</span></span> <span><a href="#">显示屏</a><span>|</span></span> <span><a href="#">手机</a><span>|</span></span> <span><a href="#">电脑</a></span> </div> </div> </div> <style type="text/css"> body{ font-size:12px; font-family:Arial; } div.item img { width: 100%; } div#carousel-outer { width: 1000px; margin: 20px auto; } div.headBar { background-color: rgb(221, 39, 39); } div.headBar div.head { display: inline-block; width: 200px; height: 36px; line-height: 36px; font-weight: bold; font-size: 16px; margin:0 20px; color: white; background-color: #C60A0A; padding-left: 10px; } div.headBar div.rightMenu { display: inline-block; } div.headBar div.rightMenu img { height: 30px; } div.headBar div.rightMenu span { margin-right: 40px; } div.headBar div.rightMenu span a { color: white; font-size: 16px; text-decoration: none; } div.headBar div.rightMenu img#tmall { display: inline; width: 50%; } div#headBar_fill { position: relative; width: 100%; height: 36px; background-color: rgb(221, 39, 39); top: -480px; z-index: -1; } div#carousel_fill { position: relative; width: 100%; height: 424px; background-colo