您的位置:首页 > Web前端 > CSS

css技巧收藏

2012-11-26 13:34 363 查看
属性重置

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}

del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}


根据文件格式显示不同的链接样式

/* external links */
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}


影子盒

box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);


文本框和按钮的漂亮样式,兼容浏览器

.intxt
{
border: 1px solid #D8D8D8;
width: 200px;
height: 18px;
padding: 5px 0 5px 5px;
line-height: 18px;
font-size: 14px;
box-shadow: inset 1px 1px 2px #E9E9E9;
}
.serchBut
{
width: 108px;
height: 28px;
border: 1px solid #D87114;
font-size: 14px;
cursor: pointer;
background: #FF9E32;
background: -moz-linear-gradient(top, #FFD29A 0, #FFA53A 5%, #FF882A 100%);
background: -webkit-linear-gradient(top, #FFD29A 0, #FFA53A 5%, #FF882A 100%);
background: linear-gradient(to bottom, #FFD29A 0, #FFA53A 5%, #FF882A 100%);
}


让div在body中垂直居中

position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;


使用图片集。可以放在一个span里面,但是里面不用放空格已腾出空间

.ico
{
background: url(/images/Menpiao/iconset.png) no-repeat -100px -100px;
padding-left:20px;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: