京东轮播图片的静态页面CSS3

效果图：

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的更多相关文章

nginx和tomcat访问图片和静态页面的配置方法
生产环境下,有时候需要访问图片,正常需要应用ftp.nginx等配套使用,但是有时候为了简化,可以用以下的两种简单的访问,说实话,就是为了偷懒,但是效果是能有的,这就行了,所以今天做这个简化版的方便大 ...
Javascript 京东轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
js仿京东轮播图效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
jQuery---京东轮播图
京东轮播图有个计数的,点右边,计数增加,判断计数是否超过总的长度,超过设置计数为0,再设置当前的图片动画,兄弟的图片动画左边点击同理,计数是--,判断计数是否等于-1,等于则reset计数为总长度 ...
HTML5+CSS3静态页面项目-PayPaul的总结
学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少.师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛.于是决定在这个假期里,主要是通过项目的实践以及 ...
HTML5+CSS3静态页面项目-BusinessTheme的总结
因为期末考试.调整心态等等的种种原因,距离上一次的项目练习已经过了很久了,今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原.设计图很长,整个页面分为了好几个区域,所以就不放完整的设计图 ...
mvc伪静态<四> 伪静态后静态页面或者引用的css和图片失效
引用的css和图片失效的解决办法把样式引用文件的相对路径改成绝对路径就可以了比如原先的引用路径为:<link href="~/Content/css/style.css" ...
Apache 后台服务器(主要处理php及一些功能请求如：中文url) 　　Nginx 前端服务器(利用它占用系统资源少得优势来处理静态页面大量请求) 　　Lighttpd 图片服务器　　总体来说，随着nginx功能得完善将使他成为今后web server得主流。
Apache 后台服务器(主要处理php及一些功能请求如:中文url) Nginx 前端服务器(利用它占用系统资源少得优势来处理静态页面大量请求) Lighttpd 图片服务器总体来说,随着ngi ...
vue手写的轮播图片，解决已经修改data中的值，页面标签已绑定，但页面没效果
1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <link> <meta chars ...

随机推荐

转:Ogre内部渲染流程
以下是 Ogre 的代码中的详细说明: Renderable是OGRE中所有可渲染对象的抽象接口这个接口抽象出了在渲染管线中的被分组的离散的可渲染对象基本的方法. 此接口的实现类必须是基于单一的材质 ...
1万字！彻底看懂微信小程序
Q:为什么说小程序如炮友? A:小程序刚发布不久就流行一个段子:APP如原配,一年不用几次:服务号如情人,一个月固定几次:订阅号如酒店小卡片,天天可以卖广告:小程序像炮友,用完就走. 资本如嫖客,各个 ...
用dockerfile构建基于centos系统的jar包的镜像
实际示例: [root@master01 home-dataline]# ls dataline.jar Dockerfile jdk-8u181-linux-x64.tar.gz [root@mas ...
（原）ubuntu挂载及开机自动挂载网络端的文件夹的方法
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/7160792.html 参考网址: http://blog.csdn.net/tlight/articl ...
[转载]显示SVN控制台
原文地址:显示SVN控制台作者:瘦骨临清风青春就应该这样绽放游戏测试:三国时期谁是你最好的兄弟!! 你不得不信的星座秘密
NoSQL生态系统（nosql ecosystem）
Unlike most of the other projects in this book, NoSQL is not a tool, but an ecosystem composed of se ...
Jquery UI的日历控件datepicker限制日期(转)
网上找到这篇文章:http://www.jssay.com/blog/index.php/2010/04/27/%E5%A6%82%E4%BD%95%E7%A6%81%E7%94%A8datepick ...
OAuth2.0实战之微信授权篇
微信开发三大坑: 微信OAuth2.0授权微信jssdk签名微信支付签名本篇先搞定微信OAuth2.0授权吧! 以简书的登陆页面为例,来了解一下oauth2.0验证授权的一些背景知识: 1) 传 ...
wcf 中客户端调用之死感悟 wcf与原来的webservice2.0 的客户端调用区别（wcf调用完不关闭的话那就把web服务搞死了）
说到wcf,本人也是刚刚使用所以不是很熟悉在做项目的时候采用webservice+客户端程序架构写了一个wcf中的webservice之后,又写了很多的客户端exe程序,有的是轮询调用这个webs ...
Postgresql 正则表达式
在postgresql中使用正则表达式时需要使用关键字“~”,以表示该关键字之前的内容需匹配之后的正则表达式,若匹配规则不需要区分大小写,可以使用组合关键字“~*”: 相反,若需要查询不匹配这则表达式 ...