整合实用的CSS样式代码片段 - 前端劝退师

整合实用的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;
本文最后更新于2019-7-21,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
打赏
未经允许不得转载:

作者: 前端劝退师, 转载或复制请以 超链接形式 并注明出处 前端劝退师
原文地址: 《整合实用的CSS样式代码片段》 发布于2019-7-21

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏