yuanxu21-优快云博客

原创关于z-index

z-index:1; //定义.foot的层级，值越大的越靠前显示，使用z-index时需要定义position:absolute、relative或fixed。举例：z-index:2;的div会盖住z-index:1;的divheight:auto !important;这个是在IE6以外的浏览器下面高度随着里面的内容自定义大小，提升优先级别。height:663px; 这个是高度66

2017-03-16 14:49:12 453

原创关于css

Css的：-webkit-tap-highlight-color:color;只用于ios，点击元素时，覆盖显示的高亮颜色。单冒号(:)用于css3伪类，双冒号（:）用于css3伪元素因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。　　::-webkit-input-placeholder { /*

2017-03-16 14:47:14 356

原创根据多选框name来获得选中的值

根据多选框name来获得选中的值可用如下jquery代码实现：$(“input:checkbox[name=’test’]:checked”).each(function(){//遍历name=test的多选框$(this).val(); //每一个被选中项的值}); $("input[name='member']:checked").each( function(

2017-03-16 14:45:55 1717

原创多栏多列布局

Display:flex 多栏多列布局，火狐支持w3c无前缀写法，谷歌和opera支持-webkit-前缀写法，比较适合移动端开发使用/* flex-flow: row wrap; row横向（左向右）显示 column竖向（上向下）显示 wrap一行显示不完的时候换行 */

2017-03-16 14:45:22 684

原创 *{ Margin:0; Padding:0; }

*{Margin:0;Padding:0;}作用是帮助你重置不同的浏览器默认样式，达到显示网页的结果不会差太远。

2017-03-16 14:44:30 639

原创 <meta http-equiv=”refresh” content=”3”>意思

意思是隔3秒后刷新经过一段时间转到另外某个界面 content=”0;url=”,这里0表示没有延时，直接跳转到后面的url，把0改成1，则延时1秒跳转。

2017-03-16 14:44:00 863

原创关于http协议

关于http协议：http协议工作于客户端-服务端架构上，浏览器作为http客户端通过url向http服务端即web服务器发送所有请求（请求方法和路径），web服务器根据接收到的请求，向客户端发送响应信息。

2017-03-16 14:43:28 243

原创关于@media

将website里首页适配，原网页不能自如的伸缩，且不能在手机上很好的浏览。1.小于960px的尺寸的写法：@media screen and (max-width:960px){body{background:#000;}}是media的标准写法，当页面小于960px时，执行下面的css2.等于960px尺寸的写法：@media screen and（max-devi

2017-03-16 14:42:23 527

转载切换背景图像综合练习题

练习题：根据所学知识，使用CSS3知识，实现背景图片的切换效果（不依赖js，点击小图切换大的背景图）任务给每个列表定义不同的背景颜色提示：使用结构伪类选择器:nth-of-type()设置缩略图外形效果提示：使用伪元素::after制作圆形效果1、给每个缩略图设置不同的图片提示：使用伪结构选择器:nth-of-

2017-03-10 15:16:23 357

原创巧用::after和::before

.slider a::before{ content: ""; display: block; height: 120px; width: 120px; border:5px solid #fff; border-radius: 50%; position: absolute; left: 50%; margin-left:

2017-03-10 14:44:47 225

原创 opacity透明度

设置 div 元素的不透明级别：可以用于hover事件div{opacity:0.5;}

2017-03-10 14:41:46 215

原创关于nth-of-type()

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.n 可以是数字、关键词或公式。规定属于其父元素的第二个 p 元素的每个 p：p:nth-of-type(2){background:#ff0000;}

2017-03-09 17:43:17 252

原创关于display:inline-block 的详解

display:inline-block是什么呢？相信大家对这个属性并不陌生，根据名字inline-block我们就可以大概猜出它是结合了inline和block两者的特性于一身，简单的说：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。举例说明：以前我们做横向菜单列表的时候，我们可以通

2017-03-09 16:47:31 829

转载 swiper

swiper是一个相当强大的图片展示插件，下面我来介绍一下swiper的简单图片轮播功能。一般情况下我们所说的图片轮播就是在一个区域内有几张图片循环展示，有的可以滑动图片观看下一张图，有的可以点击图下方的小点来选择哪个图，也有点击两侧的左右按钮来切换图片展示。我们先来看一下如何实现12345678910111213141516171819div class="swiper-contai

2017-03-06 17:38:27 2138

原创关于viewport，让页面适用任何手机

metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=no">第一次遇到这个自己存在疑惑，width--viewport的宽度，height--viewport的高度，initial-sacle --初始的缩放比例，minimum-

2017-01-13 15:45:51 1358

yuanxu21的博客