先写全局的样式
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;} ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;} ul { list-style:none;} img { border:0px;} a { color:#05a; text-decoration:none;} a:hover { color:#f00;}
全局的样式定义完后,下面定义以上几大块的样式,先设置下#containerr的样式如下:
#container { width:900px; margin:0 auto;}
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; } :focus { outline: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } input, button, textarea, select { *font-size: 100%;} textarea { overflow:auto; } body { line-height: 1.5; } ol, ul { list-style: none; } :link, :visited, ins { text-decoration: none; } body { font: 14px/1.5 "Microsoft Yahei", "Hiragino Sans GB", Helvetica, "Helvetica Neue", "微软雅黑", Tahoma, Arial, sans-serif; color: #14191e; }
a链接样式
a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */
a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; } a:hover { color: #FFF; text-decoration: none; background: #333; }