效果图：
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="images/l8.jpg" alt=""></li>
<li><a href=""></a><img src="images/l1.jpg" alt=""></li>
<li><a href=""></a><img src="images/l2.jpg" alt=""></li>
<li><a href=""></a><img src="images/l3.jpg" alt=""></li>
<li><a href=""></a><img src="images/l4.jpg" alt=""></li>
<li><a href=""></a><img src="images/l5.jpg" alt=""></li>
<li><a href=""></a><img src="images/l6.jpg" alt=""></li>
<li><a href=""></a><img src="images/l7.jpg" alt=""></li>
<li><a href=""></a><img src="images/l8.jpg" alt=""></li>
<li><a href=""></a><img src="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{ 100%; max- 640px; min- 300px; margin:0 auto; position: relative; } .jd_header{ position: fixed; left: 0; top:0; height:40px; 100%; z-index:1000; } .jd_header>.jd_header_box{ position: relative; 100%; max- 640px; min- 300px; margin:0 auto; background: red; height:40px; } .jd_header>.jd_header_box>.icon_logo{ 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{ 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{ 100%; padding-left:75px; padding-right:50px; height:40px; position: relative; } .jd_header>.jd_header_box>form>input{ 100%; height:30px; border-radius:15px; margin-top:5px; padding-left:34px; } .jd_header>.jd_header_box>form>.icon_search{ height:20px; 20px; position: absolute; background-position: -60px -109px; top:10px; left:85px; } .jd_banner{ 100%; position: relative; overflow: hidden; } .jd_banner>ul:first-child{ 1000%; transform: translateX(-10%); -webkit-transform:translateX(-10%); } .jd_banner>ul:first-child>li{ 10%; float: left; } .jd_banner>ul:first-child>li>a{ 100%; display: block; } .jd_banner>ul:first-child>li>a>img{ 100%; display: block; } .jd_banner>ul:last-child{ 118px; position: absolute; height: 6px; bottom: 6px; left: 50%; margin-left: -59px; } .jd_banner>ul:last-child>li{ 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)}