Skip to content

Commit

Permalink
apple
Browse files Browse the repository at this point in the history
  • Loading branch information
@codejianqxr
codejianqxr committed Mar 20, 2017
0 parents commit 6315626
Show file tree
Hide file tree
Showing 16 changed files with 11,350 additions and 0 deletions.
125 changes: 125 additions & 0 deletions apple.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/less.css">
<link rel="stylesheet" href="css/apple.css">
<script src="js/jquery.js"></script>
<script src="js/apple.js"></script>

<!--
导航 765
4个图片
1070 735
-->
</head>
<body style="height:2000px;">
<div class="small">
<div class="con">
<div class="small-list">
<div class="btn">
<div class="line1"></div>
<div class="line2"></div>
</div>
</div>

<a class="iconfont icon-apple small-list" href="">

</a>
<a class="iconfont icon-bag small-list" href="">
</a>
</div>

<ul class="menu">
<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="large">
<div class="con">
<a class="iconfont icon-apple" href="">

</a>
<a href="">212</a>
<a href="">31</a>
<a href="">43</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a class="iconfont icon-search" href="">

</a>
<a class="iconfont icon-bag" href="">

</a>
</div>
</div>




<div class="wheel">
<ul class="box">
<li class="wheel-list">
<a href="" >

</a>
</li>
<li class="wheel-list">
<a href="" >

</a>
</li>
<li class="wheel-list">
<a href="">

</a>
</li>
</ul>

<div class="btns">
<div class="btn">
<div class="progress"></div>
</div>
<div class="btn">
<div class="progress"></div>
</div>
<div class="btn">
<div class="progress"></div>
</div>
</div>

<div class="leftBthBox">
<div class="leftBtn">
<
</div>
</div>
<div class="rightBthBox">
<div class="rightBtn">

>
</div>
</div>


</div>

</body>
</html>
266 changes: 266 additions & 0 deletions css/apple.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,266 @@
body{
padding:0;margin:0;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;padding:0;margin:0;
}

/*图标字体设置*/
@font-face {font-family: "abc";
src: url('../font/iconfont.eot?t=1489722221458'); /* IE9*/
src: url('../font/iconfont.eot?t=1489722221458#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/iconfont.woff?t=1489722221458') format('woff'), /* chrome, firefox */
url('../font/iconfont.ttf?t=1489722221458') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../font/iconfont.svg?t=1489722221458#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
font-family:"abc" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-apple:before { content: "\e61a"; }

.icon-bag:before { content: "\e64b"; }

.icon-search:before { content: "\e601"; }




/*头部的相应*/

.small{
display: block;
}
.large{
display: none;
}


@media screen and (min-width: 765px){
.small{
display: none;

}
.large{
display: block;
}
}


.large{
min-width:765px;height:44px;
background:rgba(0,0,0,.8);
}
.large .con{
max-width:1024px;height:100%;margin:auto;
padding:0 20px;
}
.large .con a{
width:11.1111%;height:100%;text-align: center;float:left;color:#fff;line-height: 44px;

}

.small{
max-width:765px;height:43px;
background:rgba(0,0,0,.8);
border-top:1px solid rgba(0,0,0,.8);
line-height: 44px;position: relative;
}
.small .con{
max-width:765px;height:100%;margin:auto;
padding:0 20px;
}
.small .con .btn{
width:20px;height:20px;
margin-top:17px;
}
.small .con .btn .line1{
width:100%;height:1px;background:#fff;
margin-top:5px;
}
.small .con .btn .line2{
width:100%;height:1px;background:#fff;
margin-top:8px;
}

.btn .line1{
transition: transform 1s ease;

}
.btn .line2{
transition: transform 1s ease;

}


.small-list{
float:left;width:33.3333%;
text-align: center;
color:#fff;
}
.small-list:nth-child(1){
text-align: left;

}
.small-list:last-child{
text-align: right;

}

.menu{
width:100%;
background:rgba(0,0,0,.8);
position: absolute;
left:0;top:42px;
display: none;
}
.menu li{
width:80%;
margin:10px auto;
border-bottom: 1px solid #fff;

}
.menu li a{
color:#fff;
}

.back{
box-sizing: content-box;
margin-top:20px;
border:10px solid rgba(0,0,0,0.6);
width:200px;height:200px;
background-image: url(../img/30.jpg),url(../img/200.jpg);
background-repeat: no-repeat;
background-size: 30px 30px,100px 100px;
background-position: left top,right bottom;

}

/*轮播图*/
.wheel{
width: 100%;
height:420px;
border:1px solid red;
background:#000;
position: relative;
}

.wheel .box{
max-width:100%;
margin:auto;height:100%;position: relative;
}
.wheel .box .wheel-list{
position: absolute;
width:100%;height:100%;
left:100%;top:0;
}
.wheel .box .wheel-list a{
position: absolute;width:100%;height:100%;
}

.wheel .box .wheel-list:nth-child(1){
background:#000;
left:0;
}

.wheel .box .wheel-list:nth-child(2){
background:#fff;
}

.wheel .box .wheel-list:nth-child(3){
background:#fff;
}

.wheel .box .wheel-list:nth-child(1) a{
background:url("../img/phone_2x.jpg") no-repeat center;
background-size: contain;

}
.wheel .box .wheel-list:nth-child(2) a{
background:url("../img/watch_2x.jpg") no-repeat center;
background-size: contain;
}

.wheel .box .wheel-list:nth-child(3) a{
background:url("../img/pro_small_2x.jpg") no-repeat center;
background-size: contain;
}

.btns{
width:200px;height:20px;
position: absolute;
left:0;bottom:50px;
right:0;
margin:auto;z-index:999;
}
.btns .btn{
width:30%;height:100%;
margin-left:3%;float:left;
border:1px solid #fff;
position: relative;z-index:999;
}
.btns .btn .progress{
position: absolute;
width:0%;height:100%;
background:red;z-index:999;
}

.leftBthBox{
width:20%;
height:100%;
position: absolute;
left:0;top:0;
z-index: 999;
}
.rightBthBox{
width:20%;
height:100%;
position: absolute;
right:0;top:0;
z-index: 999;
}
.leftBtn,.rightBtn{
width:50px;height:50px;
background:#ccc;
text-align: center;
line-height: 50px;
position: absolute;
left:0;top:0;right:0;bottom: 0;
margin:auto;
font-size:20px;
cursor: pointer;
border-radius: 50%;
opacity: 0;
transition: opacity 1s ease;
}

.leftBthBox:hover .leftBtn{
opacity: 1;
}

.rightBthBox:hover .rightBtn{
opacity: 1;
}



@media screen and (min-width: 735px){
.wheel{
height:500px;
}

.wheel .box .wheel-list:nth-child(3) a{
background:url("../img/pro_2x.jpg") no-repeat center;
background-size: cover;
}
}


Loading

0 comments on commit 6315626

Please sign in to comment.