自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(15)
  • 收藏
  • 关注

原创 关于z-index

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

2017-03-16 14:49:12 417

原创 关于css

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

2017-03-16 14:47:14 331

原创 根据多选框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 1685

原创 多栏多列布局

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

2017-03-16 14:45:22 629

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

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

2017-03-16 14:44:30 612

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

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

2017-03-16 14:44:00 803

原创 关于http协议

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

2017-03-16 14:43:28 215

原创 关于@media

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

2017-03-16 14:42:23 499

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

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

2017-03-10 15:16:23 334

原创 巧用::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 202

原创 opacity透明度

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

2017-03-10 14:41:46 195

原创 关于nth-of-type()

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

2017-03-09 17:43:17 228

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

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

2017-03-09 16:47:31 777

转载 swiper

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

2017-03-06 17:38:27 2101

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

meta name="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 1331

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除