html+css模仿的锤子官方首页

<div id="wrapper">

<header>

<div class="container">

<h1><a href="#">Smartisan</a></h1>


<ul class="nav-list">
<li><a href="#">在线商城</a></li>
<li><a href="#">坚果 Pro </a></li>
<li><a href="#">Smartisan M1 / M1L </a></li>
<li><a href="#">Smartisan OS </a></li>
<li><a href="#">欢喜云 </a></li>
<li><a href="#">应用下载</a></li>
<li><a href="#">官方论坛</a></li>
</ul>


<ul class="nav-aside">
<li><a href="#">个人中心</a></li>
<li><a href="#">购物车</a></li>

</ul>
</div>
</header>

<div id="main">

<div class="topnav">
<ul>
<li ><a href="#">首页</a></li>
<li ><a href="#">手机</a>

<ul>

<li ><a href="#">锤子时钟</a></li>
<li ><a href="#">锤子日历</a></li>


</ul>


</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 id="banner">

<image src=""/>轮播图

</div>

<section class="sideimg">
 <ul> 
 <li> <img src="http://image.smartisanos.cn/resource/01a771071479e715b92fb5757c2b9018.png?x-oss-process=image/resize,w_305/quality,Q_100/format,webp"> </li>
 <li> <img src="http://image.smartisanos.cn/resource/7534721f839cc75237b582cdf3d2bd6b.jpg?x-oss-process=image/resize,w_305/quality,Q_100/format,webp"> </li>
 <li> <img src="http://image.smartisanos.cn/resource/aea84b28dcde0ba23511dc6c9f2ddb21.jpg?x-oss-process=image/resize,w_305/quality,Q_100/format,webp"> </li>
 <li> <img src="http://image.smartisanos.cn/resource/093b8c4b0af6455b12b7ce824a9df9ad.jpg?x-oss-process=image/resize,w_305/quality,Q_100/format,webp"> </li>
 </ul>
 </section>
 
 
 
<section class="hotitem">

<h1>热门商品</h1>

<div class="container">

<div>
<img src="http://image.smartisanos.cn/resource/afe5728faa22f4b078b84d9c725c136d.jpg?x-oss-process=image/resize,w_206/quality,Q_90/format,webp"/> 
<h5>Smartisan 坚果自拍杆</h5><p>航空铝合金伸缩杆、防过敏硅胶手柄</p>

<ul>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
<div ><i>¥</i><span>259.00</span></div>

</div>

<div>
<img src="http://image.smartisanos.cn/resource/f950d9c27ef21e17374fa212b40d66a9.jpg?x-oss-process=image/resize,w_206/quality,Q_90/format,webp"/> 
<h5>《索尼设计，塑造现代》</h5><p>索尼全盛时期工业设计作品首次集结成书并引进中国</p>
<ul>
<li><span></span></li>
 
</ul>
<div><i>¥</i><span>69.00</div></p>

</div>

<div>
<img src="http://image.smartisanos.cn/resource/5758121b1c057513bfa4119226f3d45a.jpg?x-oss-process=image/resize,w_206/quality,Q_90/format,webp"/> 
<h5>Smartisan 记事本</h5><p>荔枝纹仿皮材质、优质米色纸、不洇不透</p>

<ul>
<li><span></span></li>
<li><span></span></li>

</ul>
<div><i>¥</i><span>69.00</span></div>


</div>

<div>
<img src="http://image.smartisanos.cn/resource/996dba133263339d4fb2ee093d5c3fb6.png?x-oss-process=image/resize,w_206/quality,Q_90/format,webp"/> 
<h5>Smartisan T恤 历史上第一个网络表情符号诞生</h5><p>100% 美国 SUPIMA 棉、舒适拉绒质地</p>

<ul>
<li><span></span></li>
<li><span></span></li>

</ul>
<div><i>¥</i><span>169.00</span></div>

</div>

</div>




</section>



</div>

<footer>


<div id="footnav">

<ul>
<li>
<h3>订单服务 </h3>
<ul>
<li><a href="#">购买指南</a></li>
<li><a href="#">支付方式</a></li>
<li><a href="#">送货政策</a></li>
</ul>
</li>


<li>
<h3>服务支持 </h3>
<ul>
<li><a href="#">售后服务</a></li>
<li><a href="#">售后政策</a></li>
<li><a href="#">保修服务</a></li>
<li><a href="#">维修报价</a></li>

</ul>
</li>

<li>

<h3>自助服务</h3>
<ul>
<li><a href="#">热点咨询 </a></li>
<li><a href="#">预约购买 </a></li>
<li><a href="#">订单物流 </a></li>

</ul>
</li>

<li>
<h3>媒体中心 </h3>
<ul>
<li><a href="#">新闻动态 </a></li>
<li><a href="#">官方视频 </a></li>
<li><a href="#">图片资源</a></li>


</ul>
</li>


<li>
<h3>关于公司 </h3>
<ul>
<li><a href="#">公司简介</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">加入我们</a></li>
</ul>
</li>

</ul>

<ul class="hh">
<li>400-619-0909</li>
<li>周一至周日 9:00-18:00（仅收市话费）</li>
<li><a>在线帮助</a></li>

</ul>
</div>

<div id="info">
<p>Copyright © 2017, Smartisan Digital Co., Ltd. All Rights Reserved.北京锤子数码科技有限公司</p>
<ul>
<li><a href="#">法律声明</a></li>
<li><a href="#">隐私条款</a></li>
<li><a href="#">开发者中心</a></li>
</ul>
<div class="last">
<span>京ICP备66666666号</span><span>京ICP备99999999号</span>
<span>京ICP备88888888号</span>
</div>

</div>

</footer>



<div id="totop">返回顶部</div>
</div>
<style>

body {
font-family: PingFang SC,Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,
Microsoft Yahei,\5FAE8F6F96C59ED1,STHeiti,\534E65877EC69ED1,sans-serif;
color: #777;
font-size: 14px;background:#f5f5f5
}
*{margin:0;padding:0}
#wrapper{width:auto;position:relative}

header{background:#000;height:100px;position:relative;text-align:center;padding:0 80px }

header h1{float:left;line-height:100px}
header ul.nav-list{list-style:none;display:inline-block;line-height:100px}
header ul.nav-list li{float:left} 
header ul.nav-list a{color: #c8c8c8;display: block;margin:0 35px 0 0;text-decoration:none}
header ul.nav-aside{float:right;line-height:100px;margin-right:50px}
header ul.nav-aside li {float:left;list-style:none}
header ul.nav-aside li  a{color: #c8c8c8;display: block;margin:0 0 0 20px;text-decoration:none}

header div.container h1 a{height:50px;50px;
background:url(file:///C:/Users/admin/Desktop/%E6%8D%95%E8%8E%B7.PNG) no-repeat;color:transparent;font-size:45px;
background-size:contain;
}
#main{width:100%;padding:0 80px}
div#main div.topnav{height:100px;width:100%;position:relative;}
div#main div.topnav >ul{height:100%;}
div#main div.topnav >ul li{float:left;list-style:none;height:100px;line-height:100px;position:relative}
div#main div.topnav >ul li a{display:block;margin:0 50px 50px 0;padding-left:0;text-decoration:none}
 div#main div.topnav >ul li >ul{position:absolute;top:100px;left:0;width:960px;height:350px;display:none;
 border-top:1px solid;background:white }
 div#main div.topnav >ul li:hover >ul{display:block}
#topnav:after{content:"",clear:both;height:0}
#banner{border:1px solid;width:88%;height:500px;border-radius:20px}

#main section.sideimg{width:90%;height:200px;text-align:center;margin:50px 0 }
#main section.sideimg li{display:inline-block;list-style:none;}
#main section.sideimg li img{width:300px;}
section.hotitem {border:1px solid;border-radius:10px;height:500px;width:90%;background:#fff}
section.hotitem h1{border-bottom:1px solid;height:10%;line-height:50px;padding:10px  38px ;background:#f5f5f5;border-radius: 10px 10px 0 0 }
section.hotitem div.container{height:86%;position:relative}
section.hotitem div.container> div{float:left;width:25%;box-sizing:border-box;height:100%;text-align:center;position:relative}
section.hotitem div.container div+div{border-left:1px solid}
section.hotitem div.container  img{margin:20px 0}
section.hotitem div.container   h5{font-size:16px;overflow:hidden;}
section.hotitem div.container  p{padding-top:7px;font-size:12px;color:#b2b2b2;line-height:1.2}
section.hotitem div.container  div div{display:inline-block;font-size:18px;color:#de4037;position:absolute;bottom:15px;left:150px;}
section.hotitem div.container ul{height:18px;position:absolute;bottom:80px;z-index:20;width:100%;left:140px;}
section.hotitem div.container ul li{list-style:none;margin:0 10px;float:left;
border:3px solid #d4d4d4;width:12px;height:12px;border-radius:8px;background:black;}
footer{margin:60px auto 0;border-top:1px solid #e6e6e6;width:100%;height:350px;background:#fff;
position:absolute;padding:0 40px 0 ;}
footer ul{float:left;}
footer a{text-decoration:none}
footer ul:nth-child(1){width:75%;}
footer ul:nth-child(1) h3{padding:0 0 14px;font-size:12px}
footer div#footnav{;height:120px;padding:50px}
footer ul:nth-child(2){width:15%;}
footer ul:nth-child(1) li{float:left;list-style:none;position:relative;width:150px;}
footer ul:nth-child(1) li ul{position:absolute;color:#c3c3c3}
footer ul:nth-child(1) li ul li{font-size:12px;padding:6px 0;}
footer ul:nth-child(2) li{list-style:none;}
footer ul.hh li:first-child{font-size:30px;}
footer ul.hh li:nth-child(2){font-size:12px;margin-top:5px;width:250px}
footer ul.hh li:nth-child(3) a{font-size:14px;margin-top:5px;width:100px;height:40px;display:block;text-align:center;
color:#5079d9;border:1px solid #dcdcdc;line-height:40px;border-radius:5px;margin:20px 0 0 55px;}
footer div#info{padding:40px 0;border-top:1px solid;width:88%;font-size:12px;}
footer div#info p {float:left;width:36%;margin:0 0 0 40px;}
footer div#info ul {width:30%}
footer div#info ul li{float:left;border-left:1px solid;margin-right:10px;padding:0 0 0 10px }
footer div#info ul li{}
footer li{list-style:none;}
footer div.last{clear:both;margin:25px 0 0 40px;color:#bdbdbd;font-size:12px;}
footer div.last span{margin-right:20px}

#totop{position:fixed;     54px;    height: 54px;    bottom: 20px;    right: 17px;    opacity: .62;
z-index:50;background:#ddd;line-height:54px;font-size:12px;cursor: pointer}

 </style>