使用rem布局(js动态改变根字体大小),兼容pc端,设计稿750px <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <meta name="keywords" content="关键字"/> <meta name="description" content="描述"/> <!--360浏览器渲染模式优先级:极速/ie兼容/ie标准--> <meta name...
那些不常用却又很实用的CSS
[ 2018/02/02, 2464阅, 0评 ]
1.伪元素first-letter设置首字样式 /*首字下沉示例*/ p::first-letter{float:left;font-size:3em;line-height:1;color:#f00} 2.伪元素first-line设置段落第一行样式 p::first-line{color:#f00;font-weight:bold} 3.:nth-child(odd/even)选中奇偶行 当然也可以使用:nth-child(2n-1)和:nth-child(2n)实现 4.:not排除选择器 /*除开type为password之外的input...
css常用水平或垂直居中方法总结
[ 2017/11/16, 2738阅, 0评 ]
1.margin:0 auto水平居中 具体来说就是把要居中的元素的margin-left和margin-right都设为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效。 2.text-align:center水平居中 只能对图片,按钮,文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个浏览器中,它是能对任何元素进行水平居中的。 3.height和line-height让单行文字垂直居中 把文字的line-height设为文字父容器的高度,适用于只有一行文字的情况。 4....
单行文本溢出显示省略号 我是单行文本溢出显示省略号的效果咧 .test1{ /*示例css*/ background:#e5e5e5; width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 多行文本溢出显示省略号-webkit-line-clamp -webkit-line-clamp是一个不规范的属性,它没有出现在 CSS 规范草案中。它用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:...
text-align:justify实现单行文本两端对齐
[ 2017/11/07, 3898阅, 0评 ]
我们知道text-align:justify不会处理块内的最后一行文本(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)及被强制打断的行的两端对齐,但会处理除此之外的其它行,所以只需要将这里的单行变成多行即可,那么我们可以想办法给它增加一行,再把增加的这行隐藏掉即可。比如添加<span><i><em>等行内空标签,然后设置相应的css,但是加入HTML元素违反了结构表现分离的原则,因此我们可以使用after、before伪元素的方式来派生出新行,这样就不需要额外处理html代码,然后再将派生出的新行隐藏即可。 效果如下 .test{width...
css使用border做三角形
[ 2016/12/08, 2940阅, 0评 ]
网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形。我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margin:30px; height:200px; width:200px; border-top:solid 100px red; border-left:solid 100px green; border-right:solid 100px orange; border-bottom:solid 100px blue; } .t0{margin:...
css伪元素before和after的一些用法
[ 2016/12/08, 3336阅, 0评 ]
层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”。 :before 选择器在被选元素的内容前面插入内容。 :after 选择器在被选元素的内容后面插入内容。 用来清除浮动 .clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0} 用来插入图标 我用的before ...
自定义css3中placeholder的字体颜色
[ 2016/12/08, 2760阅, 0评 ]
placeholder属性是css3中新增加的属性,IE9和Opera12以下版本的CSS选择器均不支持占位文本。那么怎样设置它的默认字体颜色呢? /*WebKit browsers*/ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color:#666;} /*Mozilla Firefox 4 to 18*/ input:-moz-placeholder, textarea:-moz-placeholder{color:#666;} /*Mozilla Firefox 19+*/ ...
css让网站快速变灰
[ 2016/12/08, 2621阅, 0评 ]
每逢大的灾难的时候,很多网站变成了灰色,如何让网站快速变灰?css代码是很简单的,用的是css的filter功能。 html { filter: grayscale(100%);//IE浏览器 -webkit-filter: grayscale(100%);//谷歌浏览器 -moz-filter: grayscale(100%);//火狐 -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImag...