制作简单网站教程（ASP.NET）

最新推荐文章于 2024-04-04 09:30:00 发布

weixin_30414635

最新推荐文章于 2024-04-04 09:30:00 发布

阅读量508

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml c# c/c++

原文链接：http://www.cnblogs.com/lifw/articles/1605134.html

本文介绍了一个.NET程序员社区站点的构建过程，包括使用div进行网页布局的基础方法及通过CSS进行样式设计的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

和几个朋友学习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>

显示效果如下