首先介绍一下系统总框架
入口：Home.aspx->注册页:Register.aspx
or
入口：Home.aspx->已注册用户的个人空间：我的主页.aspx->更改个人信息页：更改个人信息页面.aspx
or
入口：Home.aspx->已注册用户的个人空间：我的主页.aspx->查看帖子，回复帖子：TipDetails.aspx
每一个aspx文件对应于一个网页，每一个aspx文件都会对应一个aspx.cs的文件，定义网页动作的各个函数
每一个aspx.cs文件都有一个 protected void Page_Load(object sender, EventArgs e) 函数，用于表明加载网页的时候执行何种操作
首先讲一下如何在一个项目中新建一个网页：工程-》添加新项-》webForm,这和新建文件有所不同
此次我们讲一下CSS，Cascading Style Sheet 的缩写。译作 层叠样式表单。用来表明网页设计的风格
我们写了一个CSS文件，然后在如上的各个网页中引用上述CSS文件
引用办法如下
<head runat="server">
<title>Untitled Page</title>
<link href="cssStyle.css" rel="stylesheet" type="text/css" />
</head>
即在head标签中指明标榜网页格式的CSS文件地址
附录：CSS文件源码
CSS源码
1 body
2 {
3 margin: 0;
4 padding: 0;
5 line-height: 1.5em;
6 font-family: Verdana, Arial, san-serif;
7 font-size: 15px;
8 color: #CCC;
9 background:#000 url(image/main_bg.jpg) top repeat-x;
10 }
11
12 /********** Home Page tip_detail ***************/
13 #header_panel {
14 clear: both;
15 width:100%;
16 margin: 0 auto;
17 background: #000000 url(image/top_bg.jpg) top center no-repeat;
18 }
19
20 #header_panel #header_section{
21 clear: both;/**清除两边的浮动元素***/
22 width: 960px;
23 height: 293px;
24 margin: 0 auto;
25
26 }
27
28 #header_section #title_section{
29 font-size: 55px;
30 padding: 130px 0 10px 10px;
31 color: #f5ea01;
32 }
33
34 #header_section #tagline {
35 padding: 15px 0 0 165px;
36 font-size: 20px;
37 color: #6b5927;
38 }
39
40 #menu_panel{
41 clear: both;
42 width:100%;
43 height: 47px;
44 margin: 0 auto;
45 margin-bottom: 10px;
46 color: #ffffff;
47 background: #000000 url(image/menu_bg_repeat.jpg) repeat-x;
48 }
49
50 #menu_panel #menu_section{
51 width: 930px;
52 left:15%;
53 height: 47px;
54 margin:0 auto;
55 padding: 15px 0 0 30px;
56 color: #03a0a6;
57 background: url(images/menu_bg.jpg) no-repeat;
58 }
59
60
61
62 #menu_section a{
63 float: left;
64 width: 110px;
65 padding: 2px 0;
66 margin-right: 5px;
67 font-size: 16px;
68 font-weight: bold;
69 text-align: center;
70 text-decoration: none;
71 color: #99930d;
72 border-right: 1px solid #333;
73 }
74
75 #menu_section a:hover{
76 color: #f5ea01;
77 }
78
79 #content {
80 clear: both;
81 width: 960px;
82 margin: 0 auto;
83 }
84
85 #content_column_one {
86 float: left;
87 width: 25%;
88 height:605px;
89 border: 1px solid #846f34;
90 margin: 0 0 0 10px;
91 padding: 10px 0 10px 0;
92 left:20%;
93 background: #6b5927 url(image/180_column_bg.jpg) top center no-repeat;
94 }
95
96 #content_column_one a
97 {
98 clear:both;
99 text-align:center;
100 font-size:20px;
101 font-weight:bold;
102 color:#ff0011;
103 }
104
105 #bottom_panel{
106 width: 960px;
107 margin: 10px auto 0 auto;
108 padding: 20px 0;
109 background: url(image/bottom_panel_bg.jpg) top center;
110 }
111
112 #bottom_panel .bottom_panel_section {
113 margin-left: 10px;
114 width: 550px;
115 margin-bottom: 0px;
116 }
117
118 #bottom_panel_section a
119 {
120 clear:both;
121 font-size:20px;
122 margin-left:20%;
123 margin-right:20%;
124 margin-top:2px;
125 }
126
127 /***** register ********/
128 #regist
129 {
130 clear:both;
131 width: 60%;
132 height:80%;
133 margin: 0px 10% 0 10%;
134 float:right;
135 padding: 10px 0 10px 10%;
136 background-image:url(image/web45.jpg);
137 }
138 #regist #table3
139 {
140 clear:both;
141 text-align:center;
142 padding:2px 10px 0 10%;
143 margin:2px 2px 0 2%;
144 left:30%;
145
146
147 }
148 #table3 tr
149 {
150 text-align:center;
151 padding:2px 2px 2px 2px;
152 left:10%;
153
154 }
155
156 #table3 td
157 {
158 clear:both;
159 padding:2px 2px 2px 2px;
160
161 }
162
163 /*** tip_detail ****/
164 /*** change ****/
165 #table4
166 {
167
168 width :100%;
169
170 }
171 #table4 tr
172 {
173 height:50px;
174 }
175 #table4 td
176 {
177 clear:both;
178 color:Red;
179 width:187px;
180
181 }
182 /******* user page *********/
183 #content_column_two {
184 float: left;
185 width: 460px;
186 margin: 0 0 0 10px;
187 padding: 0;
188 }
189 #content_column_three {
190 float: left;
191 width: 278px;
192 padding: 10px 0 10px 0;
193 margin: 0 0 0 10px;
194 border: 1px solid #312f2b;
195 background: #181714;
196 }
197
198 #table5
199 {
200 width:100%;
201 text-align:center;
202 }
203 #table tr
204 {
205 padding-top:5px;
206 padding-left:10px;
207 }
208 #table td
209 {
210 padding-top:5px;
211 padding-bottom:5px;
212 }
213 #table #button
214 {
215 clear:both;
216 padding:2px 10px 2px 10px;
217 border-right: black 4px dashed; border-top: black 4px dashed;
218 margin: 3px 20px; border-left: black 4px dashed;
219 border-bottom: black 4px dashed;
220 left: 20px;
221 position: relative;
222 top: 2px;
223 Width:83px;
224 }
225 /******* used for all **********/
226 #textbox{
227 font-family:Verdana, Arial, Helvetica, sans-serif;
228 font-size:1em;
229 width:151px;
230 color: #494949;
231 background: #f4f4f4;
232 border: 1px inset #999;
233 padding-left: 1px;
234 }
235
236 #password{
237 font-family:Verdana, Arial, Helvetica, sans-serif;
238 font-size:1em;
239 width:148px;
240 color: #494949;
241 background: #f4f4f4;
242 border: 1px inset #999;
243 padding-left: 1px;
244 }
245 input.button {
246 margin: 0;
247 padding: 2px 3px;
248 width:40px;
249 border: 1px solid #499279; }
250
251 span
252 {
253 clear:both;
254 margin-left:3px; margin-top:3px; position:relative; float:left;width:100%;
255 font-size:large; height:30px;
256 color:Yellow;
257 }
258
259 #divtop
260 {
261 height :150px;
262 width:96%;
263 margin-left:2%;
264 margin-right:0;
265 margin-bottom:2%;
266 margin-top:0px;
267 background-repeat:repeat-x;
268 background-attachment:fixed;
269 }
270 #divleft
271 {
272 float :left;
273
274 height :605px;
275 width:20%;
276 margin-left:2%;
277 margin-bottom:2%;
278 margin-right:0px;
279 margin-top:5px;
280
281 }
282 #divright
283 {
284 float:left;
285 margin :0,auto,0,auto;
286 height :70%;
287
288 height:605px;
289 width:65%;
290 margin-left:1%;
291 margin-bottom:2%;
292 margin-right:2%;
293 margin-top:5px;
294 background-image:url(图片/hua.jpg);
295 background-repeat:repeat-y;
296 background-position:left;
297
298 }
299 #divfoot
300 {
301 height :204px;
302 margin-left:2%;
303 margin-right:2%;
304 margin-bottom:5px;
305 margin-top:10px;
306
307 }
308
309 /*
310 #textbox{
311 margin-left:0px; position:relative; float:left ; margin-top:23px;
312 }
313 #button{
314 margin-left:60px; position:relative; margin-top:23px; float:left; width:43px; text-align:center; background-color:LawnGreen;
315 }*/
316 #htplink
317 {
318 clear:both;
319 position:relative; margin-top:25px; margin-left:4px; float:left; width:70%; text-align:center; background-color:Orange;
320 }
321 #top
322 {
323 height :150px;
324 width:96%;
325 margin-left:2%;
326 margin-right:0;
327 margin-bottom:2%;
328 margin-top:0px;
329 background-color:Red;
330 float:left;
331 }
332
333 #left
334 {
335 float :left;
336 height :605px;
337 width:27%;
338 margin-left:0%;
339 margin-bottom:2%;
340 margin-right:0px;
341 margin-top:5px;
342 background-color:Blue;
343
344 }
345 #right
346 {
347 float:left;
348 margin :0,auto,0,auto;
349 height :70%;
350
351 height:605px;
352 width:65%;
353 margin-left:1%;
354 margin-bottom:2%;
355 margin-right:2%;
356 margin-top:5px;
357 background-image:url(图片/sun.jpg);
358 background-repeat:repeat-y;
359 background-position:left;
360 }
361 /*
362 table tr
363 {
364
365 height:30px;
366 background-color:Transparent;
367 text-align:center;
368
369 }
370 tr td
371 {
372 width:10%;
373 height:30px;
374 float:left;
375 }
376 */
377 #content_column_one #table1 {
378 border-collapse: collapse;
379 margin: 10px auto 15px auto;
380
381 }
382 #table1 tr
383 {
384 padding-bottom:0px;
385 padding-top:1px;
386 height:30px;
387 }
388 #table1 td
389 {
390 padding: 0 0px;
391 height: 25px;
392 text-align:right;
393 }
394
395 #content_column_one #table2 {
396 border-collapse: collapse;
397 margin: 10px auto 15px auto;
398 border: 1px solid #ffdcf8;
399 }
400 #table2 tr
401 {
402 width:100%;
403 padding-bottom:1px;
404 padding-top:1px;
405 height:30px;
406
407 }
408 #table2 td
409 {
410 padding: 0 0px;
411 height: 25px;
412 text-align:right;
413 }
414
415 a:visited {
416 color: #f5ea01;
417 text-decoration: none;
418 font-weight: bold;
419 }
420 a:active, a:hover {
421 color: #f5ea01;
422 text-decoration: underline;
423 }
2 {
3 margin: 0;
4 padding: 0;
5 line-height: 1.5em;
6 font-family: Verdana, Arial, san-serif;
7 font-size: 15px;
8 color: #CCC;
9 background:#000 url(image/main_bg.jpg) top repeat-x;
10 }
11
12 /********** Home Page tip_detail ***************/
13 #header_panel {
14 clear: both;
15 width:100%;
16 margin: 0 auto;
17 background: #000000 url(image/top_bg.jpg) top center no-repeat;
18 }
19
20 #header_panel #header_section{
21 clear: both;/**清除两边的浮动元素***/
22 width: 960px;
23 height: 293px;
24 margin: 0 auto;
25
26 }
27
28 #header_section #title_section{
29 font-size: 55px;
30 padding: 130px 0 10px 10px;
31 color: #f5ea01;
32 }
33
34 #header_section #tagline {
35 padding: 15px 0 0 165px;
36 font-size: 20px;
37 color: #6b5927;
38 }
39
40 #menu_panel{
41 clear: both;
42 width:100%;
43 height: 47px;
44 margin: 0 auto;
45 margin-bottom: 10px;
46 color: #ffffff;
47 background: #000000 url(image/menu_bg_repeat.jpg) repeat-x;
48 }
49
50 #menu_panel #menu_section{
51 width: 930px;
52 left:15%;
53 height: 47px;
54 margin:0 auto;
55 padding: 15px 0 0 30px;
56 color: #03a0a6;
57 background: url(images/menu_bg.jpg) no-repeat;
58 }
59
60
61
62 #menu_section a{
63 float: left;
64 width: 110px;
65 padding: 2px 0;
66 margin-right: 5px;
67 font-size: 16px;
68 font-weight: bold;
69 text-align: center;
70 text-decoration: none;
71 color: #99930d;
72 border-right: 1px solid #333;
73 }
74
75 #menu_section a:hover{
76 color: #f5ea01;
77 }
78
79 #content {
80 clear: both;
81 width: 960px;
82 margin: 0 auto;
83 }
84
85 #content_column_one {
86 float: left;
87 width: 25%;
88 height:605px;
89 border: 1px solid #846f34;
90 margin: 0 0 0 10px;
91 padding: 10px 0 10px 0;
92 left:20%;
93 background: #6b5927 url(image/180_column_bg.jpg) top center no-repeat;
94 }
95
96 #content_column_one a
97 {
98 clear:both;
99 text-align:center;
100 font-size:20px;
101 font-weight:bold;
102 color:#ff0011;
103 }
104
105 #bottom_panel{
106 width: 960px;
107 margin: 10px auto 0 auto;
108 padding: 20px 0;
109 background: url(image/bottom_panel_bg.jpg) top center;
110 }
111
112 #bottom_panel .bottom_panel_section {
113 margin-left: 10px;
114 width: 550px;
115 margin-bottom: 0px;
116 }
117
118 #bottom_panel_section a
119 {
120 clear:both;
121 font-size:20px;
122 margin-left:20%;
123 margin-right:20%;
124 margin-top:2px;
125 }
126
127 /***** register ********/
128 #regist
129 {
130 clear:both;
131 width: 60%;
132 height:80%;
133 margin: 0px 10% 0 10%;
134 float:right;
135 padding: 10px 0 10px 10%;
136 background-image:url(image/web45.jpg);
137 }
138 #regist #table3
139 {
140 clear:both;
141 text-align:center;
142 padding:2px 10px 0 10%;
143 margin:2px 2px 0 2%;
144 left:30%;
145
146
147 }
148 #table3 tr
149 {
150 text-align:center;
151 padding:2px 2px 2px 2px;
152 left:10%;
153
154 }
155
156 #table3 td
157 {
158 clear:both;
159 padding:2px 2px 2px 2px;
160
161 }
162
163 /*** tip_detail ****/
164 /*** change ****/
165 #table4
166 {
167
168 width :100%;
169
170 }
171 #table4 tr
172 {
173 height:50px;
174 }
175 #table4 td
176 {
177 clear:both;
178 color:Red;
179 width:187px;
180
181 }
182 /******* user page *********/
183 #content_column_two {
184 float: left;
185 width: 460px;
186 margin: 0 0 0 10px;
187 padding: 0;
188 }
189 #content_column_three {
190 float: left;
191 width: 278px;
192 padding: 10px 0 10px 0;
193 margin: 0 0 0 10px;
194 border: 1px solid #312f2b;
195 background: #181714;
196 }
197
198 #table5
199 {
200 width:100%;
201 text-align:center;
202 }
203 #table tr
204 {
205 padding-top:5px;
206 padding-left:10px;
207 }
208 #table td
209 {
210 padding-top:5px;
211 padding-bottom:5px;
212 }
213 #table #button
214 {
215 clear:both;
216 padding:2px 10px 2px 10px;
217 border-right: black 4px dashed; border-top: black 4px dashed;
218 margin: 3px 20px; border-left: black 4px dashed;
219 border-bottom: black 4px dashed;
220 left: 20px;
221 position: relative;
222 top: 2px;
223 Width:83px;
224 }
225 /******* used for all **********/
226 #textbox{
227 font-family:Verdana, Arial, Helvetica, sans-serif;
228 font-size:1em;
229 width:151px;
230 color: #494949;
231 background: #f4f4f4;
232 border: 1px inset #999;
233 padding-left: 1px;
234 }
235
236 #password{
237 font-family:Verdana, Arial, Helvetica, sans-serif;
238 font-size:1em;
239 width:148px;
240 color: #494949;
241 background: #f4f4f4;
242 border: 1px inset #999;
243 padding-left: 1px;
244 }
245 input.button {
246 margin: 0;
247 padding: 2px 3px;
248 width:40px;
249 border: 1px solid #499279; }
250
251 span
252 {
253 clear:both;
254 margin-left:3px; margin-top:3px; position:relative; float:left;width:100%;
255 font-size:large; height:30px;
256 color:Yellow;
257 }
258
259 #divtop
260 {
261 height :150px;
262 width:96%;
263 margin-left:2%;
264 margin-right:0;
265 margin-bottom:2%;
266 margin-top:0px;
267 background-repeat:repeat-x;
268 background-attachment:fixed;
269 }
270 #divleft
271 {
272 float :left;
273
274 height :605px;
275 width:20%;
276 margin-left:2%;
277 margin-bottom:2%;
278 margin-right:0px;
279 margin-top:5px;
280
281 }
282 #divright
283 {
284 float:left;
285 margin :0,auto,0,auto;
286 height :70%;
287
288 height:605px;
289 width:65%;
290 margin-left:1%;
291 margin-bottom:2%;
292 margin-right:2%;
293 margin-top:5px;
294 background-image:url(图片/hua.jpg);
295 background-repeat:repeat-y;
296 background-position:left;
297
298 }
299 #divfoot
300 {
301 height :204px;
302 margin-left:2%;
303 margin-right:2%;
304 margin-bottom:5px;
305 margin-top:10px;
306
307 }
308
309 /*
310 #textbox{
311 margin-left:0px; position:relative; float:left ; margin-top:23px;
312 }
313 #button{
314 margin-left:60px; position:relative; margin-top:23px; float:left; width:43px; text-align:center; background-color:LawnGreen;
315 }*/
316 #htplink
317 {
318 clear:both;
319 position:relative; margin-top:25px; margin-left:4px; float:left; width:70%; text-align:center; background-color:Orange;
320 }
321 #top
322 {
323 height :150px;
324 width:96%;
325 margin-left:2%;
326 margin-right:0;
327 margin-bottom:2%;
328 margin-top:0px;
329 background-color:Red;
330 float:left;
331 }
332
333 #left
334 {
335 float :left;
336 height :605px;
337 width:27%;
338 margin-left:0%;
339 margin-bottom:2%;
340 margin-right:0px;
341 margin-top:5px;
342 background-color:Blue;
343
344 }
345 #right
346 {
347 float:left;
348 margin :0,auto,0,auto;
349 height :70%;
350
351 height:605px;
352 width:65%;
353 margin-left:1%;
354 margin-bottom:2%;
355 margin-right:2%;
356 margin-top:5px;
357 background-image:url(图片/sun.jpg);
358 background-repeat:repeat-y;
359 background-position:left;
360 }
361 /*
362 table tr
363 {
364
365 height:30px;
366 background-color:Transparent;
367 text-align:center;
368
369 }
370 tr td
371 {
372 width:10%;
373 height:30px;
374 float:left;
375 }
376 */
377 #content_column_one #table1 {
378 border-collapse: collapse;
379 margin: 10px auto 15px auto;
380
381 }
382 #table1 tr
383 {
384 padding-bottom:0px;
385 padding-top:1px;
386 height:30px;
387 }
388 #table1 td
389 {
390 padding: 0 0px;
391 height: 25px;
392 text-align:right;
393 }
394
395 #content_column_one #table2 {
396 border-collapse: collapse;
397 margin: 10px auto 15px auto;
398 border: 1px solid #ffdcf8;
399 }
400 #table2 tr
401 {
402 width:100%;
403 padding-bottom:1px;
404 padding-top:1px;
405 height:30px;
406
407 }
408 #table2 td
409 {
410 padding: 0 0px;
411 height: 25px;
412 text-align:right;
413 }
414
415 a:visited {
416 color: #f5ea01;
417 text-decoration: none;
418 font-weight: bold;
419 }
420 a:active, a:hover {
421 color: #f5ea01;
422 text-decoration: underline;
423 }
CSS定义的一般格式为选择器{属性} 其中ID定义前面加有#如
