利用jQuery打造个性网站

网页结构

编写全局样式(reset.css)

/*全局样式*/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td
    {
    margin: 0;
    padding: 0;
}

body,button,input,select,textarea {
    font: 12px/1.5 tahoma, arial, \5b8b\4f53;
}

h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
}

address,cite,dfn,em,var {
    font-style: normal;
}

code,kbd,pre,samp {
    font-family: courier new, courier, monospace;
}

small {
    font-size: 12px;
}

ul,ol {
    list-style: none;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

legend {
    color: #000;
}

fieldset,img {
    border: 0;
}

button,input,select,textarea {
    font-size: 100%;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.clear {
    clear: both;
    float: none;
    height: 0;
    overflow: hidden;
}

html .hide {
    display: none;
}

首先使用元素标签将每个元素的margin和padding属性都设置为零。这样做的好处是，可以让页面不受到不同浏览器默认设置的页边距和字边距的影响。

设置<body>元素的字体颜色，字号大小，这样得意规范整个网站的样式风格。

设置其他元素的特定形式。

编写重用的样式

/*头部样式开始*/
#header {
    background: url("../images/headerbg.png") repeat-x scroll 0 0 #FFFFFF;
    height: 105px;
    border: medium double red;//标示边框
}

#header .contWidth {
    position: relative;
    height: 105px;
    margin: 0 auto;
    width: 990px;
    z-index: 100;}