进入首页版面前台设计（我感觉写文章好累）:)
先来个整体效果
从VS2005编辑模式下可以看出
一个大的body背景带蓝色条纹
正中间是一个DIV正距中，里面再加4个DIV（不要对说还用表格做,过时了）
看代码
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default1.aspx.cs" Inherits="Default2" %>
<!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>中国邮政物流管理平台WMS</title>
<link href="StyleSheet.css" type="text/css" rel="Stylesheet"/>
<script src="jquery-1.2.3.min.js" type="text/javascript"></script>
<script src="JScript.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
</head>
<body id="home">
<form id="form1" class="cmxform" method="post" action="">
<div id="main">
<div id="container" ><p id="titletext">中国物流货代中心信息管理平台 <span id="banbenhao">Ver2.45</span></p></div>
<div class="uidpw" style="width: 260px" ><span id="textuid" >用户名：</span><em></em><input type="text" class="uid" id="txtUserName" name="userid" style="height: 20px" /><span></span></div>
<div class="uidpw" style="width: 260px"><span id="textpwd">密 码：</span><em></em><input type="password" class="uid" id="txtUserPwd" name="password" style="height: 20px" /><span></span></div>
<div class="uidpw" id="button"><input type="image" src="image/denglu1.jpg" class="dl" id="firstdl"/><input type="image" src="image/close1.jpg" class="dl" id="lastdl"/></div>
</div>
</form>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
<head runat="server">
<title>中国邮政物流管理平台WMS</title>
<link href="StyleSheet.css" type="text/css" rel="Stylesheet"/>
<script src="jquery-1.2.3.min.js" type="text/javascript"></script>
<script src="JScript.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
</head>
<body id="home">
<form id="form1" class="cmxform" method="post" action="">
<div id="main">
<div id="container" ><p id="titletext">中国物流货代中心信息管理平台 <span id="banbenhao">Ver2.45</span></p></div>
<div class="uidpw" style="width: 260px" ><span id="textuid" >用户名：</span><em></em><input type="text" class="uid" id="txtUserName" name="userid" style="height: 20px" /><span></span></div>
<div class="uidpw" style="width: 260px"><span id="textpwd">密 码：</span><em></em><input type="password" class="uid" id="txtUserPwd" name="password" style="height: 20px" /><span></span></div>
<div class="uidpw" id="button"><input type="image" src="image/denglu1.jpg" class="dl" id="firstdl"/><input type="image" src="image/close1.jpg" class="dl" id="lastdl"/></div>
</div>
</form>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
注意几点：
<body id="home">
//为了引入CSS区别其它页面
<div id="main>
//大的正中间的层距中显示
<div id="container></div>
//上端横副标题层
<div class="uidpw"></div> //用户名及紧跟后面textbox层
<div class="uidpw></div>>
//密码及紧跟后面textbox层
<div class="uidpw" id="button>"></div>
//登陆及关闭层
</div>
</body>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
好了，开始开CSS代码
上面我们用一句话引入CSS文件了 <link href="StyleSheet.css" type="text/css" rel="Stylesheet"/>
看看StyleSheet.css文件，因为这里我懒得重新命名了，可以任意命名
//代码开始----
*{margin:0; padding:0; font:12px;}
//消除全部外边距和内边距（补白）并规范所有的字体大小为12px
#home {background: #fff url(image/bg-log.jpg) repeat-x 0 0; //呵呵，看到了吧。我们全用#home开头,刚解释了
#home {background: #fff url(image/bg-log.jpg) repeat-x 0 0; //呵呵，看到了吧。我们全用#home开头,刚解释了
//为了让系统更高效的运行，背景就是一个小小的图片，记注一定要小图片别看背景很大,让电脑快速下载吧
背景图片
background: #fff url(image/bg-log.jpg) repeat-x 0 0让它纵向平铺，CSS强大吧，一句话搞定
#FFF这里没有实际意义，就是你电脑太差或者网速太差或者服务器特忙时，不能请求客户机的请求时，用白色代替背景.
}
#home #main
{
margin:166px 246px 295px 246px ; //分别是大层正方形的上，下，左，右边距(用photoshop测下就知道了)
width:496px;
height:278px;
background:#fff url(image/main.jpg);
}
#home #container
{
text-align:center ;//让文本距中
width:396px;
height:40px;
margin:2px auto ;//让框架距中
background:url(image/head-hr.jpg) no-repeat;
background-position:left bottom;/ /让背景定位
}
#home #container #titletext
{
margin:20px auto; //上和下各20px像素有时候用auto最好的用处就可以距中，这里就是好处
font-size:15px;
font-weight:bold; //加粗标题
}
#home #container #banbenhao
{
font-size:11px;
}
#home div.uidpw
{
width:300px;
height:30px;
margin:12px auto;
}
#home #textuid
{
float:left; //浮动到左边,为了对齐使用,这样做textbox就会很听话跟随其后了，哈哈...
height:25px;
width:63px;
font-size:13px;
text-align:center;
line-height:27px; //很多时候大家不知道这是干什么的，英文意思“线边高”这里可以使字体提升,不然很丑.
看到了吧用户名textbox字体不是紧贴在下面，密码也是
--------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------
下面的是验证，，累了，有时间解释吧
}
em.error {
background:url("image/uncheckimage.jpg") no-repeat 0px 0px;
padding-left: 16px;
}
em.success {
background:url("image/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
}
em.error {
background:url("image/uncheckimage.jpg") no-repeat 0px 0px;
padding-left: 16px;
}
em.success {
background:url("image/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
#home span#textpwd
{
float:left;
height:25px;
width:63px;
font-size:13px;
text-align:center;
line-height:27px;
}
#home input.uid
{
width:156px;
height:21px;
line-height:21px;
text-indent:2px;
}
#home #button
{
}
#home #button input.dl
{
display:inline;
margin:4px 10px 0px 100px;
}
#home #button #lastdl
{
margin:0px 0px;
}
#home #button #fristdl
{
background:#fff url(image/denglu2.jpg);
width:100px;
height:50px;
}
.hover
{
background:#fff url(image/denglu2.jpg);
}
{
margin:0px 0px;
}
#home #button #fristdl
{
background:#fff url(image/denglu2.jpg);
width:100px;
height:50px;
}
.hover
{
background:#fff url(image/denglu2.jpg);
}
(请不要转载谢谢！仅供学习,任何法律责任与本人无关,)
