登陸頁面樣式佈局

暖楓無敵發表於2012-11-18
@charset "utf-8";
/* CSS Document */
body{width:100%; margin:0 auto;}
#login_bg{margin:0 auto;}
#login_main{
	width:100%; 
	position:absolute; 
	left:0px; 
	top:100px;  
	height:436px; 
	background:url(../image/01.gif) center no-repeat;
	text-align:center;}
.bg{line-height:45px; text-align:center; font-size:14px; color:#667c0d; font-weight:bold; height:336px;}
.input{border:1px solid #667c0d; height:18px; width:145px;}

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>

<!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>系統登陸</title>
    <link href="css/login.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        html, body
        {
            height: 100%;
            overflow: hidden;
        }
        body
        {
            padding: 0;
            margin: 0;
        }
    </style>
    <style type="text/css">
        html, body
        {
            height: 100%;
            overflow: hidden;
        }
        body
        {
            background: url(images/big_bg1.jpg) repeat-x left top;
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
        }
        body, td, th
        {
            font-size: 14px;
        }
        .div_lhf
        {
            right: 0px;
            z-index: 0;
            position: absolute;
            top: 152px;
        }
        .div_yks
        {
            width: 547px;
            height: 466px;
            left: 0px;
            position: absolute;
            top: 152px;
            z-index: 3;
        }
        .div_titile
        {
            z-index: 5;
            position: relative;
            top: 60px;
            width: 100%;
            text-align: center;
            height: 52px;
        }
        .div_bot1
        {
            position: absolute;
            bottom: -1px;
            height: 40px;
            line-height: 40px;
            width: 100%;
            text-align: center;
            z-index: 6;
            font-weight: bold;
            color: #1A70BF;
            background: url(images/bot.png) repeat-x;
        }
        
        .div_bot
        {
            position: absolute;
            bottom: -1px;
            height: 40px;
            line-height: 40px;
            width: 100%;
            text-align: center;
            z-index: 6;
            font-weight: bold;
            color: #1A70BF;
            background: url(images/bot.png) repeat-x center;
            _background-image: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bot.png",sizingMethod="noscale ");
        }
        
        .div_dlk
        {
            position: relative;
            top: 122px;
            width: 503px;
            margin: 0px auto;
            z-index: 6;
        }
        .div_login_bg
        {
            position: relative;
            top: 0px;
            width: 503px;
            height: 202px;
            background: url(images/dl_bg.png);
            overflow: hidden margin:0px auto;
            z-index: 7;
            overflow: hidden;
            padding-top: 15px;
        }
        .div_bd
        {
            line-height: 40px;
            height: 40px;
            text-align: center;
            width: 100%;
        }
        .div_bd span
        {
            font-weight: bold;
        }
        .div_an
        {
            line-height: 50px;
            height: 50px;
            text-align: center;
            width: 100%;
            padding-left: 12px;
        }
        .div_ts
        {
            line-height: 200%;
            height: 60px;
            color: #0038AB;
            padding-left: 10px;
            font-size: 12px;
            width: 90%;
            margin: 5px auto;
        }
        .r
        {
            color: #F00;
            height: 60px;
            float: left;
        }
        input
        {
            border: #4382C9 1px solid;
            height: 22px;
            line-height: 22px;
            width: 240px;
        }
        -- ></style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="div_titile">
        <img src="images/title1.jpg" /></div>
    <div class="div_dlk">
        <div class="div_title">
            <img src="images/dl_title.png" width="503" height="65" /></div>
        <div class="div_login_bg">
            <div class="div_bd">
                <span>使用者名稱：</span>
                <input type="text" name="textfield" id="textfield" class="input" runat="server" /></div>
            <div class="div_bd">
                <span>密   碼：</span>
                <input type="password" name="textfield2" id="textfield2" class="input" runat="server" /></div>
            <div class="div_an">
                <asp:ImageButton ID="ImageButton1" ImageUrl="images/dl.png" runat="server" OnClick="ImageButton1_Click"
                    Width="90" Height="30" />
                    <img src="images/cz.png" width="90" height="30" /></div>
            <div class="div_fgx">
                <img src="images/fgx.png" width="495" height="1" /></div>
            <div class="div_ts">
                <div class="r">
                    系統提示：</div>
                <span>為了您的賬號安全，請經常修改您的密碼！如果您忘記了該登入密碼，請和系統管理員聯絡！</span></div>
        </div>
    </div>
    <div class="div_yks">
        <img src="images/yks1.jpg" width="547" height="555" /></div>
    <div class="div_lhf">
        <img src="images/lhf.jpg" width="725" height="555" /></div>
    <div class="div_bot">
        技術支援：XXXXX</div>
    </form>
</body>
</html>

調整字型間距：
letter-spacing: 10px;


相關文章