经过有两年的网页制作经验,让我总结出了一套我个人的css框架。
我的css文件主要分: reset.css layout.css base.css 其它模块样式。
reset.css(主要重构浏览器基本样式,这样大大减少了各种浏览器之间的兼容性)
借鉴了为之漫笔的样式总结成得来的。
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
fieldset, img {
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
font-style: normal;
font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
abbr, acronym {
border: 0;
font-variant: normal;
}
input, button, textarea,
select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
code, kbd, samp, tt {
font-size: 100%;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
*font-size: 100%;
}
body {
line-height: 1.5;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th {
text-align: left;
}
sup, sub {
font-size: 100%;
vertical-align: baseline;
}
/* remember to highlight anchors and inserts somehow! */
:link, :visited , ins {
text-decoration: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
layout.css(主要编写每个页面的布局样式包括清除浮动的样式)
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
base.css(说是编写一些模块性的,全局样式)
body {font-family: Tahoma, Helvetica, Arial, sans-serif; }
input, label, select, option, textarea, button, fieldset, legend {
font-family:Tahoma,sans-serif;
}
a:link,a:hover,a:visited,a:active{}
还有一个专门处理Bug的样式文件 bug.css
页面其它模块样式
推荐框架:http://www.iteye.com/news/3094