進(jìn)入首頁版面前臺設(shè)計(jì)（我感覺寫文章好累）:)
先來個(gè)整體效果
從VS2005編輯模式下可以看出
一個(gè)大的body背景帶藍(lán)色條紋
正中間是一個(gè)DIV正距中，里面再加4個(gè)DIV（不要對說還用表格做,過時(shí)了）
看代碼
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<%@ 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>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
注意幾點(diǎn)：
<body id="home">
//為了引入CSS區(qū)別其它頁面
<div id="main>
//大的正中間的層距中顯示
<div id="container></div>
//上端橫副標(biāo)題層
<div class="uidpw"></div> //用戶名及緊跟后面textbox層
<div class="uidpw></div>>
//密碼及緊跟后面textbox層
<div class="uidpw" id="button>"></div>
//登陸及關(guān)閉層
</div>
</body>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
好了，開始開CSS代碼
上面我們用一句話引入CSS文件了 <link href="StyleSheet.css" type="text/css" rel="Stylesheet"/>
看看StyleSheet.css文件，因?yàn)檫@里我懶得重新命名了，可以任意命名
//代碼開始----
*{margin:0; padding:0; font:12px;}
//消除全部外邊距和內(nèi)邊距（補(bǔ)白）并規(guī)范所有的字體大小為12px
#home {background: #fff url(image/bg-log.jpg) repeat-x 0 0; //呵呵，看到了吧。我們?nèi)?home開頭,剛解釋了
#home {background: #fff url(image/bg-log.jpg) repeat-x 0 0; //呵呵，看到了吧。我們?nèi)?home開頭,剛解釋了
//為了讓系統(tǒng)更高效的運(yùn)行，背景就是一個(gè)小小的圖片，記注一定要小圖片別看背景很大,讓電腦快速下載吧
背景圖片
background: #fff url(image/bg-log.jpg) repeat-x 0 0讓它縱向平鋪，CSS強(qiáng)大吧，一句話搞定
#FFF這里沒有實(shí)際意義，就是你電腦太差或者網(wǎng)速太差或者服務(wù)器特忙時(shí)，不能請求客戶機(jī)的請求時(shí)，用白色代替背景.
}
#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像素有時(shí)候用auto最好的用處就可以距中，這里就是好處
font-size:15px;
font-weight:bold; //加粗標(biāo)題
}
#home #container #banbenhao
{
font-size:11px;
}
#home div.uidpw
{
width:300px;
height:30px;
margin:12px auto;
}
#home #textuid
{
float:left; //浮動(dòng)到左邊,為了對齊使用,這樣做textbox就會很聽話跟隨其后了，哈哈...
height:25px;
width:63px;
font-size:13px;
text-align:center;
line-height:27px; //很多時(shí)候大家不知道這是干什么的，英文意思“線邊高”這里可以使字體提升,不然很丑.
看到了吧用戶名textbox字體不是緊貼在下面，密碼也是
--------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------
下面的是驗(yàn)證，，累了，有時(shí)間解釋吧
}
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);
}
(請不要轉(zhuǎn)載謝謝！僅供學(xué)習(xí),任何法律責(zé)任與本人無關(guān),)
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
