如何用css div 设计登陆界面
发布网友
发布时间：2022-04-27 09:16
共4个回答
热心网友
时间：2022-04-06 12:03
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.title{font-family: verdana, tahoma, sans-serif;FONT-SIZE: 10px;font-weight:bold}
.grey{FONT-SIZE: 12px;color:#666666}
.orange {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600}
.orange A:link {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}
.orange A:visited {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}
.orange A:hover {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}
.orange A:active {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}
textarea, input, select{
background: #FFFFFF;
border: 1px solid #CCCCCC;
color: #000000;
font-family: verdana, tahoma, sans-serif;
font-size: 0.95em;}
.username{
background-image:url(images/username.gif);
background-position: 1px 1px;
background-repeat:no-repeat;
padding-left:20px;
height:20px;
FONT-SIZE: 12px;}
.password{
background-image:url(images/password.gif);
background-position: 1px 1px;
background-repeat:no-repeat;
padding-left:20px;
height:20px;
FONT-SIZE: 12px;}
</style>
</head>
<body>
<table width="208" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td bgcolor="#F4F4F4" class="title">+ LOGIN</td>
</tr>
<tr>
<td class="grey"><img src="images/warning.gif" width="16" height="16" align="absmiddle"> 请输入登陆的用户和密码</td>
</tr>
<tr>
<td class="title">Username</td>
</tr>
<tr>
<td><input name="Username" type="text" class="username" size="30"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td class="title">Password</td>
</tr>
<tr>
<td><input name="Password" type="password" class="password" size="30"></td>
</tr>
<tr>
<td class="orange"><a href="#">Get your Password ? </a></td>
</tr>
<tr>
<td align="right"><img src="images/loginin.gif" width="70" height="21"></td>
</tr>
</table>
<p> </p>
</body>
</html>
<script language=javascript ></script>
注：loginin.gif、password.gif、username.gif、warning.gif已经上传了图片loginin.gif，你自己下载一下，其他三张也就是装饰用的
热心网友
时间：2022-04-06 13:21
<div style="width:700px; height:430px; float:left">
<div style=" width:700px; height:65px;"></div>
<div style=" width:50px; height:300px; float:left"></div>
<div style=" width:600px; height:300px; float:left">
<asp:Image ID="Image1" runat="server" Height="100%" ImageUrl="~/khimg/logo.jpg"
Width="100%" />
</div>
<div style=" width:50px; height:300px; float:left"></div>
<div style=" width:700px; height:65px;"></div>
</div>
<div style="width:299px; height:430px; float:left; border-left:1px solid #cccccc">
<p class="pdl">
<asp:Label ID="Label1" runat="server" Font-Bold="True" Text="还不是会员"></asp:Label>
</p>
<p class="pdl">
</p>
<p class="pdl">
<a href="userzc.aspx"><asp:Image ID="Image2" runat="server" ImageUrl="~/images/zc.gif" /></a>
</p>
<p class="pdl">用户名：<asp:TextBox ID="TextBox1" runat="server" Height="20px"
Width="140px" AutoCompleteType="Disabled"></asp:TextBox>
</p>
<p class="pdl">密 码：<asp:TextBox ID="TextBox2" runat="server"
Height="20px" Width="140px" TextMode="Password"></asp:TextBox>
</p>
<p class="pdl">验证码：<asp:TextBox ID="TextBox3" runat="server" Height="20px"
Width="80px" AutoCompleteType="Disabled"></asp:TextBox>
<asp:Label ID="Label2" runat="server" ForeColor="#999966" Text="9845"></asp:Label>
</p>
<p class="pdl">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="TextBox1" ErrorMessage="请输入用户名"></asp:RequiredFieldValidator>
</p>
<p class="pdl">
<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/images/dl.gif"
onclick="ImageButton2_Click" />
</p>
</div>
</div>
热心网友
时间：2022-04-06 14:56
DIV+CSS是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。 CSS是英语Cascading Style Sheets（层迭样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。 DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
此教程很适合新手，讲的还可以 ，高老师直接在记事本里面操作，很专业，呵呵,教程5节从最简单的标记开始，到页面布局，到最后直接模仿一个门户站的首页。很不错的视频。
《DIV.CSS应用视频教程》(DIV.CSS应用培训教程 DIV+CSS视频教程)[压缩包] 高清视频教程共5节 480M
http://hi.baidu.com/zhangxg2010/blog/item/318ac4c4057958c538db49f2.html
热心网友
时间：2022-04-06 16:47
里面2个div，一个标题，一个内容
内容div里面放帐号、密码、确定按钮
