效果图：

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. 基于贪心算法求解TSP问题（JAVA）

    概述 前段时间在搞贪心算法,为了举例,故拿TSP来开刀,写了段求解算法代码以便有需之人,注意代码考虑可读性从最容易理解角度写,没有优化,有需要可以自行优化! 详细 代码下载:http://www.de ...

  2. java2小结(草稿)

    Struts2 Servlet 小的Java程序,运行在服务器端,接收和响应从客户端发送过来的请求 流程分析: Servlet生命周期? Servlet配置自动加载?(理解) 1.服务器在启动的时候, ...

  3. servlet 让浏览器输出中文,并成功打印出来.2种方法

    import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; impor ...

  4. 【LeetCode】206. Reverse Linked List (2 solutions)

    Reverse Linked List Reverse a singly linked list. click to show more hints. Hint: A linked list can ...

  5. 老男孩linux实战培训初级班第三次课课前考试题

    ################################################################ 本文内容摘录于老男孩linux实战运维培训中心考试题 如有转载,请务必 ...

  6. linux下yum命令出现Loaded plugins: fastestmirror Determining fastest mirrors

    今天yum install的时候出问题了,找了半天才找到一个可行的解决办法 fastestmirror是yum的一个加速插件,这里是插件提示信息是插件不能用了. 不能用就先别用呗,禁用掉,先yum了再 ...

  7. The method getServletContext() is undefined for the type HttpServletRequest

    request.getServletContext().getRealPath("/") 已经加入了 sun runtime library但是还是提示错误 是因为 写法过时了改成 ...

  8. Oracle 12C -- plug unplugged PDB into CDB

    connetct to CDB as a common user and verify that pdb_test is closed SQL> select con_id,dbid,name, ...

  9. mysqldump脚本crontab执行失败，但是手动执行成功

    检查备份时发现,cron中定时备份mysql的脚本备份失败,但是手动自行mysql备份脚本却能正常成功 检查cron的环境变量: # cat /etc/crontab ... SHELL=/bin/s ...

  10. dart --- 更符合程序员编程习惯的javascript替代者

    dart是google在2011年推出的一门语言,提供较为丰富的lib,并支持将代码转变为javascript,其demo code 和 demo app 也是以web前端代码来展示的. 其语言特性较 ...