效果图：

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. Easyui入门视频教程 第06集---Layout初始化和属性方法使用

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

  2. JavaScript 数组(Array)对象

    Array 对象 Array 对象用于在单个的变量中存储多个值. 创建 Array 对象的语法: new Array(); new Array(size); new Array(element0, e ...

  3. servlet 中通过response下载文件

    public class ResponseDemo3 extends HttpServlet { private static final long serialVersionUID = -52329 ...

  4. 【LeetCode】207. Course Schedule (2 solutions)

    Course Schedule There are a total of n courses you have to take, labeled from 0 to n - 1. Some cours ...

  5. 【虚拟化系列】VMware vSphere 5.1 网络管理

       网络是VMware vSphere 5.1的基础,所有虚拟机都需要网络来进行通信.如果将所有的虚拟机都看成是物理机,则在网络拓扑上,需要网卡和交换机等不同的网络连接设备和方式.而在虚拟化中,这些 ...

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

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

  7. POJ 3207 Ikki's Story IV - Panda's Trick （2-sat）

    Ikki's Story IV - Panda's Trick Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 6691   ...

  8. 转载：windiws server 2008R2 IIS7.5 设置win7 IIS7设置，文件夹权限配置，Authenticated Users，支持asp temp

    第一步,进入控制面板,点击程序图标 第二步,点击打开或关闭Windows功能 第三步,勾选Internet信息服务全部功能,或根据需要,点击确定,安装 第四步,进入控制面板,点击管理工具 第五步,点击 ...

  9. 【Oracle】Oracle基本数据类型总结

    ORACLE基本数据类型(亦叫内置数据类型 built-in datatypes)可以按类型分为:字符串类型.数字类型.日期类型.LOB类型.LONG RAW& RAW类型.ROWID &am ...

  10. Tensorflow中的run()函数

    1 run()函数存在的意义 run()函数可以让代码变得更加简洁,在搭建神经网络(一)中,经历了数据集准备.前向传播过程设计.损失函数及反向传播过程设计等三个过程,形成计算网络,再通过会话tf.Se ...