22个必须知道的css技巧
1、改变选中文字的背景和颜色
::selection{ /* Safari and Opera */
background:#c3effd;
color:#000;
}
::-moz-selection{ /* Firefox */
background:#c3effd;
color:#000;
}
2、防止火狐滚动条跳动
html{ overflow-y:scroll; }
3、分页打印
.page-break{ page-break-before:always; }
4、使用!important
.page { background-color:blue !important; background-color:red;}
5、图像替换文字
.header{
text-indent:-9999px;
background:url('someimage.jpg') no-repeat;
height: 100px; /*dimensions equal to image size*/
width:500px;
}
标注:text-indent:-9999px; 是将首行左缩进到人看不到的地方
6、兼容浏览器的最小高度
#container{
height:auto !important;/*all browsers except ie6 will respect the !important flag*/
min-height:500px;
height:500px;/*Should have the same value as the min height above*/
}
7、对新窗口打开得链接高亮显示
a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "\279C";
}
8、美化li序列号
如图:
ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
9、首字下沉
如图:
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:3.0em;
font-family:Georgia;
}
10、兼容浏览器的opacity
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
11、使用line-height实现垂直居中
line-height:30px;
12、居中布局
body{
width:1000px;
margin:0 auto;
}
13、移除ie文本域的垂直滚动条
textarea{
overflow:auto;
}
14、移动超链接的虚线框
a:active, a:focus{ outline:none; }
15、ie下元素消失,给该元素添加
position:relative;
16、根据链接不一样,添加不一样的icons
a[href$='.doc'] {
padding:0 20px 0 0;
background:transparent url(/graphics/icons/doc.gif) no-repeat center right;
}
17、css手型点击样式
input[type=submit],label,select,.pointer { cursor:pointer; }
18、字母大写
text-transform: capitalize;
19、所有英文大写,且首字母比其他的大
font-variant:small-caps;
20、高亮文本框,不支持ie
input[type=text]:focus, input[type=password]:focus{
border:2px solid #000;
}
21、移除img边框
a img{ border:none; }
22、用label实现无表格表单
HTML Code
<form method="post" action="#" >
<p><label for="username" >Username</label>
<input type="text" id="username" name="username" />
</p>
<p><label for="password" >Username</label>
<input type="password" id="password" name="pass" />
</p>
<p><input type="submit" value="Submit" /></p>
</form>
CSS Code
p label{
width:100px;
float:left;
margin-right:10px;
text-align:right;
}
参考:http://www.cnblogs.com/guoguo-15/archive/2011/08/24/2151859.html
22个必须知道的css技巧的更多相关文章
- 每个新手程序员都必须知道的Python技巧
当下,Python 比以往的任何时候都更加流行,人们每天都在实践着 Python 是多么的强大且易用. 我从事 Python 编程已经有几年时间了,但是最近6个月才是全职的.下面列举的这些事情,是我最 ...
- 转15个必须知道的chrome开发者技巧GIF
在Web开发者中,Google Chrome是使用最广泛的浏览器.六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具.你可能已经熟悉了它的部分功能,如使用console和 ...
- 15个必须知道的chrome开发者技巧(转)
15个必须知道的chrome开发者技巧 在Web开发者中,Google Chrome是使用最广泛的浏览器.六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具.你可能已经熟 ...
- 你必须知道的10个提高Canvas性能技巧
你还在抱怨自己写的canvas demo徘徊在10帧以下吗?你还在烦恼打开自己写的应用就听见CUP风扇转吗?你正在写一个javascript Canvas库吗?那么下面九点就是你必须知道的! 一.预渲 ...
- 《jQuery风暴》第2章 必须知道的JavaScript知识
第2章 必须知道的JavaScript知识 JavaScript是jQuery应用的基础,掌握JavaScript这门语言是使用jQuery的基础条件.本章不会全面细致的讲解JavaScript的全部 ...
- 前端开发必须知道的JS(二) 闭包及应用
http://www.cnblogs.com/ljchow/archive/2010/07/06/1768749.html 在前端开发必须知道的JS(一) 原型和继承一文中说过下面写篇闭包,加之最近越 ...
- [你必须知道的.NET]第三十回:.NET十年(下)
发布日期:2009.05.11 作者:Anytao © 2009 Anytao.com ,Anytao原创作品,转贴请注明作者和出处. /// <summary> /// 本文部分内容,已 ...
- 程序员必须知道的HTML常用代码有哪些?
HTML即超文本标记语言,是目前应用最为广泛的语言之一,是组成一个网页的主要语言.在现今这个HTML5华丽丽地占领了整个互联网的时候,如果想要通过网页抓住浏览者的眼球光靠因循守旧是不行的,程序猿们需要 ...
- Webservice WCF WebApi 前端数据可视化 前端数据可视化 C# asp.net PhoneGap html5 C# Where 网站分布式开发简介 EntityFramework Core依赖注入上下文方式不同造成内存泄漏了解一下? SQL Server之深入理解STUFF 你必须知道的EntityFramework 6.x和EntityFramework Cor
Webservice WCF WebApi 注明:改编加组合 在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下, ...
随机推荐
- php返回数据格式
PHP返回HTML代码: header('Content-type:text/html; charset=utf-8'); PHP返回xml代码:header('content-type: t ...
- mysql 存储引擎介绍
一 存储引擎解释 首先确定一点,存储引擎的概念是MySQL里面才有的,不是所有的关系型数据库都有存储引擎这个概念,后面我们还会说,但是现在要确定这一点. 在讲清楚什么是存储引擎之前,我们先来个比喻, ...
- Ubuntu14上安装Mongo3.2
1. 安装 sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys D68FA50FEA312927 echo "deb ...
- NPOI2.0导出excel之添加样式、边框和表头
//优化后导出excel public System.IO.Stream ExcelStream(string search) // { var orderBusiniss = Containers. ...
- 使用vlookup函数下拉全部相同解决
菜单“公式”-“计算选项”改为自动 ref: https://zhidao.baidu.com/question/561971299094821004.html
- 练习五十六:for循环
某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的,加密规则如下:每位数字都加上5,然后用和除以10的余数代替该数字,再将第一位和第四位交换,第二位和第三位交换 方法一: def o ...
- NMS_非极大值抑制(转)
NMS(non maximum suppression),中文名非极大值抑制,在很多计算机视觉任务中都有广泛应用,如:边缘检测.目标检测等. 这里主要以人脸检测中的应用为例,来说明NMS,并给出Mat ...
- vmware虚拟机提示:无法将Ethernet0连接到虚拟网络vmnet02018-03-07
编辑——虚拟机网络编辑——还原虚拟机网络配置可以解决
- canvas基础入门(一)canvas的width、height于css样式中的宽高区别
canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...
- 6-----selenuim和phantonJs处理网页动态加载数据的爬取
动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding ...