京东轮播图片的静态页面CSS3

效果图：

index.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"><title></title><link rel="stylesheet" href="css/base.css" /><link rel="stylesheet" href="css/index.css"></head>
<body>
<div class="layout"><header class="jd_header"><div class="jd_header_box"><a href="#" class="icon_logo"></a><form action="#"><span class="icon_search"></span><input type="search" placeholder="提示站位"></form><a href="#" class="login">登录</a></div></header><div class="jd_banner"><ul><li><a href=""></a><img src="data:images/l8.jpg" alt=""></li><li><a href=""></a><img src="data:images/l1.jpg" alt=""></li><li><a href=""></a><img src="data:images/l2.jpg" alt=""></li><li><a href=""></a><img src="data:images/l3.jpg" alt=""></li><li><a href=""></a><img src="data:images/l4.jpg" alt=""></li><li><a href=""></a><img src="data:images/l5.jpg" alt=""></li><li><a href=""></a><img src="data:images/l6.jpg" alt=""></li><li><a href=""></a><img src="data:images/l7.jpg" alt=""></li><li><a href=""></a><img src="data:images/l8.jpg" alt=""></li><li><a href=""></a><img src="data:images/l1.jpg" alt=""></li></ul><ul><li class="now"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>
</div></body>
</html>

index.css

.layout{width:100%;max-width: 640px;min-width: 300px;margin:0 auto;position: relative;}
.jd_header{position: fixed;left: 0;top:0;height:40px;width:100%;z-index:1000;}
.jd_header>.jd_header_box{position: relative;width: 100%;max-width: 640px;min-width: 300px;margin:0 auto;background: red;height:40px;}
.jd_header>.jd_header_box>.icon_logo{width:60px;height:36px;position: absolute;/*background: url("../images/sprites.png") no-repeat;*//*background-size:200px 200px;*/background-position: 0 -103px;top: 4px;left: 10px;}
.jd_header>.jd_header_box>.login{width: 50px;height: 40px;line-height:40px;text-align: center;color: #ffffff;position: absolute;right:0;top:0;font-size: 15px;}
.jd_header>.jd_header_box>form{width:100%;padding-left:75px;padding-right:50px;height:40px;position: relative;}
.jd_header>.jd_header_box>form>input{width:100%;height:30px;border-radius:15px;margin-top:5px;padding-left:34px;}
.jd_header>.jd_header_box>form>.icon_search{height:20px;width:20px;position: absolute;background-position: -60px -109px;top:10px;left:85px;
}
.jd_banner{width: 100%;position: relative;overflow: hidden;
}
.jd_banner>ul:first-child{width: 1000%;
transform: translateX(-10%);-webkit-transform:translateX(-10%);
}
.jd_banner>ul:first-child>li{width: 10%;float: left;}
.jd_banner>ul:first-child>li>a{width: 100%;display: block;
}
.jd_banner>ul:first-child>li>a>img{width: 100%;display: block;}
.jd_banner>ul:last-child{width: 118px;position: absolute;height: 6px;bottom: 6px;left: 50%;margin-left: -59px;
}
.jd_banner>ul:last-child>li{width: 6px;height: 6px;float: left;border-radius: 3px;border:1px solid #ffffff;margin-left: 10px;}
.jd_banner>ul:last-child>li.now{background: #ffffff;
}
.jd_banner>ul:last-child>li:nth-child(1){margin-left: 0;
}

base.css

/*重置样式*/
*,::before,::after{/*选择所有的标签*/margin:0;padding:0;/*清楚移动端默认的 点击高亮效果*/-webkit-tap-highlight-color:transparent;/*设置所有的都是以边框开始计算宽度 百分比*/-webkit-box-sizing:border-box;/*兼容*/box-sizing:border-box;
}
body{font-size:14px;font-family:"Microsoft YaHei",sans-serif;/*设备默认字体*/color:333;
}
a{color:333;text-decoration:none;/*不显示下划线*/
}
a:hover{text-decoration:none;/*不显示下划线*/
}
ul,ol{list-style:none;
}
input{border:none;outline:none;/*清除移动端默认的表单样式*/-webkit-appearance:none;
}
/*公共样式*/
.f_left{float:left;
}
.f_right{float:right;
}
.clearfix::before,.clearfix::after{content:"";height:0;line-height:0;display:block;visibility:hidden;clear:both;
}
[class^="icon_"]{background: url("../images/sprites.png") no-repeat;background-size:200px 200px;
}

1、:first-child、 :nth-child(1) 和 :last-child

.jd_sk .sk_time>span:nth-child(3n) 表示3的倍数

/*e:first-of-type 选择e同类型的同级的第一个元素*/
/*e:last-of-type 选择e同类型的同级的第一个元素*/
/*e:nth-of-type(n) 选择e同类型的同级的第n个元素*/
.jd_sk .product_box_con>ul>li>p:first-of-type{

:first-of-type	p:first-of-type	选择属于其父元素的首个 <p> 元素的每个 <p> 元素。	3
:last-of-type	p:last-of-type	选择属于其父元素的最后 <p> 元素的每个 <p> 元素。	3
:only-of-type	p:only-of-type	选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。	3
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 <p> 元素。	3
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 <p> 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。	3
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 <p> 元素的每个 <p> 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。	3
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 <p> 元素。	3

2、transform: translateX(-10%);

CSS3 transform是什么？
transform的含义是：改变，使…变形；转换

transform:rotate()：含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。

.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

transform:skew()：含义：倾斜；

.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

transform:scale()：含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

transform:translate()：含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

转载于:https://www.cnblogs.com/hongmaju/p/6701768.html