逐渐打造一款强大的项目（请不要转载）4

最新推荐文章于 2019-05-24 14:20:00 发布

guyongqing52

最新推荐文章于 2019-05-24 14:20:00 发布

阅读量600

点赞数

分类专栏： C#日记ASP.net（vs2008平台下）文章标签： textbox class div url css xhtml

本文链接：https://blog.csdn.net/guyongqing52/article/details/7538613

版权

C#日记ASP.net（vs2008平台下）专栏收录该内容

32 篇文章 0 订阅

订阅专栏

进入首页版面前台设计（我感觉写文章好累）:)

先来个整体效果

从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>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------

注意几点：

<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开头,刚解释了

//为了让系统更高效的运行，背景就是一个小小的图片，记注一定要小图片别看背景很大,让电脑快速下载吧

背景图片

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

#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);
}

(请不要转载谢谢！仅供学习,任何法律责任与本人无关,)

guyongqing52

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
逐渐打造一款强大的项目（请不要转载）4

进入首页版面前台设计（我感觉写文章好累）:)先来个整体效果从VS2005编辑模式下可以看出一个大的body背景带蓝色条纹正中间是一个DIV正距中，里面再加4个DIV（不要对说还用表格做,过时了）看代码--------------------------------------------------------------------------------
复制链接

扫一扫