整合实用的CSS样式代码片段

1.基础样式(便于搜索引擎)

background: url(../images/journalism.gif) left 0px no-repeat;
transparent
color: #FFF;   白色字体 选项卡变色
font-weight: bold;加粗
cursor:pointer; 把鼠标放上会变成小手
border-radius: 10px;边框线变成圆角
border-bottom-style:dotted; 虚线
box-shadow: -2px 0px 35px 10px #DBDBDB;阴影
onFocus="this.value='';鼠标点击 默认值消失
white-space:pre-wrap;word-wrap : break-word ; 自动换行
resize:none; 删除多行文本框拖拽
background-position:left top 50%;背景图靠左 垂直居中
width: 245px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;设置文本缩略

 

2.常用浏览器的兼容写法

background-color: #CC00FF;      火狐
background-color: #FF0000\9;    ie8
*background-color: #0066FF;    ie7 
_background-color: #009933;   ie6

 

3.老版本IE去除杂项的方法

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

 

4.正则表达式去除所有href标签内的链接(仿站神器)

href=\"\S*\"

 

5.自适应屏幕各分辨率的适配写法

从上面我们可以看出有几个临界点的分辨率,那么我们就可以轻松的来写自己的自适应代码了
@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }
注意下顺序,如果你把@media (min-width: 768px)写在了下面那么很悲剧,
@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }
因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }

 

6.自适应手机头部标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

 

7.调用本地自体

@font-face {
  font-family: apple;
  src: url('../fonts/apple.ttf');
}
font-family: "apple"

 

8.去除浏览器自带的样式

-webkit-appearance: none;
联系作者
作者QQ:1538888858 有事请联系作者

Article tags:

作者头像
前端劝退师创始人

分享前端开发资源和前端开发技术资讯等,主攻前后端分离技术;分享个人经历。

Next整合实用的JS代码片段

发表评论

评论列表

暂无评论