制作简单网站教程（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 >

 

显示效果如下

 

二 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
}

此时，修改页面中一些内联的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 >

显示效果如下

 

 

to be continue...

转载于:https://www.cnblogs.com/lifw/articles/1605134.html