CSS3 Flexbox轻松实现元素的水平居中和垂直居中网上有很多关于Flex的教程，对于Flex的叫法也不一，有的叫Flexbox，有的叫Flex，其实这两种叫法都没有错，只是Flexbox旧一点，而Flex是刚出来不久的东西而已，为了方便说明，赶上新技术，下面我就把这种布局叫Flex布局。 元素居中，相信作为前端工程师的你肯定会经常用到，不管是在水平方向居中，还是垂直方向居中，都可在你的职业生涯中徘徊。不过很多时候要实现垂直居中，还是比较麻...
document.querySelector(‘div‘).addEventListener(‘transitionEnd‘,function(){console.log(‘过度结束‘)})如果要兼容低版本的浏览器，就添加浏览器的内核前缀 webkitTransitionEnd / mozTransitionEnd / oTransitionEnd.... 清除表单下拉框的默认样式 主要是在移动端的默认样式select::-ms-expand{display:none;}
select{appearance:none;-moz-appearance:none;-webkit-appearance:none;
} 修改表单元素 placeholder ...
下面我们来了解一下css选择器里面的几个:only-childp: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)同上，但是从最后一个子元素开...
伪类选择器，和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。a:link|a:visited|a:hover|a:active在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:active 必须被置于 a:hover 之后，才是有效的。 由于状态是动态变化的，所以一个元素达到一个特定状态时，它可...
目录：html5+css3网页设计与制作目录1.子元素选择器>，用来选中某个元素的第一级子元素，也就是儿子元素<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* 子代选择器,只对儿子元素有效 */p>strong{color: red;}</style></head><body><p>这是p标签，<strong>表示一个段落</strong></p><p>这是p标签，嵌套了<i>b标签和<strong>i标签</strong></p></body></html>2.兄弟选择器+，两个元素有...
p:nth-child(2)要满足两个条件，1：选择的是p元素的父元素的第二个子元素 2：选择的第二个子元素必须是p元素，如果不满足，则将不显示 p:nth-of-type(2)选择父元素下的第二个p元素原文：http://www.cnblogs.com/jingxinqiaodaima/p/6252711.html
E:target 表示当前的URL片段的元素类型，这个元素必须是E
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radioE::after 生成内容在E元素后
E:not(s) 表示E元素不被匹配
E~F表示E元素毗邻的F元素E:first-line选中第一行文字E:first-letter选中第一个字E::selection 当文字被选中时触发效果【注意是双冒号】Content 属性：E:after 利用content属性在元素末尾添加内容E:before...
body{
font-family: cursive;
font-size: 14px;
}
.left{
width:150px;
height: 50px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 50px;
text-align: center;
border: 2px solid green;
...
只要设置元素的box-pack和box-align即可，这两个属性当前只有webkit和moz支持，要设置垂直居中的话只需要将这两个属性的值都设置为center即可，需要的朋友可以参考下 以前处理垂直居中用的方法是设置div的height和line-height是一样的值，现在就不用那么麻烦了。只要设置元素的box-pack和box-align即可，这两个属性当前只有webkit和moz支持。其中box-pack控制的是水平的左和右，取值有：start(居左)，center(居中)，end(居右)。box...
一、选择列表中的偶数标签 :nth-child(2n)二、选择列表中的奇数标签 :nth-child(2n-1)三、选择从第6个开始的，直到最后:nth-child(n+6)四、选择第1个到第6个 :nth-child(-n+6)一、两者结合使用，可以限制选择某一个范围，选择第6个到第9个 :nth-child(n+6):nth-child(-n+9) 原文：https://www.cnblogs.com/liweitao/p/13030445.html
这篇文章主要给大家介绍了利用CSS3伪元素实现逐渐发光的方格边框的相关资料，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。本文介绍的是一个使用伪元素来实现边框逐渐发光的代码，主要用到scale和opacity这两个属性。下面来看看详细的介绍：效果图如下：HTML代码：<p class="light"><img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500...
这篇文章主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、active和focus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！浏览器兼容性：E:hover 支持firefox、safari、Opera、ie8、chrome ------------E:active 支持firefox、safari、Opera、chrome ...
这篇文章主要给大家介绍了利用CSS3伪元素实现逐渐发光的方格边框的相关资料，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。本文介绍的是一个使用伪元素来实现边框逐渐发光的代码，主要用到scale和opacity这两个属性。下面来看看详细的介绍：效果图如下：HTML代码：<p class="light"><img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500...
这篇文章主要给大家介绍了利用CSS3伪元素实现逐渐发光的方格边框的相关资料，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。本文介绍的是一个使用伪元素来实现边框逐渐发光的代码，主要用到scale和opacity这两个属性。下面来看看详细的介绍：效果图如下：HTML代码：<p class="light"><img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500...
在网页设计过程中，使用css3图像边框属性可以大大的提升网页整体美观效果，以及丰富页面内容。那么css3中的图像边框属性也就是border-image 属性。推荐学习：《CSS3教程》下面我们就通过具体的代码示例，给大家介绍css3中border-image 属性用法。也就是将图像指定为元素周围的边框。代码如下：<!DOCTYPE>
<html>
<meta charset="utf-8">
<head><title></title><style type="text/css">#borderimg1 {width: 600px;border: 15px soli...
