当前位置：彻底弄懂CSS盒子模式（DIV布局快速入门）[5]
文章来自:设计学院 | 发表时间:2007-10-5 16:20:15
这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：
001 
<styletype="text/css">
002
003<!--
004
005*{
006
007margin:0px;
008
009padding:0px;
010
011}
012
013body{
014
015font-family:Arial,Helvetica,sans-serif;
016
017font-size:12px;
018
019margin:0pxauto;
020
021height:auto;
022
023width:760px;
024
025border:1pxsolid#006633;
026
027}
028
029#header{
030
031height:100px;
032
033width:760px;
034
035background-image:url(headPic.gif);
036
037background-repeat:no-repeat;
038
039margin:0px0px3px0px;
040
041}
042
043#nav{
044
045height:25px;
046
047width:760px;
048
049font-size:14px;
050
051list-style-type:none;
052
053}
054
055#navli{
056
057float:left;
058
059}
060
061#navlia{
062
063color:#000000;
064
065text-decoration:none;
066
067padding-top:4px;
068
069display:block;
070
071width:97px;
072
073height:22px;
074
075text-align:center;
076
077background-color:#009966;
078
079margin-left:2px;
080
081}
082
083#navlia:hover{
084
085background-color:#006633;
086
087color:#FFFFFF;
088
089}
090
091#content{
092
093height:auto;
094
095width:740px;
096
097line-height:1.5em;
098
099padding:10px;
100
101}
102
103#contentp{
104
105text-indent:2em;
106
107}
108
109#contenth5{
110
111font-size:16px;
112
113margin:10px;
114
115}
116
117#footer{
118
119height:50px;
120
121width:740px;
122
123line-height:2em;
124
125text-align:center;
126
127background-color:#009966;
128
129padding:10px;
130
131}
132
133-->
134
135</style>
136
137结构代码是这样的：
138
139
<body>...</body><body>
140
141<divid="header"></div>
142
143<ulid="nav">
144
145<li><ahref="#">首页</a></li>
146
147<li><ahref="#">文章</a></li>
148
149<li><ahref="#">相册</a></li>
150
151<li><ahref="#">Blog</a></li>
152
153<li><ahref="#">论坛</a></li>
154
155<li><ahref="#">帮助</a></li>
156
157</ul>
158
159<divid="content">
160
161<h5>前言</h5>
162
163<p>第一段内容</p>
164
165<h5>理解CSS盒子模式</h5>
166
167<p>第二段内容</p>
168
169</div>
170
171<divid="footer">
172
173<p>|广告服务|客服中心|QQ留言|网站管理|会员登录</p><p>Copyright©2006-AllRightsReserved</p>
174
175</div>
176
177
</body>
<styletype="text/css"> 002
003
<!-- 004
005
*{ 006
007
margin:0px; 008
009
padding:0px; 010
011
} 012
013
body{ 014
015
font-family:Arial,Helvetica,sans-serif; 016
017
font-size:12px; 018
019
margin:0pxauto; 020
021
height:auto; 022
023
width:760px; 024
025
border:1pxsolid#006633; 026
027
} 028
029
#header{ 030
031
height:100px; 032
033
width:760px; 034
035
background-image:url(headPic.gif); 036
037
background-repeat:no-repeat; 038
039
margin:0px0px3px0px; 040
041
} 042
043
#nav{ 044
045
height:25px; 046
047
width:760px; 048
049
font-size:14px; 050
051
list-style-type:none; 052
053
} 054
055
#navli{ 056
057
float:left; 058
059
} 060
061
#navlia{ 062
063
color:#000000; 064
065
text-decoration:none; 066
067
padding-top:4px; 068
069
display:block; 070
071
width:97px; 072
073
height:22px; 074
075
text-align:center; 076
077
background-color:#009966; 078
079
margin-left:2px; 080
081
} 082
083
#navlia:hover{ 084
085
background-color:#006633; 086
087
color:#FFFFFF; 088
089
} 090
091
#content{ 092
093
height:auto; 094
095
width:740px; 096
097
line-height:1.5em; 098
099
padding:10px; 100
101
} 102
103
#contentp{ 104
105
text-indent:2em; 106
107
} 108
109
#contenth5{ 110
111
font-size:16px; 112
113
margin:10px; 114
115
} 116
117
#footer{ 118
119
height:50px; 120
121
width:740px; 122
123
line-height:2em; 124
125
text-align:center; 126
127
background-color:#009966; 128
129
padding:10px; 130
131
} 132
133
--> 134
135
</style> 136
137
结构代码是这样的： 138
139
<body>...</body><body> 140
141
<divid="header"></div> 142
143
<ulid="nav"> 144
145
<li><ahref="#">首页</a></li> 146
147
<li><ahref="#">文章</a></li> 148
149
<li><ahref="#">相册</a></li> 150
151
<li><ahref="#">Blog</a></li> 152
153
<li><ahref="#">论坛</a></li> 154
155
<li><ahref="#">帮助</a></li> 156
157
</ul> 158
159
<divid="content"> 160
161
<h5>前言</h5> 162
163
<p>第一段内容</p> 164
165
<h5>理解CSS盒子模式</h5> 166
167
<p>第二段内容</p> 168
169
</div> 170
171
<divid="footer"> 172
173
<p>|广告服务|客服中心|QQ留言|网站管理|会员登录</p><p>Copyright©2006-AllRightsReserved</p> 174
175
</div> 176
177
</body>
