<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<link rel="stylesheet" href="1.css"></head><body><div style="width: 1366px"><div><img src="美乐乐.jpg" alt=""></div><div class="c1"> ???<div class="c2"> ???????<img src="发羊财.jpg" alt=""> ???</div> ???<div class="c3"> ???????<table cellspacing="15"> ???????????<tr> ???????????????<td class="c4">*</td> ???????????????<td class="c5">用户名：</td> ???????????????<td class="inp"><input type="text"></td> ???????????</tr> ???????????<tr> ???????????????<td class="c4">*</td> ???????????????<td class="c5">密码：</td> ???????????????<td><input type="password"></td> ???????????</tr> ???????????<tr> ???????????????<td class="c4">*</td> ???????????????<td class="c5">验证码：</td> ???????????????<td><input type="text" class="c6"><img src="1.png" alt=""></td> ???????????</tr> ???????????<tr> ???????????????<td></td> ???????????????<td></td> ???????????????<td class="c5 c7"><input type="checkbox" value="auto" checked>自动登录 ???????????????????<a href="#">忘记密码？</a> ???????????????</td> ???????????</tr> ???????????<tr> ???????????????<td></td> ???????????????<td></td> ???????????????<td><input type="button" class="btn" name="" value="登录"></td> ???????????</tr> ???????</table> ???</div> ???<!--<div class="no"></div>--> ???<div class="fee"> ???????<div class="c8"> ???????????免费注册>> ???????????<!--<a href="#"></a>--> ???????</div> ???</div></div><div class="c9"> ???<div class="sp"></div> ???<div class="cc">©2004-2015 www.autohome.com.cn All Rights Reserved.xxxxxx 版权所有</div></div></div></body></html>
body{ ???margin:0 250px;}.c1{ ???margin-top: 20px; ???border-top: 1px solid; ???border-bottom: 1px solid; ???border-left: 1px solid; ???border-right: 1px solid; ???float: left; ???/*clear: left;*/}.c2{ ???margin-top: 40px; ???margin-left: 35px; ???margin-bottom: 40px; ???float: left;}.c3{ ???margin-top: 55px; ???margin-left: 95px; ???margin-right: 100px; ???float: left; ???/*clear: right;*/}.inp{ ???background:url(http://d.lanrentuku.com/down/png/1211/blueberry/user_friend.png) no-repeat 0 center; ???/*input{float:left;border:none;background:none;height:40px;line-height:30px;width:100%; text-indent:32px;}*/}/*input{float:left;border:none;background:none;height:40px;line-height:30px;width:100%; text-indent:32px;}*/.c4{ ???color: red;}.c5{ ???text-align: right;}.c6{ ???width: 60px;}.c7{ ???font-size: 8px; ???text-align: left;}.c8{ ???font-size: 5px; ???background-color: lawngreen; ???color: white; ???width: 90px; ???height: 25px; ???line-height: 25px; ???text-align: center; ???margin-left: 90.3%; ???float: left; ???/*text-align: right;*/}.fee{ ???width: 100%; ???/*background-color: black;*/ ???float: left;}.c9{ ???width: 75%; ???float: left;}.cc{ ???text-align: center; ???font-size: 5px;}.btn{ ???background-color: red; ???color: white; ???width: 170px;}.no{ ???float: right; ???clear: left;}.sp{ ???width: 10px; ???height: 15px; ???/*background-color: black;*/ ???/*float: left;*/}<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<link rel="stylesheet" href="2.css"></head><body><div class="di"> ???<div class="c1"> ???????<div class="c11"></div> ???????<div class="c13"> ???????????<span>*收藏本站</span> ???????</div> ???????<div class="c12"> ???????????<span>登录</span> ???????????<span>免费注册</span> ???????????<span>我的订单</span> ???????????<span>VIP会员俱乐部</span> ???????????<span>客户服务</span> ???????</div> ???</div> ???<div class="c2"> ???????<img src="美乐乐.jpg" alt="" width="150"> ???</div> ???<div class="c3"> ???????<div class="c4"> ???????????<h3 id="i1">注册新用户</h3> ???????????<table cellspacing="15" class="tbl"> ???????????????<tr> ???????????????????<td class="d">*</td> ???????????????????<td class="t">用户名：</td> ???????????????????<td><input type="text" class="t3"></td> ???????????????</tr> ???????????????<tr> ???????????????????<td class="d">*</td> ???????????????????<td class="t">手机号：</td> ???????????????????<td><input type="text" class="t3"></td> ???????????????</tr> ???????????????<tr> ???????????????????<td class="d">*</td> ???????????????????<td class="t" nowrap="true">登录密码：</td> ???????????????????<td><input type="password" class="t3"></td> ???????????????</tr> ???????????????<tr> ???????????????????<td class="d">*</td> ???????????????????<td class="t">确认密码：</td> ???????????????????<td><input type="password" class="t3"></td> ???????????????</tr> ???????????????<tr> ???????????????????<td class="d">*</td> ???????????????????<td class="t">验证码：</td> ???????????????????<td><input type="text" class="t4"><img src="1.png" alt=""></td> ???????????????</tr> ???????????????<tr> ???????????????????<td></td> ???????????????????<td></td> ???????????????????<td id="i2"><input type="checkbox" checked>我已阅读并同意<a href="#">《用户注册协议》</a></td> ???????????????</tr> ???????????????<tr> ???????????????????<td></td> ???????????????????<td></td> ???????????????????<td><input type="button" value="同意以上协议并注册" class="btn"></td> ???????????????</tr> ???????????</table> ???????</div> ???????<div class="c5"> ???????????<div>我已经注册，现在就<a href="#">登录</a></div> ???????????<div><img src="红包大战.jpg" alt="" height="125"></div> ???????</div> ???????<div class="c6"></div> ???</div> ???<div class="cp"> ???????©2004-2015 www.autohome.com.cn All Rights Reserved.汽车之家 版权所有 ???</div></div></body></html>
.c1{ ???border-top: 1px solid; ???width: 100%; ???background-color: darkgrey; ???/*opacity: 0.4;*/ ???/*text-align: right;*/ ???float: left;}.c11{ ???width: 15%; ???height: 10px; ???/*background-color: black;*/ ???float: left;}.c13{ ???/*width: 30%;*/ ???float: left;}.c12{ ???margin-right: 15%; ???width: 85%; ???text-align: right; ???word-spacing: 8px; ???/*float: right;*/}.c2{ ???margin-left: 15%;}.c3{ ???border-top:1px solid; ???margin-top: 10px; ???margin-left: 15%; ???margin-right: 15%; ???border-bottom:1px solid; ???border-left: 1px solid; ???border-right:1px solid; ???float: left;}#i1{ ???margin-top: 20px; ???margin-left: 20px;}#i2{font-size: 5px}.tbl{margin-left: 12%;}.t3{width: 200px}.t4{width: 100px}.d{color: red}.t{text-align: right}.btn{width: 200px;color: white;background-color: red;height: 25px}.c4{float: left;margin-bottom: 30px}.c6{float: left;border-left: 1px dashed black;margin-top: -140px;margin-left: 300px;background-color: white;width: 1px;height: 350px;}.c5{margin-left:350px;margin-right:50px;float: left;margin-top: 20px;font-size: 7px;font-weight: bold;}.cp{margin-left: 30%;width:100%;float: left}.di{width: 1366px;height: 768px;}CSS练习
原文地址：http://www.cnblogs.com/fenglin0826/p/7592526.html