CSS练习
<!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;}
