CSS练习：仿小米官网
代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Zz...</title>
<style>
/*全局样式*/
* {
margin: 0 auto;
padding: 0;
} a {
text-decoration: none;
} ul {
list-style-type: none;
} a:hover {
color: red !important;
} .fl {
float: left;
} .fr {
float: right;
} .clearfix:before,
.clearfix:after {
content: "";
display: block;
clear: both;
} /*顶部导航条样式*/
#site-name {
color: lightcoral;
} .top-nav div a {
color: white;
} .top-nav {
background-color: rgb(51, 51, 51);
width: 100%;
height: 40px;
} .container {
width: 1226px;
margin-left: auto;
margin-right: auto;
} .top-nav .container {
line-height: 40px;
font-size: 12px;
} .top-nav-left span,
.top-nav-right span {
padding-left: 6px;
padding-right: 6px;
} #shop-cart {
margin-left: 12px;
padding-left: 12px;
padding-right: 12px;
background-color: dimgray;
} /*site-header 样式*/
.site-header .container {
height: 100px;
} #header-logo {
margin-top: 25px;
} #header-nav {
line-height: 100px;
margin-left: 186px;
} #header-nav ul li {
padding-right: 12px;
} #header-nav a {
color: black;
} #header-search form {
height: 50px;
width: 300px;
margin-top: 25px;
} #header-search form input {
height: 48px;
width: 244px;
} #header-search form button {
height: 52px;
width: 52px;
outline: 0;
} /*侧栏导航样式*/
.side-bar {
width: 234px;
height: 440px;
background-color: #665E57;
padding-top: 20px;
} .side-bar ul li {
width: 234px;
line-height: 42px;
padding-left: 30px;
color: white;
} .side-bar ul li a {
color: white;
} .side-bar ul li:hover {
background-color: gray;
} .second-ad {
margin-top: 20px;
} .second-ad-right {
width: 978px;
} .second-ad-right ul li {
margin-left: 10px;
} /*限时闪购样式*/
.fp-head-box {
margin-top: 30px;
} .fp-body-box {
margin-top: 15px;
} .fp-body-box .fr {
margin-left: 14px;
} .fp-head-box h2 {
color: #e57061;
} /*横幅广告样式*/
.banner-box {
margin-top: 40px;
} /*page-main样式*/
.page-main {
margin-top: 30px;
} .page-main-head-box {
margin-top: 30px;
} .page-main .goods-box {
margin-top: 15px;
height: 614px;
} .page-main .goods-box-left {
width: 234px;
} .page-main .goods-box-right {
width: 992px;
} .goods-item-box {
width: 234px;
height: 300px;
background-color: #F5F5F5;
margin-left: 14px;
margin-bottom: 14px;
} .goods-item-box .item-img {
margin-top: 42px;
margin-left: 42px;
margin-right: 42px;
} .goods-item-box .item-title,
.goods-item-box .item-price {
text-align: center;
margin-top: 10px;
} /*热评商品样式*/
.comment-goods {
margin-top: 40px;
} .comment-title h2 {
margin-top: 30px;
} .comment-goods .comment-item {
margin-top: 15px;
} .comment-goods .comment-box-first,
.comment-goods .comment-box {
width: 296px;
height: 415px;
background-color: #F5F5F5;
} .comment-goods .comment-box {
margin-left: 14px;
} .comment-item img {
width: 296px;
height: 220px;
} .comment-goods .comment {
height: 72px;
margin: 0 28px 22px;
font-size: 14px;
line-height: 24px;
font-weight: 400;
overflow: hidden;
} .comment-goods .author {
position: relative;
height: 18px;
margin: 0 28px 8px;
padding: 0 10px 0 0;
font-size: 12px;
color: #b0b0b0;
} .comment-goods .info {
margin: 0 30px;
white-space: nowrap;
overflow: hidden;
} /*footer-service样式*/
.footer-service {
width: 100%;
height: 80px;
background-color: #F5F5F5;
margin-top: 30px; } .footer-service .container {
border-bottom: 1px solid salmon;
} .footer-service ul li {
margin-top: 30px;
margin-bottom: 30px;
width: 234px;
text-align: center;
} .footer-service .service-item-first { } .footer-service .service-item {
margin-left: 13px;
} .slogan p{
text-align: center;
color: #999999;
} .slogan {
margin-top: 30px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<!--顶部导航栏 开始-->
<div class="top-nav">
<div class="container clearfix">
<div class="top-nav-left fl">
<span id="site-name">Zz商城</span>
<span><a href="">链接A</a></span>
<span><a href="">链接B</a></span>
<span><a href="">链接C</a></span>
</div>
<div id="shop-cart" class="fr">
<a href="">购物车(0)</a>
</div>
<div class="top-nav-right fr">
<span><a href="">登录</a></span>
<span><a href="">注册</a></span>
<span><a href="">消息通知</a></span>
</div>
</div>
</div>
<!--顶部导航栏 结束-->
<!--site-header 开始-->
<div class="site-header">
<div class="container">
<div id="header-logo" class="fl">
<img src="https://dummyimage.com/50x50/FF6400/?text=Zz" alt="">
</div>
<div id="header-nav" class="fl">
<ul class="clearfix">
<li class="fl"><a href="">Zz会员</a></li>
<li class="fl"><a href="">秒杀</a></li>
<li class="fl"><a href="">优惠券</a></li>
<li class="fl"><a href="">手机</a></li>
<li class="fl"><a href="">电视</a></li>
<li class="fl"><a href="">空调</a></li>
</ul>
</div>
<div id="header-search" class="fr">
<form action="" class="clearfix">
<input type="text" placeholder="搜索 商品/品牌/店铺">
<button class="fr">搜索</button>
</form>
</div>
</div>
</div>
<!--site-header 结束-->
<!--ui-viewport 开始-->
<div class="ui-viewport clearfix">
<div class="container">
<!--侧栏导航 开始-->
<div class="side-bar fl">
<ul>
<li><a href="">家用电器</a></li>
<li><a href="">手机</a>/<a href="">数码</a>/<a href="">电脑</a></li>
<li><a href="">男鞋</a>/<a href="">女鞋</a>/<a href="">包包</a></li>
<li><a href="">零食</a>/<a href="">水果</a></li>
<li><a href="">图书</a>/<a href="">电子书</a></li>
<li><a href="">户外</a>/<a href="">运动</a></li>
<li><a href="">医药保健</a></li>
<li><a href="">手表</a>/<a href="">眼镜</a>/<a href="">饰品</a></li>
<li><a href="">儿童</a>/<a href="">玩具</a></li>
<li><a href="">鲜花</a>/<a href="">家饰</a></li>
</ul>
</div>
<!--侧栏导航 结束-->
<!--主广告区 开始-->
<div class="main-ad fr">
<img src="https://dummyimage.com/992x460/FFA07A/?text=slideshow" alt="">
</div>
<!--主广告区 结束-->
</div>
</div>
<!--ui-viewport 结束-->
<!--副广告区 开始-->
<div class="second-ad">
<div class="container clearfix">
<div class="second-ad-left fl">
<img src="https://dummyimage.com/234x170/0A3650/" alt="">
</div>
<div class="second-ad-right fr">
<ul>
<li class="fr">
<a href=""><img src="https://dummyimage.com/316x170/90EE90/" alt=""></a>
</li>
<li class="fr">
<a href=""><img src="https://dummyimage.com/316x170/8B7D6B/" alt=""></a>
</li>
<li class="fr">
<a href=""><img src="https://dummyimage.com/316x170/EEB4B4/" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
<!--副广告区 结束-->
<!--限时闪购 开始-->
<div class="flash-purchase">
<div class="container clearfix">
<div class="fp-head-box">
<h2>限时闪购</h2>
</div>
<div class="fp-body-box clearfix">
<ul>
<li class="fl">
<a href=""><img src="https://dummyimage.com/234x340/5c9ee0/" alt=""></a>
</li>
<li class="fr">
<a href=""><img src="https://dummyimage.com/234x340/b2e561/" alt=""></a>
</li>
<li class="fr">
<a href=""><img src="https://dummyimage.com/234x340/e561ce/" alt=""></a>
</li>
<li class="fr">
<a href=""><img src="https://dummyimage.com/234x340/e5da61/" alt=""></a>
</li>
<li class="fr">
<a href=""><img src="https://dummyimage.com/234x340/6167e5/" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
<!--限时闪购 结束-->
<!--横幅广告1 开始-->
<div class="banner-box">
<div class="container">
<a href=""><img src="https://dummyimage.com/1226x140/151515/" alt=""></a>
</div>
</div>
<!--横幅广告1 结束-->
<!--page-main 开始-->
<div class="page-main">
<div class="container clearfix">
<div class="page-main-head-box">
<h2>商品</h2>
</div>
<div class="goods-box clearfix">
<div class="goods-box-left fl clearfix">
<a href=""><img src="https://dummyimage.com/234x614/D2B082/" alt=""></a>
</div>
<div class="goods-box-right fr">
<div class="goods-item-box fr">
<div class="item-img">
<a href=""><img src="https://dummyimage.com/150x150/9ea79a/" alt=""></a>
<p class="item-title"><a href="">商品名称</a></p>
<p class="item-price">998元</p>
</div>
</div>
<div class="goods-item-box fr">
<div class="item-img">
<a href=""><img src="https://dummyimage.com/150x150/F55D57/" alt=""></a>
<p class="item-title"><a href="">商品名称</a></p>
<p class="item-price">998元</p>
</div>
</div>
<div class="goods-item-box fr">
<div class="item-img">
<a href=""><img src="https://dummyimage.com/150x150/6a3d29/" alt=""></a>
<p class="item-title"><a href="">商品名称</a></p>
<p class="item-price">998元</p>
</div>
</div>
<div class="goods-item-box fr">
<div class="item-img">
<a href=""><img src="https://dummyimage.com/150x150/62a40a/" alt=""></a>
<p class="item-title"><a href="">商品名称</a></p>
<p class="item-price">998元</p>
</div>
</div>
<div class="goods-item-box fr">
<div class="item-img">
<a href=""><img src="https://dummyimage.com/150x150/0aa466/" alt=""></a>
<p class="item-title"><a href="">商品名称</a></p>
<p class="item-price">998元</p>
</div>
</div>
<div class="goods-item-box fr">
<div class="item-img">
<a href=""><img src="https://dummyimage.com/150x150/7961cc/" alt=""></a>
<p class="item-title"><a href="">商品名称</a></p>
<p class="item-price">998元</p>
</div>
</div>
<div class="goods-item-box fr">
<div class="item-img">
<a href=""><img src="https://dummyimage.com/150x150/38ccb8/" alt=""></a>
<p class="item-title"><a href="">商品名称</a></p>
<p class="item-price">998元</p>
</div>
</div>
<div class="goods-item-box fr">
<div class="item-img">
<a href=""><img src="https://dummyimage.com/150x150/f3d990/" alt=""></a>
<p class="item-title"><a href="">商品名称</a></p>
<p class="item-price">998元</p>
</div>
</div>
</div>
</div> </div>
</div>
<!--page-main 结束-->
<!--横幅广告2 开始-->
<div class="banner-box">
<div class="container">
<a href=""><img src="https://dummyimage.com/1226x140/c3b8c7/" alt=""></a>
</div>
</div>
<!--横幅广告2 结束-->
<!--热评商品 开始-->
<div class="comment-goods">
<div class="container clearfix">
<div class="comment-title">
<h2>热评商品</h2>
</div>
<div class="comment-item">
<div class="comment-box-first fl">
<a href=""><img src="https://www.cnblogs.com/images/cnblogs_com/believepd/1348456/o_shop-site-1.jpg"
alt=""></a>
<p class="comment">超级喜欢！小巧玲珑！音质完美！</p>
<p class="author">来自于 佩奇 的评价</p>
<div class="info">
<span><a href="">Zz随身蓝牙音箱</a></span> | <span class="price">99元</span>
</div>
</div>
<div class="comment-box fr">
<a href=""><img src="https://www.cnblogs.com/images/cnblogs_com/believepd/1348456/t_shop-site-2.jpg"
alt=""></a>
<p class="comment">非常可爱，小宝宝喜欢极了！</p>
<p class="author">来自于 佩奇 的评价</p>
<div class="info">
<span><a href="">Zz智能故事机</a></span> | <span class="price">199元</span>
</div>
</div>
<div class="comment-box fr">
<a href=""><img src="https://www.cnblogs.com/images/cnblogs_com/believepd/1348456/t_shop-site-3.jpg"
alt=""></a>
<p class="comment">样式真可爱！做出的饭全家人都爱吃！</p>
<p class="author">来自于 佩奇 的评价</p>
<div class="info">
<span><a href="">Zz压力电饭煲</a></span> | <span class="price">299元</span>
</div>
</div>
<div class="comment-box fr">
<a href=""><img src="https://www.cnblogs.com/images/cnblogs_com/believepd/1348456/t_shop-site-4.jpg"
alt=""></a>
<p class="comment">外形简洁大方，大爱Zz！真心不错，最主要是性价比高。</p>
<p class="author">来自于 佩奇 的评价</p>
<div class="info">
<span><a href="">Zz空气净化器</a></span> | <span class="price">399元</span>
</div>
</div>
</div>
</div>
</div>
<!--热评商品 结束-->
<!--footer-service 开始-->
<div class="footer-service">
<div class="container clearfix">
<ul>
<li class="service-item-first fl"><a href="">预约维修服务</a></li>
<li class="service-item fr"><a href="">520余家售后网点</a></li>
<li class="service-item fr"><a href="">满150元包邮</a></li>
<li class="service-item fr"><a href="">15天免费换货</a>
<li class="service-item fr"><a href="">7天无理由退换货</a></li>
</ul>
</div>
<div class="slogan"><p>Copyright © 2008 - 2018 Zz.com版权所有</p></div>
</div>
<!--footer-service 结束-->
</body>
</html>
效果：
CSS练习：仿小米官网的更多相关文章
- 利用JQ实现的，高仿 彩虹岛官网导航栏（学习HTML过程中的小记录）
利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录) 作者:王可利(Star·星星) 总结: 今天学习的jQ类库的使用,代码重复的比较多需要完善.严格区分大小写,在 $(" ...
- 高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...
- 一款仿PBA官网首页jQuery焦点图的切换特效
一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...
- 一款jQuery仿海尔官网全屏焦点图特效代码
一款jQuery仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效. 当焦点图切换时,下方的三块小图也相对应的进行切换.并且特效还兼容头疼的IE6.赶快去和谐了它吧! 适用浏览器: ...
- demo 基于html css 实现小米官网部分内容搭建
文件夹目录 mi-site-----------主文件夹 css------------css文件文件夹 fonts.css---矢量图标css index.css---主页面样式css reset. ...
- 小米官网轮播图js+css3+html实现
官网轮播: 我的轮播: 重难点: 1.布局 2.图片和右下角小圆点的同步问题 3.setInterval定时器的使用 4.淡入淡出动画效果 5.左右箭头点击时,图片和小圆点的效果同步 6.另一种轮播思 ...
- 小米官网的css3导航菜单
HTML代码: <div class="nav"> <ul> <li><a href="#">首页</a& ...
- 利用HTML和CSS设计一个静态的“小米商城官网首页”
一.小项目说明 这是个例行的小项目练习,主要利用html和css的基础知识,复刻一个缩减版的小米商城网页.包括[导航栏].[头部logo区,快捷键.搜索框].[网页主体].[网页尾部]几个部分.目前只 ...
- 基于jQuery仿迅雷影音官网幻灯片特效
分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览 源码下载 实现的代码. html ...
随机推荐
- unable to execute dex: multiple dex files Cocos2dxAccelerometer
原文转载:http://discuss.cocos2d-x.org/t/conversion-to-dalvik-format-failed-unable-to-execute-dex-multipl ...
- Oracle 用户管理(二)
1 给某人赋予"系统权限" SQL> grant connect to aobama with admin option 意思是将admin的连接数据库 ...
- ubuntu rdesktop 全屏切换快捷键
rdesktop 全屏之后进行切换 : ctrl + alt +enter
- ios11--UIButton
// // ViewController.m // 02-UIButton(在代码中使用) // #import "ViewController.h" @interface Vie ...
- bzoj1143: [CTSC2008]祭祀river && bzoj27182718: [Violet 4]毕业旅行
其实我至今不懂为啥强联通缩点判入度会错... 然后这个求的和之前那道组合数学一样,就是最长反链=最小链覆盖=最大独立集. #include<cstdio> #include<iost ...
- caffe to tensorflow alexnet model
from kaffe.tensorflow import Network class AlexNet(Network): def setup(self): (self.feed('data') .co ...
- [Codeforces Round495A] Sonya and Hotels
[题目链接] https://codeforces.com/contest/1004/problem/A [算法] 直接按题意模拟即可 时间复杂度 :O(NlogN) [代码] #include< ...
- 洛谷 P3377 模板左偏树
题目:https://www.luogu.org/problemnew/show/P3377 左偏树的模板题: 加深了我对空 merge 的理解: 结构体的编号就是原序列的位置. 代码如下: #inc ...
- webrtc学习资源
http://www.imaotao.cn/project/webrtc-201604
- js获取request参数值（javascript 获取request参数值的方法）
jsp 中的js,可以用el表达式来提取:var value = "${requestScope.XXX}"; 注:XXX为你的参数名 如:http://localhost:808 ...