仿小米商城页面和简单效果

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>小米商城</title><link rel="stylesheet" type="text/css" href="css/reset.css"><link rel="stylesheet" type="text/css" href="css/fonts.css"><link rel="stylesheet" type="text/css" href="css/index.css"><script src="./js/jquery.min.js"></script><script src="./js/index.js"></script><link rel="stylesheet" href="./css/slick.css"><link rel="stylesheet" href="./css/slick-theme.css"><script src="./js/slick.min.js"></script></head>
<body><!-- 顶部栏 --><div class="topBar"><div class="container"><div class="topBar_list"><a href="#">小米商城</a><span>|</span><a href="#">MIUI</a><span>|</span><a href="#">loT</a><span>|</span><a href="#">云服务</a><span>|</span><a href="#">金融</a><span>|</span><a href="#">有品</a><span>|</span><a href="#">小爱开放平台</a><span>|</span><a href="#">政企服务</a><span>|</span><a href="#">资质证照</a><span>|</span></div><div class="shop"><a href="#"><i class="iconfont" style="font-size: 14px;">&#xe61b;</i>购物车(0)</a></div><div class="login"><a href="#">登录</a><span>|</span><a href="#">注册</a><span>|</span><a href="#">消息通知</a></div></div></div><!-- 导航栏 --><div class="header"><div class="container"><div class="site-logo"><a href="#"><img src="data:images/logo.png"></a></div><div class="site-list"><ul class="clearfix"><li class="site-category"><a href=""><img src="data:images/mifen.gif"></a><!-- 侧边栏 --><div class="category-list"><ul class="box-01"><li><a href="#">手机 电话卡<span class="iconfont">&#xe605;</span></a><ul class="box-01-1"><li><a href="">小米手机</a></li></ul></li><li><a href="#">电视 盒子<span class="iconfont">&#xe605;</span></a><ul class="box-01-1"><li><a href="">小米手机</a></li></ul></li><li><a href="#">笔记本 平板<span class="iconfont">&#xe605;</span></a><ul class="box-01-1"><li><a href="">小米手机</a></li></ul></li><li><a href="#">家电 插线板<span class="iconfont">&#xe605;</span></a><ul class="box-01-1"><li><a href="">小米手机</a></li></ul></li><li><a href="#">出行 穿戴<span class="iconfont">&#xe605;</span></a><ul class="box-01-1"><li><a href="">小米手机</a></li></ul></li><li><a href="#">智能 路由器<span class="iconfont">&#xe605;</span></a><ul class="box-01-1"><li><a href="">大米手机</a></li></ul></li><li><a href="#">电源 配件<span class="iconfont">&#xe605;</span></a><ul class="box-01-1"><li><a href="">白米手机</a></li></ul></li><li><a href="#">健康 儿童<span class="iconfont">&#xe605;</span></a><ul class="box-01-1"><li><a href="">玉米手机</a></li></ul></li><li><a href="#">耳机 音响<span class="iconfont">&#xe605;</span></a><ul class="box-01-1"><li><a href="">黑米手机</a></li></ul></li><li><a href="#">生活 箱包<span class="iconfont">&#xe605;</span></a><ul class="box-01-1"><li><a href="">红米手机</a></li></ul></li></ul></div></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><li><a href="#">路由器</a></li><li><a href="#">智能硬件</a></li><li><a href="#">服务</a></li><li><a href="#">社区</a></li></ul></div><div class="content-desc"><div class="container"><!-- 标题 --><div class="box-hd"><h2>手机</h2><div class="more"><a href="#">查看全部<i class="iconfont">&#xe605;</i></a></div></div><!-- 右侧侧边栏 --><div class="arrow-right"><li><a href=""><i></i><h3>手机APP</h3></a></li><li><a href=""><i></i><h3>手机APP</h3></a></li><li><a href=""><i></i><h3>手机APP</h3></a></li><li><a href=""><i></i><h3>手机APP</h3></a></li><li><a href=""><i></i><h3>手机APP</h3></a></li></div><!-- 中间轮播图 --><div class="center"><div class="banner"><div><div class="banner-son"><a href=""><img src="data:images/yuan.jpg" alt="" height="460px" width="1226px"></a></div></div><div><div class="banner-son"><a href="" class="t1"></a></div></div><div> <div class="banner-son"><a href="" class="t2"></a></div></div><div class="clear-both"></div></div></div><div class="content-sub"><!-- 向导左 --><div class="content-channel"><ul class="channel-list clearfix"><li><a href="#"><i class="iconfont">&#xe641;</i>选购手机</a></li><li><a href="#"><i class="iconfont">&#xe790;</i>企业团购</a></li><li><a href="#"><i class="iconfont">&#xe603;</i>F码通道</a></li><li><a href="#"><i class="iconfont">&#xe602;</i>米粉卡</a></li><li><a href="#"><i class="iconfont">&#xe60f;</i>以旧换新</a></li><li><a href="#"><i class="iconfont">&#xe601;</i>话费充值</a></li></ul></div><!-- 向导右 --><div class="content-list"><ul class="clearfix"><li><a href="#"><img src="data:images/image1.jpg"></a></li><li><a href="#"><img src="data:images/image2.jpg"></a></li><li><a href="#"><img src="data:images/image3.jpg"></a></li></ul></div></div></div><div class="content-banner"><div class="container"><a href="#"><img src="data:images/banner.jpg"></a></div></div></div><!-- 内容详情 --><div class="content-desc"><div class="container"><!-- 标题 --><div class="box-hd"><h2>手机</h2><div class="more"><a href="#">查看全部<i class="iconfont">&#xe605;</i></a></div></div><!-- 内容 --><div class="box-bd"><div class="row clearfix"><!-- 内容左边 --><div class="row-l"><a href="#"><img src="data:images/iphone.jpg"></a></div><!-- 内容右边 --><div class="row-r"><ul><li><!-- 图像 --><div class="figure"><a href="#"><img src="data:images/figure1.jpg"></a></div><!-- 标题 --><h3 class="title"><a href="#">小米9 6GB+128GB</a></h3><p class="desc">骁龙855，索尼4800万超广角微距三摄</p><p class="price"><span class="num">2999</span>元</p><div class="flag flag-new">新品</div></li><li><!-- 图像 --><div class="figure"><a href="#"><img src="data:images/figure1.jpg"></a></div><!-- 标题 --><h3 class="title"><a href="#">小米9 6GB+128GB</a></h3><p class="desc">骁龙855，索尼4800万超广角微距三摄</p><p class="price"><span class="num">2999</span>元</p><div class="flag flag-new">新品</div></li><li><!-- 图像 --><div class="figure"><a href="#"><img src="data:images/figure1.jpg"></a></div><!-- 标题 --><h3 class="title"><a href="#">小米9 6GB+128GB</a></h3><p class="desc">骁龙855，索尼4800万超广角微距三摄</p><p class="price"><span class="num">2999</span>元</p><div class="flag flag-new">新品</div></li><li><!-- 图像 --><div class="figure"><a href="#"><img src="data:images/figure1.jpg"></a></div><!-- 标题 --><h3 class="title"><a href="#">小米9 6GB+128GB</a></h3><p class="desc">骁龙855，索尼4800万超广角微距三摄</p><p class="price"><span class="num">2999</span>元</p><div class="flag flag-new">新品</div></li><li><!-- 图像 --><div class="figure"><a href="#"><img src="data:images/figure1.jpg"></a></div><!-- 标题 --><h3 class="title"><a href="#">小米9 6GB+128GB</a></h3><p class="desc">骁龙855，索尼4800万超广角微距三摄</p><p class="price"><span class="num">2999</span>元</p><div class="flag flag-new">新品</div></li><li><!-- 图像 --><div class="figure"><a href="#"><img src="data:images/figure1.jpg"></a></div><!-- 标题 --><h3 class="title"><a href="#">小米9 6GB+128GB</a></h3><p class="desc">骁龙855，索尼4800万超广角微距三摄</p><p class="price"><span class="num">2999</span>元</p><div class="flag flag-new">新品</div></li><li><!-- 图像 --><div class="figure"><a href="#"><img src="data:images/figure1.jpg"></a></div><!-- 标题 --><h3 class="title"><a href="#">小米9 6GB+128GB</a></h3><p class="desc">骁龙855，索尼4800万超广角微距三摄</p><p class="price"><span class="num">2999</span>元</p><div class="flag flag-new">新品</div></li><li><!-- 图像 --><div class="figure"><a href="#"><img src="data:images/figure1.jpg"></a></div><!-- 标题 --><h3 class="title"><a href="#">小米9 6GB+128GB</a></h3><p class="desc">骁龙855，索尼4800万超广角微距三摄</p><p class="price"><span class="num">2999</span>元</p><div class="flag flag-new">新品</div></li></ul></div></div></div></div></div><!-- 脚部 --><div class="footer"><div class="container"><div class="footer-service"><ul class="clearfix"><li class="first"><a href="#"><i class="iconfont">&#xe629;</i>预约维修服务</a></li><li><a href="#"><i class="iconfont">&#xe629;</i>预约维修服务</a></li><li><a href="#"><i class="iconfont">&#xe629;</i>预约维修服务</a></li><li><a href="#"><i class="iconfont">&#xe629;</i>预约维修服务</a></li><li><a href="#"><i class="iconfont">&#xe629;</i>预约维修服务</a></li></ul></div><div class="footer-links clearfix"><dl class="col-links"><dt>帮助中心</dt><dd>账户管理</dd><dd>购物指南</dd><dd>订单操作</dd></dl><dl class="col-links"><dt>帮助中心</dt><dd>账户管理</dd><dd>购物指南</dd><dd>订单操作</dd></dl><dl class="col-links"><dt>帮助中心</dt><dd>账户管理</dd><dd>购物指南</dd><dd>订单操作</dd></dl><dl class="col-links"><dt>帮助中心</dt><dd>账户管理</dd><dd>购物指南</dd><dd>订单操作</dd></dl><dl class="col-links"><dt>帮助中心</dt><dd>账户管理</dd><dd>购物指南</dd><dd>订单操作</dd></dl><dl class="col-links"><dt>帮助中心</dt><dd>账户管理</dd><dd>购物指南</dd><dd>订单操作</dd></dl><div class="col-contact"><p class="iphone">400-100-5678</p><p>周一至周日 8:00-18:00<br>（仅收市话费）</p><a href="#"><i class="iconfont">&#xe641;</i>联系客服</a></div></div></div></div></body>
</html>

CSS

body{font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;color: #333;
}
/*小米顶部css*/
.topBar{width: 100%;height: 40px;background-color: #333;
}
.container{width: 1226px;height: 100%;margin: 0 auto;
}
.topBar .topBar_list{float: left;
}
.topBar .shop{float: right;width: 120px;margin-left: 15px;height: 40px;line-height: 40px;text-align: center;background-color: #424242;
}
.topBar .login{float: right;
}
.topBar a{color: #b0b0b0;font-size: 12px;display: inline-block;line-height: 40px;
}
.topBar .shop a{width: 120px;height: 40px;display: inline-block;
}
.topBar a:hover{color: #fff;
}
.topBar span{color: #424242;margin: 0 .5em;
}
/*小米顶部end*/
/*小米导航栏start*/
.header{height: 100px;
}
.header .site-logo{float: left;width: 62px;margin-top: 22px;
}
.header .site-logo a{display: block;width: 56px;height: 56px;
}
.header .site-list{float: left;width: 850px;
}
.header .site-list>ul{width: 820px;height: 88px;padding: 12px 0 0 30px;font-size: 16px;
}
.header .site-list>ul>li{float: left;
}
.header .site-list>ul>li>a{/*24px*/display: block;padding: 26px 10px 38px;color: #333;
}
.header .site-list>ul>li>a:hover{color: #ff6700;
}
.header .site-list>ul .site-category>a{padding: 0;
}
.header .site-list>ul>li.site-category{position: relative;z-index: 3;
}
.header .site-list>ul>li.site-category .category-list{position: absolute;top: 88px;left: -92px;width: 234px;height: 460px;background-color: rgba(0,0,0,0.6);
}.category-list>ul {width: 234px;height: 420px;padding: 20px 0;
}
.category-list>ul>li{height: 42px;
}
.category-list>ul>li>a{padding-left: 30px;display: block;height: 42px;line-height: 42px;font-size: 14px;color: #fff;position: relative;
}
.category-list>ul>li>a:hover{background-color: #ff6700;
}
.category-list>ul>li>a>span{position: absolute;top: 12px;right: 20px;font-size: 16px;line-height: 16px;
}.header .site-search{float: right;width: 296px;margin-top: 25px;
}
.header .site-search form {position: relative;width: 296px;height: 50px;
}
.header .site-search form  .search-text{/*245px*/width: 223px;height: 48px;border: 1px solid #e0e0e0;font-size: 14px;padding: 0 10px;float: left;
}
.header .site-search form  .search-btn{margin-left: -1px;float: left;width: 50px;height: 50px;border: 1px solid #e0e0e0;
}
.header .site-search form  .search-word{position: absolute;font-size: 12px;top: 14px;right: 65px;
}
.header .site-search form  .search-word a{display: inline-block;margin-left: 5px;padding: 0 5px;background-color: #eee;color: #757575;
}
.header .site-search form  .search-word a:hover{background-color: #ff6700;color: #fff;
}
.box-01 ul{height: 460px;width: 992px;position: absolute;left: 234px;top:0;background-color: #fff;display: none;}
.box-01 ul li{margin-left: 60px;margin-top: 20px;float: left;}
/* 右侧侧边栏 */
.arrow-right{height: 460px;width: 84px;position: fixed;top:20px;right: 0px;background-color: #fff;}
.arrow-right li{list-style: none;height: 92px;width: 100%;border: 1px solid #b0b0b0;
}
.arrow-right li a{height: 92px;line-height: 92px;text-align: center;color: black;}/*小米导航栏end*//* 中间轮播图 */
.boby{position: relative;
}
.banner {height: 460px;width: 1226px;overflow: hidden;}
.banner-son{height: 100%;width: 100%;background-color: blue;
}/*向导样式start*/
.content-sub{margin-top: 18px;overflow: hidden;
}
.content-sub .content-channel{float: left;width: 234px;
}
.content-sub .content-channel ul{background: #5f5750;font-size: 12px;text-align: center;
}
.content-sub .content-channel ul li{float: left;width: 33.33%;height: 85px;
}
.content-sub .content-channel ul li a{display: block;padding-top: 18px;font-size: 12px;color: rgba(255,255,255,0.7);
}
.content-sub .content-channel ul li a i{display: block;font-size: 24px;
}
.content-sub .content-list{float: left;width: 992px;
}
.content-sub .content-list{float: left;width: 992px;
}
.content-sub .content-list ul {width: 100%;
}
.content-sub .content-list ul  li{float: left;width: 33.33%;text-align: right;
}
.content-sub .content-list ul  li a{display: block;height: 170px;
}
.content-sub .content-list ul  li a img{width: 316px;height: 170px;
}
/*向导样式end*/
.content-banner{margin-top: 36px;margin-bottom: 30px;
}
.content-banner a{display: block;width: 1226px;height: 120px
}.content-banner a img{width: 1226px;height: 120px
}
/*小米站点内容end*/
/*小米内容描述start*/
.content-desc{padding-top: 22px;background-color: #f5f5f5;
}
/*内容详情标题start*/
.content-desc .box-hd{margin-bottom: 15px;height: 58px;position: relative;
}
.content-desc .box-hd h2{font-size: 22px;font-weight: 200;line-height: 58px;color: #333;margin-left: 20px;
}
.content-desc .box-hd .more{height: 58px;line-height: 58px;position: absolute;right: 0;top: 0;margin-right: 30px;
}
.content-desc .box-hd .more a{font-size: 16px;line-height: 58px;color: #424242;
}
.content-desc .box-hd .more a i{width: 12px;height: 12px;padding: 4px;margin-left: 8px;border-radius: 12px;background-color: #b0b0b0;color: #fff;font-size: 12px;vertical-align:2px;
}
.content-desc .box-hd .more:hover a{color: #ff6700;
}
.content-desc .box-hd .more:hover a i{background-color: #ff6700;
}/*内容详情start*/
.box-bd .row-l{float: left;width: 234px;
}
.box-bd .row-r{float: left;width: 992px;
}
.box-bd .row-l a{display: block;width: 100%;height: 100%;
}.box-bd .row-l a img{width: 234px;height: 614px;
}
.box-bd .row-r ul{overflow: hidden;
}
.box-bd .row-r ul li{float: left;height: 260px;padding: 20px 0;background-color: #fff;width: 234px;/*234*4 = 936 + 56 = 992px*/position: relative;margin-left: 14px;margin-bottom: 14px;
}
.box-bd .row-r ul li .figure{width: 160px;height: 160px;margin: 0 auto 18px;}
.box-bd .row-r ul li .figure a{display: block;
}
.box-bd .row-r ul li .figure a img{width: 160px;height: 160px;
}
.box-bd .row-r ul li .title{font-size: 14px;font-weight: 400;text-align: center;
}
.box-bd .row-r ul li .title a{color: #333;
}
.box-bd .row-r ul li .desc{height: 18px;font-size: 12px;text-align: center;color: #b0b0b0;margin: 0 10px 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.box-bd .row-r ul li .price{text-align: center;color: #ff6700;
}
.box-bd .row-r ul li  .flag{position: absolute;top: 0;left: 0;width: 64px;height: 20px;background-color: #83c44e;text-align: center;color: #fff;left: 50%;margin-left: -32px;
}
/*小米脚部样式start*/
.footer .footer-service{padding: 27px 0;border-bottom: 1px solid #e0e0e0;
}
.footer .footer-service ul li{float: left;width: 19.8%;height: 25px;font-size: 16px;line-height: 25px;text-align: center;border-left: 1px solid #e0e0e0;
}
.footer .footer-service ul li.first{border-left: 0;
}
.footer .footer-service ul li a{color: #616161;
}
.footer .footer-service ul li .iconfont{font-size: 24px;margin-right: 6px;line-height: 24px;vertical-align: -4px;
}
.footer .footer-links{padding: 40px 0;
}
.footer .footer-links dl{float: left;width: 160px;height: 112px;
}
.footer .footer-links dl dt{margin-bottom: 26px;font-size: 14px;color: #424242;
}
.footer .footer-links dl dd{font-size: 12px;margin-top: 10px;color: #757575;cursor: pointer;
}
.footer .footer-links dl dd:hover{color: #ff6700;
}
.footer .footer-links .col-contact{float: right;width: 251px;height: 112px;border-left: 1px solid #e0e0e0;text-align: center;
}
.footer .footer-links .col-contact .iphone{margin-bottom: 5px;font-size: 22px;color: #ff6700;
}
.footer .footer-links .col-contact p{margin-bottom: 16px;font-size: 12px;
}
.footer .footer-links .col-contact a{display: inline-block;width: 118px;height: 28px;border: 1px solid #ff6700;color: #ff6700;font-size: 12px;
}
.footer .footer-links .col-contact a:hover{background-color: #ff6700;color: #fff;
}
/*小米脚部样式end*/
.clearfix::after{content: '';clear: both;display: block;
}

js部分：轮播图上运用了slick插件来实现，商品导航栏的弹出用了jq的hover来实现。

$(function(){$('.banner').slick({autoplay: true,autoplaySpeed: 2000,});$('.box-01>li').hover(function(){$(this).find('ul').stop().toggle();})});

仿小米商城页面和简单效果相关推荐

开博第一篇作品-C#winform版《仿360杀毒》页面切换动画效果(内含源码)
C#winform版 <仿360杀毒>页面切换动画效果昨天跟一个同事聊天,谈到了360杀毒的页面效果不错,我们所做的winform页面都是拖控件还是拖控件,不能吸引客户的注意力,想改成3 ...
仿小米商城和登录的静态页面
仿小米商城和登录的静态页面以下仅为参考,下载学习请前往本人gitee仓库主页(index).html index.css search.js login.html login.css login. ...
一个炫酷的仿雷达扫描和扩散效果——自定义View就是这么简单
高仿雷达扫描效果和仿水波纹中心扩散效果,手把手教你撸一个炫酷的自定义view. 于亚豪的博客地址: blog.csdn.net/androidstar- 我们先看效果图吧 Markdown Markd ...
微信小程序仿支付宝年账单页面滑动的效果展示
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 近来要做一个年账单页面,类似于支付宝年账单,就是对一年下单的总结,但是支付宝页 ...
HTML期末大作业~仿小米商城网页设计模板(HTML+CSS+JavaScript)
HTML期末大作业~基于HTML+CSS+JavaScript仿小米商城(功能齐全) 关于HTML期末网页制作,大作业A+水平 ~仿小米商城网页作业HTML+CSS+JavaScript实现,共有登录 ...
package.json 封装 vue模块_vue仿小米商城 -- 我知道的都在这里了
vue仿小米商城 -- 小作坊实战记录这是一个仿小米商城的vue全家桶项目,点击预览项目环境介绍: 系统:macos 包管理工具: yarn Node: v12.4.0 项目会完成的页面和功能: ...
自定义View之仿QQ运动步数进度效果
前言今天接着上一篇来写关于自定义View方面的东西,我是近期在学习整理这方面的知识点,所以把相关的笔记都放到这个Android自定义View的专栏里了,方便自己下次忘记的时候能回来翻翻,今天的内容是 ...
小程序之仿小米商城Lite
前言关于小程序,在这里有一句话送给正准备阅读的你-世界上本没有坑,路走的多了就有了:世界上本没有路,坑填的多了就有了.嗯~~~这句话就是作为第一次做仿小程序项目的我,历经'磨难'得出来的肺腑之言.好 ...
仿蚂蚁森林能量球效果遇到的问题记录
仿蚂蚁森林能量球效果遇到的问题记录常规先上图前提内容仿做一个蚂蚁森林的能量球效果,计划使用属性动画,来实现能量球上下摆动,然后点击能量球有一个收集的动画. 本来以为就这么几个简单的需求不会太难, ...

仿小米商城页面和简单效果

仿小米商城页面和简单效果相关推荐

最新文章

热门文章