常用CSS前端开发效果实例总结

前端开发效果实例|网站前端开发_前端开发者

1、每逢大的灾难的时候,很多网站变成了灰色,如何让网站快速变灰?css代码是很简单的,用的是css的filter功能。
html 代码

还会存在一些兼容问题,不能适应所有网站

2、给input的placeholder设置颜色
html 代码

3、css :after 和:before选择器
html 代码

写了这个clearfix,可以让外层div包裹整个内层,符合谷歌闭合机制。
4、透明度
html 代码

IE7和IE6中opacity是没有用的,在IE6中DIV透明的方法一般用filter;
html 代码

5、超出长度显示省略号
单行文本显示…
一般要指定宽度,然后给如下四个属性。
html 代码

多行文本显示….

主要属性-webkit-line-clamp
html 代码

这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器
6、阴影效果
html 代码

7、css强制换行和不换行
自动换行
html 代码

强制英文单词断行

html 代码

强制不换行
html 代码

8、CSS3的一些前缀总结
css3为了更好的兼容多个浏览器,通常前面加一大堆前缀
html 代码

html 代码

html 代码

9、css3的box-sizing
给了两个并排带边框的div百分比宽度,假如不用box-sizing,边框的宽度会在行内显示。用box-sizing:border-box,可以去除边框的占位。
浏览器支持IE9以上及火狐、谷歌、Opera等等。
html 代码

10、模糊遮罩效率,模糊滤镜效果
html 代码

11.inline-block
inline-block会把换行会自动解析为空格.
对父元素进行font-size:0;可以消除这个空隙.
12.z-index
z-index:只在有定位的元素上起作用;
13.js判断客户端是否为PC还是手持设备
html 代码

前端开发效果实例|网站前端开发_前端开发者
https://www.rokub.com
» 本文来自:前端开发者 » 《常用CSS前端开发效果实例总结》
» 本文链接地址:https://www.rokub.com/2731.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!