前端开发效果实例|网站前端开发_前端开发者
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
评论前必须登录!
注册