制作简单网站教程（ASP.NET）
和几个朋友学习ASP.NET，自己组织了一个小项目，就是建一个.NET程序员社区的站。由于初学网站，知识几乎从0开始，我记录下我学习的过程（连载）。
一、div的简单布局
div我的理解就是一个块，用他来可以使得模块内聚化，增加移植性和独立性，类似于C++上的frame和C#上的自定义组件。
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head id="Head1" runat="server">
7 <title>.NET程序员社区</title>
8 </head>
9 <style>
10 #div_Top{ width:50%;height:100px;background-color:Silver;}
11 #div_Left{ float:left; width:20%;background-color:Blue}
12 #div_Right{ float:right; width:80%;background-color:Green}
13
14 </style>
15 <body>
16 <form id="fom_Main" runat="server">
17 <div id="div_Top">容器一
18
19 </div>
20 <div id="div_Left">容器二
21
22 </div>
23 <div id="div_Right">容器三
24
25 </div>
26 </form>
27 </body>
28 </html>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head id="Head1" runat="server">
7 <title>.NET程序员社区</title>
8 </head>
9 <style>
10 #div_Top{ width:50%;height:100px;background-color:Silver;}
11 #div_Left{ float:left; width:20%;background-color:Blue}
12 #div_Right{ float:right; width:80%;background-color:Green}
13
14 </style>
15 <body>
16 <form id="fom_Main" runat="server">
17 <div id="div_Top">容器一
18
19 </div>
20 <div id="div_Left">容器二
21
22 </div>
23 <div id="div_Right">容器三
24
25 </div>
26 </form>
27 </body>
28 </html>
显示效果如下
二 css与div的简单使用
div搞好了一些模块上的分布，但是还要对这些模块进行属性方法上的设计，那么用css来完成。
首先创建一个css文件。文件里内容如下
代码
#body
{
}
#div_Top
{
background-image:url(img/caption.bmp);
background-repeat:no-repeat;
background-position:left top;
width:100%;
height:150px;
}
#div_Left
{
float:left;
width:20%;
height:1000px;
background-color:Blue
}
#div_Right
{
float:right;
width:80%;
height:1000px;
background-color:Green
}
{
}
#div_Top
{
background-image:url(img/caption.bmp);
background-repeat:no-repeat;
background-position:left top;
width:100%;
height:150px;
}
#div_Left
{
float:left;
width:20%;
height:1000px;
background-color:Blue
}
#div_Right
{
float:right;
width:80%;
height:1000px;
background-color:Green
}
此时，修改页面中一些内联的css代码，修改后如下
代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>.NET程序员社区</title>
<link href="mycss.css" type="text/css" rel="stylesheet"/> <%@注意这里引用了文件名为mycss.css的css文件%>
</head>
<body>
<form id="fom_Main" runat="server">
<div id="div_Top">容器一
</div>
<div id="div_Left">容器二
</div>
<div id="div_Right">容器三
</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>.NET程序员社区</title>
<link href="mycss.css" type="text/css" rel="stylesheet"/> <%@注意这里引用了文件名为mycss.css的css文件%>
</head>
<body>
<form id="fom_Main" runat="server">
<div id="div_Top">容器一
</div>
<div id="div_Left">容器二
</div>
<div id="div_Right">容器三
</div>
</form>
</body>
</html>
显示效果如下
to be continue...
