效果图：

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. c++ 11 override final

    C++ 11添加了两个继承控制关键字:override和final. override确保在派生类中声明的重载函数跟基类的虚函数有相同的签名.final阻止类的进一步派生和虚函数的进一步重载

  2. [解决问题]selenium.remote.UnreachableBrowserException 异常分析并解决问题

    I have a set of automations that work fantastically in Firefox and Chrome, and I'd like to launch an ...

  3. 进阶之路（基础篇） - 001 亮一个led灯

    /********************************* 代码功能:点亮一个led灯 使用函数: pinMode(引脚号,模式); digitalWrite(引脚号,电平状态); //默认 ...

  4. Ubuntu中安装配置和卸载FTP(转)

    转载:http://zyjustin9.iteye.com/blog/2178943 一.安装1.用apt-get工具安装vsftpd: $ sudo apt-get install vsftpd 2 ...

  5. POJ 3683 Priest John's Busiest Day （2-SAT）

    Priest John's Busiest Day Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 6900   Accept ...

  6. windows 7 开启无线wifi

    Windows 7 开启无线wifi步骤:1.选择“开始”-“运行”命令,在运行命令栏里输入“CMD”打开管理员: 2.在界面里输入以下命令:netsh wlan set hostednetwork ...

  7. 【colaboratory】在colab中安装mxnet

    在学习<动手学深度学习>内容是,该内容用的是mxnet框架,在电脑本地安装过程中又容易出现错误,怎么也安装不上,所有的条件都尝试了. 汗颜,指的另谋他法. 只有在谷歌的学习平台上安装使用h ...

  8. Bitnami Redmine 中文附件名 报错修复

    最近自己在服务器上搭了个redmine,用的是Bitnami的一键安装程序. 搭好后,运行得不错,居然还增加了负载均衡. 某天上传中文附件,打开报内部错误,去redmine官网看了下,果然有这个问题, ...

  9. Python读文本文件中文乱问题

    file_object = open('thefile.txt')try: all_the_text = file_object.read().decode("gb2312")fi ...

  10. win8 应用商店程序使用SQLITE数据库

    http://www.cnblogs.com/zhuzhenyu/archive/2012/11/27/2790193.html using SQLite; using System; using S ...