效果图：

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:%;

    max-width: 640px;

    min-width: 300px;

    margin: auto;

    position: relative;

}

.jd_header{

    position: fixed;

    left: ;

    top:;

    height:40px;

    width:%;

    z-index:;

}

.jd_header>.jd_header_box{

    position: relative;

    width: %;

    max-width: 640px;

    min-width: 300px;

    margin: 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:  -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:;

    top:;

    font-size: 15px;

}

.jd_header>.jd_header_box>form{

    width:%;

    padding-left:75px;

    padding-right:50px;

    height:40px;

    position: relative;

}

.jd_header>.jd_header_box>form>input{

    width:%;

    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: %;

    position: relative;

    overflow: hidden;

}

.jd_banner>ul:first-child{

    width: %;

transform: translateX(-%);

    -webkit-transform:translateX(-%);

}

.jd_banner>ul:first-child>li{

    width: %;

    float: left;

}

.jd_banner>ul:first-child>li>a{

    width: %;

    display: block;

}

.jd_banner>ul:first-child>li>a>img{

    width: %;

    display: block;

}

.jd_banner>ul:last-child{

    width: 118px;

    position: absolute;

    height: 6px;

    bottom: 6px;

    left: %;

    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(){

    margin-left: ;

}

base.css

/*重置样式*/

*,::before,::after{

    /*选择所有的标签*/

    margin:;

    padding:;

    /*清楚移动端默认的 点击高亮效果*/

    -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:;

}

a{

    color:;

    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:;

    line-height:;

    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)}

京东轮播图片的静态页面CSS3的更多相关文章

  1. nginx和tomcat访问图片和静态页面的配置方法

    生产环境下,有时候需要访问图片,正常需要应用ftp.nginx等配套使用,但是有时候为了简化,可以用以下的两种简单的访问,说实话,就是为了偷懒,但是效果是能有的,这就行了,所以今天做这个简化版的方便大 ...

  2. Javascript 京东轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. js仿京东轮播图效果

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. jQuery---京东轮播图

    京东轮播图 有个计数的,点右边,计数增加,判断计数是否超过总的长度,超过设置计数为0,再设置当前的图片动画,兄弟的图片动画 左边点击同理,计数是--,判断计数是否等于-1,等于则reset计数为总长度 ...

  5. HTML5+CSS3静态页面项目-PayPaul的总结

    学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少.师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛.于是决定在这个假期里,主要是通过项目的实践以及 ...

  6. HTML5+CSS3静态页面项目-BusinessTheme的总结

    因为期末考试.调整心态等等的种种原因,距离上一次的项目练习已经过了很久了,今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原.设计图很长,整个页面分为了好几个区域,所以就不放完整的设计图 ...

  7. mvc伪静态<四> 伪静态后静态页面或者引用的css和图片失效

    引用的css和图片失效的解决办法 把样式引用文件的相对路径改成绝对路径就可以了 比如原先的引用路径为:<link href="~/Content/css/style.css" ...

  8. Apache 后台服务器(主要处理php及一些功能请求 如：中文url) 　　Nginx 前端服务器(利用它占用系统资源少得优势来处理静态页面大量请求) 　　Lighttpd 图片服务器 　　总体来说，随着nginx功能得完善将使他成为今后web server得主流。

    Apache 后台服务器(主要处理php及一些功能请求 如:中文url) Nginx 前端服务器(利用它占用系统资源少得优势来处理静态页面大量请求) Lighttpd 图片服务器 总体来说,随着ngi ...

  9. vue手写的轮播图片，解决已经修改data中的值，页面标签已绑定，但页面没效果

    1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <link> <meta chars ...

随机推荐

  1. -webkit-line-clamp下多行文字溢出点点点...显示实例页面

    overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box ...

  2. 不能添加重复的Contact到RecipientBox中

    不能添加重复的Contact到RecipientBox中 在开始添加的操作时,判断是否已在RecipientBox中,如果已经在返回值为null的TextView. 再根据TextView判断是否nu ...

  3. ios中修改数字键盘

    自定义文本框: #import <UIKit/UIKit.h> //自定义键盘的键定义 @interface DIYKey : NSObject { } @property(copy, n ...

  4. 在centos 5.5 i386 上安装 oracle 10g xe

    1.安装rpm包 nano /v.sh 将下面内容复制进去 #!/bin/bash rpm -Uvh compat-db-4.2.52-5.1.i386.rpm rpm -Uvh compat-lib ...

  5. grep 和 awk的buffer

    当使用 tail -f test.log | grep "mode" | awk '{print $5}'命令 或者 tail -f test.log | awk '/mode/ ...

  6. 表的复制——sql语句

    SQL Server 复制表结构及数据到新表 select * into 目标表名 from 源表名(要求目标表不存在,因为在插入时会自动创建) 只复制表结构到新表 CREATE TABLE 新表 S ...

  7. Java获取函数参数名称

    原理 编译之后的class文件默认是不带有参数名称信息的,使用 IDE 时,反编译jar包得到的源代码函数参数名称是 arg0,arg1......这种形式,这是因为编译 jar 包的时候没有把符号表 ...

  8. jquery添加未来元素时，其绑定事件不起作用解决办法

    delegate说起对未来元素是其作用的,于是写下代码: <!DOCTYPE HTML> <html> <head> <meta charset=" ...

  9. SaltStack 入门到精通第三篇：Salt-Minion配置文件详解

    SaltStack 入门到精通第三篇:Salt-Minion配置文件详解 作者:ArlenJ  发布日期:2014-06-09 17:52:16   ##### 主要配置设置 ##### 配置 默认值 ...

  10. WebDriver基本操作入门及UI自动化练手页面

    在这里集中了我们在做UI自动化时常见的一些控件操作.希望能对新手有帮助. 下载地址:http://files.cnblogs.com/zhangfei/demo.rar package com.tes ...