admin管理员组文章数量:1567748
CSS部分
.top-bar-wrapper
{
width: 100%;
height: 40px;
line-height: 40px;
background-color: #333333;
}
.tool-bar a
{
font-size: 14px;
color: #b0b0b0;
display: block;
}
.tool-bar a:hover
{
color: white;
}
.tool-bar .line
{
color: #b0b0b0;
margin-left: 4px ;
margin-right: 4px ;
margin-top: -1px;
}
.service,.tool-bar li
{
float: left;
}
.app
{
position: relative;
}
/*设置app图片上面的小三角
注意这里的li:hover 的用法,因为我们要hover出这个伪元素
*/
li:hover> .app::after
{
content: '';
position: absolute;
width: 0px;
height: 0px;
border: 8px transparent solid;
border-top: none;
border-bottom-color: white;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.app .qr-code
{
/*display: none;*/
position: absolute;/*给二维码开启绝对定位,使其脱离文档流,不占用父元素的宽度*/
width: 124px;
/*height: 148px;*/
height: 0px;
overflow: hidden;
z-index: 9999;
line-height: 1;/*因为前面设置了行高,但是,这里面的文字也是父类容器的子类,会继承属性,所以要从新定义行高,保证字体紧贴图片下边*/
text-align: center;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0 ,0, 0.3);
/* 接下来演示一下,下拉的动画效果,transition 设置属性,以及变化的时间
*/transition: height 300ms;
}
li:hover>.app .qr-code{
/*display: block;*/
height: 148px;
z-index: 9999;
}
.app .qr-code span{
color: black;
}
.qr-code img
{
width: 90px;
margin: 17px 17px;
}
.shopCar
{
float: right;
}
.shopCar a
{
width: 120px;
text-align: center;
}
.shopCar i
{
margin-right: 4px;
}
.shopCar:hover /*绑定父元素,保证弹出层不消失*/
{
background-color: black;
color: orange;
}
.user-info
{
float: right;
}
/*设置header*/
.header
{
height: 100px;
/*background-color: #bfa;*/
}
.logo
{
width: 55px;
height: 55px;
float: left;
position: relative;
overflow: hidden;
margin-top: 22px;
}
.header .logo a
{
position: absolute;
left: 0;
/*background-color: red;*/
transition: left 0.3s;/*这个transition加在这个a这里,直接就让两个a都具有了动画的属性*/
}
.header .logo .mihome
{
left: -55px;
}
.header .logo:hover .milogo
{
left: 55px;
}
.header .logo:hover .mihome
{
left: 0;
}
/*---------------上面是动画效果-------------------*/
/*设置中间导航条*/
.header-wrapper
{
position: relative;
}
.header .nav-wrapper
{
float: left;
margin-left: 7px;
}
.header .nav
{
width: 792px;
/*background-color: #bfa;*/
height: 100px;
line-height: 100px;
padding-left: 58px;
}
.nav > li/* 只让子元素浮动,后代不浮动 */
{
float: left;
}
.all-goods-wrapper
{
position: relative;
}
.left-menu
{
width: 234px;
height: 420px;
background-color: rgba(154,151,153,0.3);
line-height: 1;
position: absolute;
left: -120px;
z-index: 999;
padding:20px 0px;
}
.header .nav-wrapper .left-menu a
{
display: block;
height: 42px;
line-height: 42px;
color: white;
}
.header .nav-wrapper .left-menu li:hover/* 写长一点,增加优先级 */
{
color:white ;
background-color: rgb(255,103,0);
}
.left-menu li
{
padding: 0 30px;
}
.left-menu a i
{
float: right;
line-height: 42px;
}
.nav-wrapper li a
{
color: black;
font-size: 16px;
margin-right: 20px;
}
.nav-wrapper li a:hover
{
color: rgb(255,103,0);
}
.all-goods
{
visibility: hidden;
}
.header .goods-info
{
height: 0px;
width: 100%;
overflow: hidden;
position: absolute;
top:100px;
left: 0px;
z-index: 9999;
transition: height 1s;
/*height: 228px;*/
/*background-color: #bfa;*/
/*border-top: 1px solid rgb(224,224,224);*/
}
.header .nav-wrapper li:not(:first-of-type):not(:nth-child(10)):not(:nth-child(9)):hover ~ .goods-info,/*除了not(),不能混合写,只能一个一个写,因为混合写全部都要失效*/
.goods-info:hover
/*注意:这里有选择器优先级的问题,如果我们把上面那个定义goods-info写在下面,那么就不会出现这个效果*/
{
width: 100%;
height: 228px;
background-color: white;
/*background-color: #bfa;*/
border-top: 1px solid rgb(224,224,224);
box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
z-index: 9999;
}
.search-wrapper
{
width: 296px;
height: 50px;
background-color: red;
float: right;
margin-top: 25px;
border: 1px solid rgb(224,224,224);
}
.search-wrapper .search-inp
{
float: left;
border: none;
padding:0px 10px;
height: 50px;
width: 224px;
font-size: 16px;
/*border: 1px solid rgb(224,224,224);*/
}
.search-wrapper .search-inp:focus/* 鼠标点击之后 的效果设置 */
{
outline: 2px tomato solid;
}
.search-wrapper .search-btn
{
float: left;
height: 50px;
width: 52px;
color: #616161;
font-size: 16px;
}
/*-------------------设置轮播图部分 中间部分----------------------*/
.banner .img-list
{
position: relative;
}
.banner .img-list li
{
position: absolute;
}
.banner .img-list img
{
width: 100%;
}
.banner
{
height: 460px;
position: relative;
}
.pointer
{
position: absolute;
right: 0;
bottom: 0;
margin-right: 30px;
margin-bottom: 30px;
}
.pointer a
{
float: left;
width: 8px;
height: 8px;
border: 2px rgba(255,255,255,0.6) solid ;
border-radius: 50%;
background-color: rgba(0,0,0,.4);
margin-right: 4px;
}
.pointer a:hover,
a.active
{
border: 2px rgba(0,0,0,.4) solid ;
background-color: rgba(255,255,255,0.6);
}
/*右侧固定工具栏*/
.back-top
{
width: 26px;
height: 206px;
background-color: orangered;
position: fixed;/*开启固定定位*/
bottom: 60px;/* */
right: 50%;/* 无论你窗口有多大,我的右边都是窗口的一半 */
margin-right: -639px;
/*
要满足等式:
left+margin-left+width+margin-right+right=包含块的宽度
width固定
right窗口一半
left为auto
margin-left为0
如果我们给margin-right设置成负值,那么这个元素就会自动的向右移动,因为left为auto
*/
}
/*设置中间广告栏*/
.ad
{
height: 170px;
margin-top: 14px
}
.ad .short-cut,
.ad li,
.ad img
{
float: left;
}
.ad .short-cut
{
width: 234px;
height: 170px;
background-color: #5f5750;
margin-right: 14px;
}
.ad .img-list2 li{
width: 316px;
margin-right: 15px;
}
.ad .img-list2 li:last-child
{
margin-right: 0;
}
.ad .img-list2 img
{
width: 100%;
}
.ad .short-cut a
{
display: block;
color: #cfccca;
height: 84px;
width: 76px;
text-align: center;
overflow: hidden;
}
.ad .short-cut i{
display: block;
margin-top: 20px;
margin-bottom: 5px;
font-size: 20px;
}
.ad .short-cut a:hover{
color: white;
}
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MI</title>
<link rel="stylesheet" href="./CSS/base.css">
<link rel="stylesheet" href="./CSS/reset.css">
<link rel="stylesheet" href="./CSS/Index.css">
<link rel="stylesheet" href="./FA/css/all.css">
</head>
<body>
<!--顶部导航条-->
<div class="top-bar-wrapper">
<div class="tool-bar w ">
<ul class="service">
<li><a href="">小米商城</a></li>
<li class="line">|</li>
<li><a href="">MIUI</a></li>
<li class="line">|</li>
<li><a href="">Lot</a></li>
<li class="line">|</li>
<li><a href="">云服务</a></li>
<li class="line">|</li>
<li><a href="">金融</a></li>
<li class="line">|</li>
<li><a href="">有品</a></li>
<li class="line">|</li>
<li><a href="">小爱开放平台</a></li>
<li class="line">|</li>
<li><a href="">企业团购</a></li>
<li class="line">|</li>
<li><a href="">资质证明</a></li>
<li class="line">|</li>
<li><a href="">协议规则</a></li>
<li class="line">|</li>
<li><a href="" class="app">下载APP
<div class="qr-code">
<img src="./小米.png" alt="">
<span>小米商城APP</span>
</div>
</a></li>
<li class="line">|</li>
<li><a href="">Select Location</a></li>
<li class="line">|</li>
</ul>
<ul class="shopCar">
<li><a href="">
<i class="fas fa-shopping-cart"></i>
购物车</a></li>
</ul>
<ul class="user-info">
<li><a href="">登录</a></li>
<li class="line">|</li>
<li><a href="">注册</a></li>
<li class="line">|</li>
<li><a href="">消息通知</a></li>
<li class="line">|</li>
</ul>
</div>
</div>
<!--设置头部-->
<div class="header-wrapper">
<div class="header w">
<h1 class="logo" title="小米">
<a href="" class="milogo"><img src="小米logo.png" alt="" ></a>
<a href="" class="mihome"><img src="Mihome.png" alt="" ></a>
</h1>
<div class="nav-wrapper">
<ul class="nav clearfix">
<li class="all-goods-wrapper">
<a href="" class="all-goods">全部商品分类</a>
<ul class="left-menu">
<li>
<a href="">手机 电话卡
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="">电视 盒子
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="">笔记本 显示器 平板
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="">家电 插线板
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="">出行 穿戴
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="">智能 路由器
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="">电源 配件
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="">健康 儿童
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="">耳机 音响
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="">生活箱包
<i class="fas fa-angle-right"></i>
</a>
</li>
</ul>
</li>
<li><a href="">小米手机</a></li>
<li><a href="">Redmi 红米</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>
<!-- 创建弹出层-->
<div class="goods-info">
</div>
</ul>
</div>
<div class="search-wrapper">
<form action="#" class="search">
<input type="text" class="search-inp"><button class="search-btn">
<i class="fas fa-search"></i>
</button>
<!-- 表单元素都是行内块,也就是说这个搜索框和按钮之间如果不写在一行,那么就会出现空隙
<button class="search-btn">
<i class="fas fa-search"></i>
</button>-->
</form>
</div>
</div>
</div>
<!--设置而轮播图banner-->
<div class="banner-wrapper">
<div class="banner w">
<ul class="img-list w">
<li><a href=""><img src="./background-pics/backpic1.jpg" alt=""></a></li>
<li><a href=""><img src="./background-pics/backpic2.jpg" alt=""></a></li>
<li><a href=""><img src="./background-pics/backpic3.jpg" alt=""></a></li>
<li><a href=""><img src="./background-pics/backpic4.jpg" alt=""></a></li>
</ul>
<div class="pointer">
<a class="active" href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>
</div>
</div>
<div class="back-top"></div>
<div class="ad w">
<ul class="short-cut">
<li><a href="">
<i class="fas fa-clock"></i>
小米秒杀</a></li>
<li><a href="">
<i class="fas fa-angle-right"></i>
企业团购</a></li>
<li><a href="">
<i class="fas fa-map-marked"></i>
F码通道</a></li>
<li><a href="">
<i class="fas fa-star"></i>
米粉卡</a></li>
<li><a href="">
<i class="fab fa-accusoft"></i>
以旧换新</a></li>
<li><a href="">
<i class="fab fa-weibo"></i>
话费充值</a></li>
</ul>
<ul class="img-list2">
<li><a href=""><img src="../MI/background-pics/ad01.jpg" alt=""></a></li>
<li><a href=""><img src="../MI/background-pics/ad02.jpg" alt=""></a></li>
<li><a href=""><img src="../MI/background-pics/ad03.jpg" alt=""></a></li>
</ul>
</div>
</body>
</html>
版权声明:本文标题:小米商城官网部分代码 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1726414119a1069599.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论