小米官网首屏纯css代码
小米官网首屏代码（纯CSS编写）
**
1、html部分：
**
小米商城
<!-- bar的内部容器-->
<div class="top-bar w"><!-- 左侧导航的div--><div class="link-bar"><a href="javascript:;">小米商城</a><span class="line">|</span><a href="javascript:;">MIUI</a><span class="line">|</span><a href="javascript:;">loT</a><span class="line">|</span><a href="javascript:;">云服务</a><span class="line">|</span><a href="javascript:;">金融</a><span class="line">|</span><a href="javascript:;">有品</a><span class="line">|</span><a href="javascript:;">小爱开放平台</a><span class="line">|</span><a href="javascript:;">企业团购</a><span class="line">|</span><a href="javascript:;">资质证照</a><span class="line">|</span><a href="javascript:;">协议规则</a><span class="line">|</span><a class="download-app" href="javascript:;">下载app<div class="code"><!-- 创建一个小三角--><i class="arrow"></i><img src="img/code.png" width="84"><span>小米商城App</span></div></a><span class="line">|</span><a href="javascript:;">Select Region</a></div><!-- 购物车--><div class="cart-bar"><a href="javascript:;"><span class="fas fa-shopping-cart"></span>购物车（0）</a>
<div class="cart-info"><span>购物车中还没有商品，赶紧选购吧！</span></div></div><!-- 登录导航--><div class="info-bar"><a href="javascript:;">登录</a><span class="line">|</span><a href="javascript:;">注册</a><span class="line">|</span><a href="javascript:;">消息通知</a></div></div>
<div class="header w">
<h1 class="logo" title="小米官网"><a href="#">小米官网</a></h1>
<div class="header-nav">
<ul class="nav clearfix"><li><a style="visibility: hidden" href="javascript:;">全部商品分类</a>
<ul class="left-nav"><li><a href="javascript:;">手机 电话卡</a></li><li><a href="javascript:;">电视 盒子</a></li><li><a href="javascript:;">笔记本 平板</a></li><li><a href="javascript:;">家电 插线板</a></li><li><a href="javascript:;">出行 穿戴</a></li><li><a href="javascript:;">智能 路由器</a></li><li><a href="javascript:;">电源 配件</a></li><li><a href="javascript:;">健康 儿童</a></li><li><a href="javascript:;">耳机 音箱</a></li><li><a href="javascript:;">生活 箱包</a></li></ul></li><li class="action-hide"><a href="javascript:;">小米手机</a></li><li class="action-hide"><a href="javascript:;">Redmi 红米</a></li><li class="action-hide"<a href="javascript:;">电视</a></li><li class="action-hide"><a href="javascript:;">笔记本</a></li><li class="action-hide"> <a href="javascript:;">家电</a></li><li class="action-hide"><a href="javascript:;">路由器</a></li><li class="action-hide"><a href="javascript:;">智能硬件</a></li><li ><a href="javascript:;">服务</a></li><li><a href="javascript:;">社区</a></li><div class="hide-list"></div></ul></div><div class="search"><form action=""><input type="text">
<a class="left">小米9</a><a class="right">小米9SE</a>
<button type="submit"><i class="fas fa-search"></i></button><div class="searchdown"><ul><li><a href="">小米9</a></li><li><a href="">Redmi K20 pro</a></li><li><a href="">Redmi K20</a></li><li><a href="">Redmi Note 7 pro</a></li><li><a href="">Redmi Note 7 </a></li><li><a href="">小米电视4c </a></li><li><a href="">电视32英寸 </a></li><li><a href="">小爱音箱 </a></li><li><a href="">净水器 </a></li></ul></div></form></div>
</div>
<div class="banner w"><ul class="img-list"><li><a href=""><img src="img/banner/1.jpg" alt=""></a></li><li> <a href=""><img src="img/banner/2.jpg" alt=""></a></li><li> <a href=""><img src="img/banner/3.jpg" alt=""></a></li><li> <a href=""><img src="img/banner/4.jpg" alt=""></a></li><li> <a href=""><img src="img/banner/5.jpg" alt=""></a></li></ul><div class="point"><a class="active" href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a></div><div class="slide"><a class="prev" href=""></a><a class="next" href=""></a></div>
</div><div class="fixed-bar">
<ul><li><a href="javascript:;"><i class="fas fa-mobile-alt"></i></a></li><li><a href="javascript:;"><i class="fas fa-user"></i></a></li><li><a href="javascript:;"><i class="fas fa-tools"></i></a></li><li><a href="javascript:;"><i class="fas fa-server"></i></a></li><li><a href="javascript:;"><i class="fas fa-shopping-cart"></i></a></li></ul></div>
<div class="server w clearfix"><div class="shortcut"><ul class="icon-list"><li><a href="javascript:;"><i class="fas fa-clock"></i>小米秒杀</a></li><li><a href="javascript:;"><i class="fas fa-gift"></i>企业团购</a></li><li><a href="javascript:;"><i class="fas fa-facebook-square"></i>F码通道</a></li><li><a href="javascript:;"><i class="fas fa-sd-card"></i>米粉卡</a></li><li><a href="javascript:;"><i class="fab fa-newspaper"></i>以旧换新</a></li><li><a href="javascript:;"><i class="fas fa-chart-bar"></i>话费充值</a></li></ul></div><div class="ad1"><a class="" href=""><img src="img/11.jpg" alt=""></a></div><div class="ad"><a href=""><img src="img/12.jpg" alt=""></a></div><div class="ad"><a href=""><img src="img/13.jpg" alt=""></a></div>
2、CSS部分：
/首页的样式表/
/设置导航条的容器/
.bar-wrapper{
/宽度就是屏幕的宽度/
/width: 100%;/
/高度/
height: 40px;
/* 设置背景颜色*/
background-color: #333;
}
/设置顶部导航条/
.bar-wrapper .top-bar{
height: 100%;
line-height: 40px;
}
/设置左侧导航条/
.link-bar{
/向左浮动/
float: left;
}
/设置右侧工具/
.info-bar , .cart-bar{
float: right;
}
/下载app的链接/
.link-bar .download-app{
position: relative;
}
/鼠标移入显示二维码/
.link-bar .download-app:hover .code{
display: block;
}
/设置左侧的二维码/
.link-bar .code{
display: none;
width: 124px;
height: 150px;
text-align: center;
background-color: #fff;
position: absolute;
left: -40px;
box-shadow: 0 0 4px rgba(0,0,0,.3);
line-height: 1;
z-index: 999;
}
/设置二维码上方的小三角/
.link-bar .arrow{
/* 开启绝对定位*/
position: absolute;
width: 0;
height: 0;
/* 设置边框*/
border: 10px solid #fff;
/* 去除上边框*/
border-top: none;
/* 设置边框的颜色*/
border-color: transparent transparent #fff;
/* 设置位置*/
top:-10px;
/* 居中*/
left: 0;
right: 0;
margin: 0 auto;
}
/二维码图片/
.code img{
margin: 20px;
}
.link-bar .code span{
font-size: 14px;
color: #333;
}
/设置超链接的样式/
.bar-wrapper a{
/转换为行内块/
/display: inline-block;/
float: left;
/设置高度/
height: 40px;
/设置字体大小/
font-size: 12px;
color: #b0b0b0;
/去除下划线/
text-decoration: none;
vertical-align: top;
}
/鼠标移入的样式/
.bar-wrapper a:hover{
color: #fff;
}
/小竖线/
.bar-wrapper .line{
float: left;
font-size: 12px;
color: #424242;
margin: 0 6px;
}
/设置购物车的条/
.cart-bar{
/开启相对定位/
position: relative;
}
/设置购物车鼠标移入效果/
.cart-bar:hover a{
background-color: #fff;
color: #ff6700;
}
/设置购物车的样式/
.cart-bar a{
float: none;
display: block;
width: 120px;
text-align: center;
background-color: #424242;
margin-left: 15px;
position: relative;
z-index: 1000;
}
/设置购物车的下拉框/
.cart-bar .cart-info{
position: absolute;
width: 316px;
height: 0;
overflow: hidden;
text-align: center;
line-height: 100px;
box-shadow: 0 0 5px rgba(0,0,0,.3);
background-color: #fff;
right: 0;
z-index: 999;
transition: all 0.3s;
}
/鼠标移入，显示购物车详情/
.cart-bar:hover .cart-info{
height: 100px;
}
/头部的wrapper/
.header-wrapper{
position: relative;
}
/设置头部的样式/
.header{
height: 100px;
/position: relative;/
}
/设置logo的样式/
.header .logo{
float: left;
margin-top: 22px;
}
/*
设置logo中链接的样式
*/
.logo a{
display: block;
width: 55px;
height: 55px;
text-indent: -9999px;
background: #ff6700 url("…/img/mi-logo.png") center;
}
/设置头部导航/
.header-nav{
width: 778px;
height: 100px;
line-height: 100px;
float: left;
/margin-left: 65px;/
}
/设置头部导航中的li/
.header-nav > .nav > li{
float: left;
font-size: 16px;
padding-right: 20px;
}
/设置链接的样式/
.header-nav li a{
color: #333333;
text-decoration: none;
}
/超链接移入的样式/
.header-nav li a:hover{
color: #ff6700;
}
/左侧导航条/
.left-nav{
/开启绝对定位/
position: absolute;
height: 440px;
width: 234px;
padding-top: 20px;
background-color: rgba(0,0,0,.6);
top: 100px;
/left: 0;/
margin-left: -55px;
z-index: 999;
}
/设置链接样式/
.left-nav li{
height: 42px;
line-height: 42px;
}
/设置超链接的样式/
.left-nav li a{
display: block;
height: 42px;
color: white;
font-size: 14px;
padding-left: 30px;
}
.left-nav li a::after{
content: ‘\f105’;
font-size: 20px;
font-family: ‘Font Awesome 5 Free’;
font-weight: 900;
float: right;
margin-right: 30px;
}
.left-nav li a:hover{
background-color: #ff6700;
color: #fff;
}
.header-nav .hide-list{
position: absolute;
top: 100px;
height: 0;
overflow: hidden;
left: 0;
/height: 230px;/
width: 100%;
background-color: #ffffff;
z-index: 333333;
}
.header-nav .action-hide:hover ~ .hide-list,
.header-nav .action-hide:hover
{ border-top: 1px solid #b0b0b0;
height: 230px;
}
.header .search{
float: right;
margin-top: 25px;
position: relative;
}
.header .search input[type=“text”]{
float: left;
width: 231px;
height: 48px;
border: 1px solid #e0e0e0;
font-size: 14px;
padding: 0 0px 0 10px;
outline: none;
}
/表单的消失/
.search input[type=“text”]:focus ,
.search input[type=“text”]:focus~button{
border-color: #ff6700;
}
.search input[type=“text”]:focus~.searchdown{
display: block;
border-color: #ff6700;
}
.search >form>a{
display: block;
}
.search input[type=“text”]:focus~a{
display: none;
}
.search .searchdown{
position: absolute;
top:50px;
width: 241px;
height:200px;
border: 1px solid #b0b0b0;
display: none;
z-index: 1111;
}
.search .searchdown li a{
display: block;
text-decoration: none;
font-size: 13px;
padding-top: 3px;
padding-left: 10px;
}
.search .searchdown li a:hover{
color: #ff6700;
background-color: #e0e0e0;
}
/表单消失jieshu/
.header .search button{
float: left;
width: 50px;
height: 50px;
font-size: 20px;
color: #616161;
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-left: none;
padding: 0;
outline: none;
}
.header .search button:hover{
color: #ffffff;
background-color: #ff6700;
}
/点击时表单边框都改变/
.header .search input[type=“text”]:focus,
.header .search input[type=“text”]:focus+button{
border-color:#ff6700;
}
.header .search .left{
position: absolute;
font-size: 12px;
top: 20px;
background-color: #b0b0b0;
left: 210px;
text-align: center;
}
.header .search .right{
position: absolute;
font-size: 12px;
margin:auto;
left: 150px;
top: 20px;
text-align: center;
background-color: #b0b0b0;
}
.header .search .right:hover,.header .search .left:hover{
background-color: #ff6700;
}
.banner{
height: 460px;
width: 1226px;
margin: 0 auto;
position: relative;
}
.banner .img-list li{
position: absolute;
}
.banner img{
width: 100%;
}
.banner .point{
position: absolute;
right: 26px;
bottom: 34px;
}
.banner .point a{
display: block;
float: left;
width: 6px;
height: 6px;
border: 2px solid rgba(255,255,255,.3);
background-color: rgba(0,0,0,.4);
border-radius: 50px;
margin-left: 10px;
}
/.banner .point .active 该点常亮/
.banner .point a:hover,
.banner .point .active{
border-color: rgba(0,0,0,.4);
background-color: rgba(255,255,255,.3);
}
.banner .slide a{
position: absolute;
width: 41px;
height: 69px;
background-image: url("…/img/icon-slides.png");
z-index: 99999;
/* 垂直居中*/
top: 0;
bottom: 0;
margin: auto 0;
}
.slide .prev{
position: absolute;
left: 234px;
background-position: -84px 0;
}
.slide .next{
position: absolute;
right: 0;
background-position: -125px 0;
}
.slide .prev:hover{
background-position: 0 0;
}
.slide .next:hover{
background-position: -42px 0;
}
.fixed-bar{
position: fixed;
width: 25px;
height: 199px;
border: 1px solid #f5f5f5;
top: 300px;
z-index: 888885555;
/* left + margin-left + width + margin_right + right=父元素的宽度
所以： left（auto） + 中线右边的长度(margin-right为负，往右拉他) =父元素的宽度
left 为auto ； right :50%;使设置的元素在屏幕中线位置；
*/
right :50%;
margin-right: -640px;
}
.fixed-bar li{
height: 39px;
width: 25px;
border-bottom: 1px solid #f5f5f5;
}
.fixed-bar li a{
display: block;
font-size: 18px;
text-align: center;
line-height: 39px;
color: #b0b0b0;
}
.fixed-bar li a:hover{
color: #ff6700;
background-color: #b0b0b0;
}
.server{
margin-top: 14px;
}
.server .shortcut{
float: left;
width: 234px;
height: 170px;
background-color: #5f5750;
}
.shortcut .icon-list li{
position: relative;
float: left;
}
.shortcut .icon-list li a{
display: block;
width: 78px;
height: 60px;
color: #dbd6c5;
text-decoration: none;
text-align: center;
margin-top: 25px;
}
.shortcut .icon-list li i{
display: block;
font-size: 18px;
}
.shortcut .icon-list li a:hover{
color: #ffffff;
}
.icon-list li:nth-child(1):before,
.icon-list li:nth-child(2):before,
.icon-list li:nth-child(3):before{
content: ‘’;
height: 1px;
width: 66px;
background-color: #665e57;
/background-color: red;/
position: absolute;
left: 6px;
bottom: 0;
}
.icon-list li:nth-child(1):after,
.icon-list li:nth-child(2):after,
.icon-list li:nth-child(4):after,
.icon-list li:nth-child(5):after{
content: ‘’;
height: 70px;
width: 1px;
background-color: #665e57;
/background-color: red;/
position: absolute;
right: 0;
top:7.5px;
}
.server .ad{
float: left;
width:316px ;
height: 170px;
margin-left: 15px;
}
.server .ad1{
float: left;
width:316px ;
height: 170px;
margin-left: 14px;
}
.server .ad img,.server .ad1 img{
width: 100%;
height: 100%;
}
3、小米官网图片，由于只做了首屏，只做了首屏的尺寸：
小米官网首屏纯css代码相关推荐
- 仿照（小米官网首页轮播图）特效js代码
最近跟轮播图杠上了,以前也接触过这个轮播图的写法,但是一般都是用插件,久而久之就忘记了!昨晚有学习了一下自己写这个js,虽然是依靠零散的记忆写出来的,可能自己并未真正理解吧!!!以下是我写的代码: & ...
- 仿写小米官网 简单的HTML+CSS练习
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
- html制作小米官网代码,仿小米官网(html+js+css)
[实例简介] 学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码 [实例截图] [核心代码] 小米官网(高仿) └── xiaomi ├── css_1 │ ├── financ ...
- 小米官网项目制作——javascript知识分享上
目录 前言 一.整体架构 二.弹出的盒子 1.定位盒子 2.弹出效果 3.其他细节 三.下拉,展开的切换菜单 1.放置盒子 2.切换盒子 3.添加索引 4.侧边展开的盒子 四.轮播图 1.本体的部件 ...
- 仿写小米官网 右边工具导航栏
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
- 电商项目：仿小米官网纯HTML+css布局
前言 时间过得很快,已经步入大三下学期了,浪了大学这几年,这几个星期从新把之前学的html+css系统性复习了一遍,虽然之前也学习过,但Monto觉得无论任何事情,基础是最重要的,任何框架千变万变,但 ...
- 前端700行代码项目练习--小米官网（仅html、css实现）
目录 一.效果展示 二.准备工具 1.css重置样式 2.awesome图标字体 3.各图片 4.title网站图标 三.代码 一.效果展示 二.准备工具 1.css重置样式 请自行查找,CSDN上一 ...
- HTML+CSS小米官网首页 (1页侧拉菜单)
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 ...
- HTML5期末大作业：商城网站设计——防锤子手机商城官网首页模板(HTML+CSS+JavaScript ) 电商网页HTML代码
HTML5期末大作业:商城网站设计--防锤子手机商城官网首页模板HTML+CSS+JavaScript 电商网页HTML代码 学生网页课程设计期末作业下载 商城网页大学生网页设计制作成 临近期末, 你 ...
最新文章
- Iso-Seq3|三代全长转录组分析
- HTML5 Canvas动画效果实现原理
- Python学习：Python简介
- Virtaulbox虚拟机添加磁盘
- 20个优秀的移动(iPhone)网站设计案例
- Java学习之模拟纸牌游戏，List的ArrayList，Map的HashMap，重写Collections类的sort方法对指定类进行通过特定属性排序，输入异常处理等的学习...
- 各Rendering Path技术以及其在Unity中的实现
- C++派生类对象和基类对象赋值
- python正则表达式案例_Python正则表达式使用经典实例
- 如何在Node.js中打印堆栈跟踪？
- Access导入SQL2005
- openstack: No valid host was found. There are not enough hosts available
- Oracle数据库常用脚本
- 如何使用JMeter建立webSocket连接
- pxe网络启动_什么是网络启动（PXE），以及如何使用它？
- oracle 12c PDB 数据库 和mybatis 数据库连接池 的连接问题
- 撰写MLA格式的毕业论文，需留意下边几个文件格式标准
- MIT molecular Biology 笔记8 RNA剪接
- 建立自己公众号题库系统
- 《转贴》机器学习 机器视觉 图像处理 牛人牛站