表单代码：
<form name="form" method="POST" action="">
<input type="text" value="用户名" />
<input type="password" value="密码" />
<input type="submit" name="button" value="登录" class="xiaoka_tj"/>
</form>
用div+css制作一个登录页面，首先需要做的就是将这个登录界面的布局给构想好，然后在使用div去布局出来，一般都要结合表单，因为是需要和数据库结合的，至于的具体的界面，看下代码：<html>
<head>
<meta charset="UTF-8">
<title>淘宝登录</title>
<link rel="stylesheet" type="text/css" href="../static/css/index.css" />
<script type="text/javascript">
<{if $message !=''}>
alert("<{$message}>")
<{/if}>
</script>
</head>
<body>
<div id="logo">
<div class="logotop">
<div class="yanz">
<h2>登录</h2>
<form action="logo.php" method="post">
<span style="display:blockheight:27pxwidth:27pxbackground-image:url(../static/images/logozh.jpg)float:left"></span>
<input type="text" name="uname" style="height:26px"/><br/>
<span style="display:blockheight:27pxwidth:27pxbackground-image:url(../static/images/logomm.jpg)float:left"></span>
<input type="password" name="pwd" style="height:26px"/>
<p><a href="">忘记登录密码？</a></p>
<input type="submit" value="" style="width:254pxheight:37pxbackground-image:url(../static/images/logodl.jpg)cursor: pointer"/>
</form>
</div>
</div>
</div>
</body>
</html>
这个代码有些图片的地址，需要根据要求去改，这些是我自己写的，然后就是传输的文件，action那，接受的文件也是需要定义的。
CSS（层叠样式表）层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
注：单独使用CSS是无法实现QQ邮箱登录实例（CSS为样式代码）。
实例可以使用iframe代码实现QQ邮箱登录实例。
代码如下：
<!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>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>qq邮箱登录实例</title>
</head>
<body>
<p align="center" style="margin-top:0pxmargin-left:0">
<iframe width="1000" height="500" src="https://mail.qq.com" class="t-iframe" scrolling="no" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</p>
</body>
</html>
代码解释：
url是你要调用的网址，<p align="center" style="margin-top: -109margin-left: -109">是网页布局、其中margin-top: 0表示顶部缩进，margin-left: 0表示左边缩进。至于右边和底部缩进，很简单，修改<iframe>的宽度和高度就可以了。
