小米官网
程序员文章站
2024-03-16 17:49:28
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.white_nav{
width: 100%;
height:100px;
line-height: 100px;
clear: both;
position: relative;
}
li{
list-style-type: none;
}
a{
text-decoration: none;
}
.logo,.mi_nav{
float: left;
margin-left: 119px;
}
.mi_nav>li{
float: left;
}
.logo{
margin-top:28px;
margin-right:0px;
}
.mi_nav>li>a{
color:#757575;
font-size: 16px;
margin-right:20px;
}
.mi_nav>li>a:hover{
color:#ff6700;
}
.mi_nav{
width:1000px;
}
.mi_nav>.search{
float:right;
}
.search>input{
height:48px;
width:243px;
border:1px solid #e0e0e0;
border-right: none;
transition: .3s;
}
.search>button{
width:50px;
height:52px;
border:1px solid #e0e0e0 ;
font-weight: bold;
outline:none;
background-color: #fff;
transition:.3s;
}
.search>button:hover{
background-color: #ff6700;
color:#fff;
border:#ff6700;
}
.search>input:focus,.search>input:focus+button{
border-color:#ff6700;
}
.mi_nav_hidden{
width:100%;
height:230px;
background-image: url(img/手机图像2.jpg);
position: absolute;
left:0px;
display: none;
transition: 3s;
z-index: 88;
}
.mi_nav>li:hover .mi_nav_hidden{
display: block;
}
/*以上为导航栏*/
/*轮播图*/
.car{
width: 1224px;
height:460px;
background-image: url(img/轮播图1.jpg);
background-size:cover;
margin-left: 118px;
animation: lunbo 10s infinite alternate;
position: relative;
}
@-webkit-keyframes lunbo{
0%{
background-image: url(img/轮播图1.jpg);
}
25%{
background-image: url(img/轮播图2.jpg);
}
50%{
background-image: url(img/轮播图3.jpg);
}
75%{
background-image: url(img/轮播图4.jpg);
}
}
/*滑动图*/
.huadong{
width:234px;
height:460px;
background-color: rgba(0,0,0,.5);
position: relative;
box-sizing: border-box;
}
.huadong li{
height: 40px;
line-height: 50px;
padding-left: 47px;
}
.huadong li a{
color:white;
}
.huadong>ul{
margin-top: 30px;
text-align: left;
padding: 0px;
}
.huadong li:hover{
background-color: #FF6700;
}
.huadong span{
margin-left: 80px;
color: white;
}
.huadong_r{
width:700px;
height:460px;
background-image:url(img/手机图像3.jpg);
position: absolute;
top:0px;
left:234px;
box-shadow: 5px 5px 10px white ;
display: none;
}
.huadong li:hover>.huadong_r{
display: block;
}
.prev,.next{
top:50%;
font-size: 30px;
position: absolute;
display:block;
color: white;
cursor: pointer;
}
.prev{
left:234px;
}
.next{
left:1200px;
}
/*轮播结束*/
/*小广告位*/
.ad{
margin-top:15px;
margin-left:117.5px;
height: 180px ;
}
.ad>ul,.ad>img{
float:left;
}
.ad>img{
width:316px;
height:170px;
}
.ad>ul{
width:234px;
height:170px;
background-color: #5F5750;
margin-top: 0px;
padding: 0px;
}
.ad>ul>li{
font-size:12px;
color:white;
float:left;
margin-left: 0px;
width:70px;
height:64px;
text-align: center;
border-right:3px solid #665e57;
}
.im{
width:24px;
height:24px;
}
.ad>ul>li:nth-child(3),.ad>ul>li:nth-child(6){
border-right:none;
}
.before{
margin-bottom: 18px;
margin-top:22px;
border-bottom: 3px solid #665e57;
}
.ad>img{
margin-left: 14.6px;
}
/*小米闪购*/
.sg{
margin-top:40px;
}
.sg h2{
float: left;
font-weight: normal;
padding:0px;
margin:0px;
margin-left:117.5px;
opacity: .6;
}
.sg_arrow{
float:right;
margin-right:314px;
}
.sg_arrow>span{
border:solid 1px #E0E0E0;
width:36px;
height:24px;
display:inline-block;
text-align: center;
font-weight: bold;
opacity: .6;
cursor: pointer;
}
.sg_arrow>span:hover{
color:#ff6700;
}
.sg_box>div{
width:234px;
height:339px;
background-color: #fafafa;
float: left;
margin-right: 15px;
}
.sg_box{
clear: both;
padding-top:20px;
margin-left: 117.5px;
}
.sg_box>div:first-child{
border-top:1px solid #e53935;
}
.sg_box>div:nth-child(2){
border-top:1px solid #ffac13;
}
.sg_box>div:nth-child(3){
border-top:1px solid #83c44e;
}
.sg_box>div:nth-child(4){
border-top:1px solid #2196f3;
}
.sg_box>div:nth-child(5){
border-top:1px solid purple;
}
.sg_item1>img{
width: 234px;
height:339px;
}
.sg_item>img{
width:160px;
margin-top:25px
}
.sg_item{
text-align: center;
}
.sg_item>h4{
font-weight: normal;
}
.sg_item>p{
font-size: 12px;
color:#b0b0b0;
}
.sg_item>span{
color:#FF6700;
}
.sg_item span del{
color:#b0b0b0;
}
.sg_item2{
width:1230px;
margin-top:20px;
}
/*手机商品*/
.phone_container{
background-color: #f5f5f5;
width:100%;
padding-top:20px;
margin-top: 40px;
margin-left:117.5px;
width:1232px;
height: 730px;
overflow: hidden;
}
.phone_box>h2{
text-align: left;
font-weight: normal;
margin-left: 8px;
}
.phone_box>h2>a{
/*float:right;*/
float: right;
font-size: 18px;
color:#333333;
margin-right: 8px;
}
.phone_box>h2>a:hover{
color:#FF6700;
transition: 1.5s;
}
.item_left,.item_right{
height:614px;
float:left;
}
.item_left{
width:234px;
}
.item_left>img{
width:234px;
height:614px;
}
.item_right{
width:992px;
}
.item_right>div{
width:234px;
height:300px;
background-color:pink;
float:left;
margin-left: 14px;
}
.item_right>div:nth-child(1),.item_right>div:nth-child(2),
.item_right>div:nth-child(4),.item_right>div:nth-child(3){
margin-bottom: 14px;;
}
.item_right>div>img{
height:300px;
width:234px;
}
.item_right>div>h4,.item_right>div>span{
left:20px;
}
.item_left:hover,.item_right>div:hover{
transform:translate(0px,-5px);
box-shadow:10px 15px 10px 15px rgba(0,0,0,0.01);
transition: .5s;
}
.phone_qg{
width:1230px;
margin-left: 117.5px;
}
/*固定图*/
.fix{
border:solid 1px #f5f5f5;
position: fixed;
left:1415px;
top:108px;
}
.fixed{
height:100px;
width:100px;
border-bottom: solid 1px #f5f5f5 ;
text-align: center;
cursor: pointer;
}
.fixed>img{
width:100%;
}
.fixed:hover{
color:#FF6700;
}
.fixed>span{
opacity: .5;
}
/*手机抢购隐藏样式*/
.zi{
position: relative;
width:234px;
height:300px;
overflow: hidden;
}
.zii{
height:80px;
width:100%;
position: absolute;
top:100%;
}
.zii>img{
width:234px;
height:80px;
}
.zi:hover .zii{
top:220px;
transition: 2s;
}
</style>
</head>
<body>
<div class="fix">
<div class="fixed">
<img src="img/固定图.jpg" alt="" />
<span>手机APP</span>
</div>
<div class="fixed">
<img src="img/固定图2.jpg" alt="" />
<span>手机APP</span>
</div>
<div class="fixed">
<img src="img/固定图3.jpg" alt="" />
<span>手机APP</span>
</div>
<div class="fixed">
<img src="img/固定图4.jpg" alt="" />
<span>手机APP</span>
</div>
<div class="fixed">
<img src="img/固定图5.jpg" alt="" />
<span>手机APP</span>
</div>
</div>
<div class="white_nav">
<img src="img/小米图标.jpg" alt="" class="logo"/>
<ul class="mi_nav">
<li><a href="">小米手机</a>
<div class="mi_nav_hidden">
</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 class="search">
<input type="text" /><button class="iconfont"></button>
</li>
</ul>
</div>
<!--轮播开始-->
<div class="wrap car">
<div class="huadong">
<ul>
<li><a href="">手机 电话卡</a><span>></span>
<div class="huadong_r">
</div>
</li>
<li><a href="">电视 盒子</a> <span>></span>
<div class="huadong_r">
</div>
</li>
<li><a href="">笔记本 平板</a><span>></span></li>
<li><a href="">家电 拆线吧</a><span>></span></li>
<li><a href="">出行 穿戴</a> <span>></span></li>
<li><a href="">智能 路由器</a><span>></span></li>
<li><a href="">电源 配件</a> <span>></span></li>
<li><a href="">健康 儿童</a> <span>></span></li>
<li><a href="">耳机 音箱</a> <span>></span></li>
<li><a href="">生活 箱包</a> <span>></span></li>
</ul>
</div>
<div class="arrow">
<span class="prev"><</span>
<span class="next">></span>
</div>
</div>
<!--小广告位开始-->
<div class="wrap ad">
<ul>
<li class="before"><img src="img/字体图标1.jpg" alt="" class="im"/><br />小米秒杀</li>
<li class="before"><img src="img/字体图标2.jpg" alt="" class="im"/><br />企业团购</li>
<li class="before"><img src="img/字体图标3.jpg" alt="" class="im"/><br />F码通道</li>
<li><img src="img/字体图标4.jpg" alt="" class="im"/><br />米粉卡</li>
<li><img src="img/字体图标5.jpg" alt="" class="im"/><br />以旧换新</li>
<li><img src="img/字体图标6.jpg" alt="" class="im"/><br />话费充值</li>
</ul>
<img src="img/小广告1.jpg" alt="" />
<img src="img/小广告2.jpg" alt="" />
<img src="img/小广告3.jpg" alt="" />
</div>
<!--小米闪购开始-->
<div class="wrap sg">
<div>
<h2>小米闪购</h2>
<div class="sg_arrow">
<span><</span><span>></span>
</div>
</div>
<div class="sg_box">
<div class="sg_item1"><img src="img/抢购图1.jpg" alt="" /></div>
<div class="sg_item">
<img src="img/抢购图2.jpg" alt="" />
<h4>米家智能家庭家具看护套装</h4>
<p>智能家庭家具</p>
<span>259元 <del>270</del></span>
</div>
<div class="sg_item">
<img src="img/抢购图2.jpg" alt="" />
<h4>米家智能家庭家具看护套装</h4>
<p>智能家庭家具</p>
<span>259元 <del>270</del></span>
</div>
<div class="sg_item">
<img src="img/抢购图2.jpg" alt="" />
<h4>米家智能家庭家具看护套装</h4>
<p>智能家庭家具</p>
<span>259元 <del>270</del></span>
</div>
<div class="sg_item">
<img src="img/抢购图2.jpg" alt="" />
<h4>米家智能家庭家具看护套装</h4>
<p>智能家庭家具</p>
<span>259元 <del>270</del></span>
</div>
<img src="img/抢购图3.jpg" alt="" class="sg_item2" />
</div>
</div>
<!--手机商品开始-->
<div class="phone_container">
<div class="wrap">
<div class="phone_box">
<h2>手机 <a href="">查看全部</a></h2>
</div>
<div class="phone_item">
<div class="item_left"><img src="img/手机图像1.jpg" alt="" /></div>
<div class="item_right">
<div class="zi"><img src="img/手机图像2.jpg" alt="" />
<div class="zii">
<img src="img/手机信息.jpg" alt="" />
</div>
</div>
<div class="zi"><img src="img/手机图像3.jpg" alt="" />
<div class="zii">
<img src="img/手机信息.jpg" alt="" />
</div>
</div>
<div class="zi"><img src="img/手机图像4.jpg" alt="" />
<div class="zii">
<img src="img/手机信息.jpg" alt="" />
</div>
</div>
<div class="zi"><img src="img/手机图像5.jpg" alt="" />
<div class="zii">
<img src="img/手机信息.jpg" alt="" />
</div>
</div>
<div class="zi"><img src="img/手机图像6.jpg" alt="" />
<div class="zii">
<img src="img/手机信息.jpg" alt="" />
</div>
</div>
<div class="zi"><img src="img/手机图像7.jpg" alt="" />
<div class="zii">
<img src="img/手机信息.jpg" alt="" />
</div>
</div>
<div class="zi"><img src="img/手机图像8.jpg" alt="" />
<div class="zii">
<img src="img/手机信息.jpg" alt="" />
</div>
</div>
<div class="zi"><img src="img/手机图像9.jpg" alt="" />
<div class="zii">
<img src="img/手机信息.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<img src="img/抢购图9.jpg" alt="" class="phone_qg"/>
</body>
</html>
上一篇： vue项目中使用MD5加密