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,\\5FAE\8F6F\96C5\9ED1,STHeiti,\\534E\6587\7EC6\9ED1,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;width: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; width: 54px; height: 54px; bottom: 20px; right: 17px; opacity: .62;
z-index:50;background:#ddd;line-height:54px;font-size:12px;cursor: pointer}
</style>
版权声明：本文为rain-null原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。