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>
html+css模仿的锤子官方首页的更多相关文章
- css模仿微信弹出菜单
css模仿微信弹出菜单 效果图: html: <div class="action-sheet-backdrop"> <div class="act ...
- 2018.7.1 css项目之模仿满屋花首页css+idv布局实现
可以分开写 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...
- 纯css模仿天猫首页
<style> *{margin:0;padding:0} li{list-style:none} a{text-decoration:none} #wrapper{font: 12px/ ...
- css模仿百度首页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【HTML】实战阿里云src页面css模仿基础学习
实战结果页面gif图片 阿里云src首页模仿完整代码(500行左右) <!DOCTYPE html> <html> <head> <meta charset= ...
- div+css模仿登录界面
我的代码,这种方式形成了遮罩层,遮罩层的"登录"按钮仍可被点击,非我想要的. <!DOCTYPE html> <html lang="en"& ...
- JS，CSS，HTML制作网页首页，视频轮播，隐藏点击等等。
在整个项目中,总共写了1000+的代码,可以更加简单优化的.整个主页交互效果能基本,包括轮播,视频,点击变化形状,移入蒙版,瀑布流加载滑动,旋转等等.轮播导航没有完全做完,暂时做了往右无限推动.个人觉 ...
- js+css模仿打字效果
1.效果 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> ...
- css模仿ipad的日历
https://www.cnblogs.com/sandraryan/ 题外话之:最近的练习用js之类的写起来会简单点,但是为了巩固基础,只好html和css硬怼页面X﹏X 这是一个日历的代码 注释有 ...
随机推荐
- 关闭tensorflow运行时的警告信息
执行简单的矩阵相乘的程序: import tensorflow as tf m1 = tf.constant([[3,3]]) m2 = tf.constant([[2],[3]]) product ...
- Angular material mat-icon 资源参考_Places
ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...
- @RequestMapping的value属性
package com.zby.controller; import javax.servlet.http.HttpServletRequest; import org.springframework ...
- DES加密之强制更新下载分离器
数据加密算法(Data Encryption Algorithm,DEA)是一种对称加密算法,很可能是使用最广泛的密钥系统,特别是在保护金融数据的安全中,最初开发的DEA是嵌入硬件中的.通常,自动取款 ...
- 与native交互时会出现的问题
1.jsbridge: 可以用jsbridge与native交互,这属于第三方库,前端后端都需要加jsbridge 2.可以直接调用原生的方法,ios: window.webkit.message ...
- [JAVA]流控及超流控后的延迟处理
流控检查(每半秒累计,因此最小留空阀值只能做到每秒2条): import java.text.SimpleDateFormat; import java.util.Date; import java. ...
- db2 monitor event
1.创建事件监控器至少需要哪些权限? DBADM authority SQLADM authority 2.事件监控器的种类有哪些? 3. db2 flush event monitor eventm ...
- selenium+Python(alert 、confirm 、prompt 的处理)
alert\confirm\prompt 弹出框操作主要方法有: text 返回 alert/confirm/prompt 中的文字信息 accept 点击确认按钮 dismiss 点击取消按钮, ...
- ruby中的\z与\Z区别
s = "this is\nthe name\n" puts "--------------" puts s.match(/name\Z/) puts s.ma ...
- 移动端手势事件 hammer.JS插件
一.引入hammer.JS 1.下载地址:http://download.csdn.net/detail/webxiaoma/9872249 2.官网地址:http ...