A-A+

不常用但有用的css代码

1.禁止用户复制网页文本。

-webkit-user-select:none;

根据css手册。http://www.css88.com/book/css/properties/user-interface/user-select.htm

  • IE6-9不支持该属性,但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果;Safari和Chrome也支持该标签属性;
  • 直到Opera12.5仍然不支持该属性,但和IE6-9一样,也支持使用私有的标签属性 unselectable="on" 来达到 user-select:none 的效果;unselectable 的另一个值是 off;

JS Bin on jsbin.com

 

2.苹果浏览器输入框阴影效果去除

 

在Safari浏览器上,输入框上面会有阴影,若要去掉浏览器自带的阴影效果,添加代码即可。

-webkit-appearance:none;
3.英文文本的换行问题。

word-break、word-wrap

4.列表、菜单去掉最后一个边框。

一般是先设置所有的菜单边框,然后用last-child取消最后一个元素的边框,实际上也可以直接用

not(:last-child),不过要考虑兼容问题。

.nav li:not(:last-child) { border-right: 1px solid #eee; }

4.表格边框问题。

border-collapse:collapse; 表示边框合并在一起。不用再单独设置border-left等值了。

JS Bin on jsbin.com

 

5.对象内文本溢出时显示省略标记.
text-overflow:ellipsis;//单行、部分浏览器需要增加width属性。
overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;//行数,仅webkit内核的浏览器支持
    -webkit-box-orient: vertical;
js插件:https://github.com/FrDH/jQuery.dotdotdot
6.手机端点击拨打电话、发短信、发邮件。

<a href="tel:400-111-1111">立即拨打电话<a>

<a href="sms:12345678901">发送短信<a>

<a href="mailto:email@mail.com">发送邮件<a>

7.文字被选中时候的颜色

IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。

Firefox 支持替代的 ::-moz-selection。

::selection {

background: #FE6E66;

color: #FFF;

}

8.点击网站图片直接下载

<a href="/images/qawed.jpg" download="qazwsx">

引号内容即为图片下载时候的名字。(只有 Firefox 和 Chrome 支持 download 属性。)

 

9.取消表单项聚焦时产生的黄色边框:

input,button,select,textarea{outline:none}

 10.鼠标禁止效果

cursor:not-allowed;

其他鼠标样式参见:http://www.w3chtml.com/css3/properties/user-interface/cursor.html

11.textarea取消右下角的拖动手柄

resize:none

12.英文字母大小写、首字母大写问题

text-transform: uppercase、lowercase、capitalize。

13.列表的最后一项不需要底边线

.demo li:not(:last-child) {

border-bottom: 1px solid #ddd;

}

14.

如果页面存在一些内部滚动的区块,那么除了添加 overflow: scroll / auto,还要添加这行代码:

-webkit-overflow-scrolling: touch;

问题在于,移动设备浏览器对于 overflow: scroll 属性支持不够好,会滚动整个页面而不是期望的区块。

标签:

给我留言

Copyright © 花未全开月未圆 保留所有权利.   Theme  Ality 海外

用户登录