先上效果图,因为还没有用到javascript以及服务器方面的知识所以这些表单中的内容都不能提交到服务器,只是一个简单的界面并不能实现提交功能,我也是在边学边写中,望大家多多见谅,也能多多支持我.感谢感谢。代码中都有详细的解释说明,有写的不好的也希望高手给我点意见!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单练习</title>
<style type="text/css">
<!--清除默认样式-->
*{
margin:0px;
padding:0px;
}
<!--给整体设置一个宽度高度自适应,并且让其水平居中-->
.f1{
width:600px;
margin:50px auto;
}
<!--给第一个div设置一个宽度高度-->
.box1{
width:600px;
height:150px;
}
<!--给logo一个大小,如果会PS就更好,利用PS切图-->
.m1{
width:100px;
height:100px;
float:left;<!--向左浮动-->
margin-left:50px;<!--左外边距-->
}
span{
display:block;<!--因为span是内联元素所以先转换成块级元素-->
float:right;<!--向右浮动-->
margin-right:50px;<!--右外边距-->
}
span a{
color:#F00;<!--字体颜色-->
line-height:100px;<!--让文本垂直居中-->
}
<!--给第二个div设置一个宽度-->
.box2{
width:600px;
}
.j1{
margin-left:50px;<!--左外边距-->
}
.p1{
margin-left:50px;<!--左外边距-->
.in1{
margin:20px 50px;
width:500px;
height:50px;
}
.in2{
margin:20px 20px 20px 50px;
width:240px;
height:50px;
}
.in3{
argin:20px 50px 20px 0px;
width:240px;
height:50px;
}
.in4
{
margin-left:50px;
}
.in5
{
width:500px;
height:50px;
background-color:#F6C;
margin:20px 50px;
}
p{
margin-left:50px;
}
.m2{
width:100px;
height:100px;
margin:20px 50px;
}
.m3{
width:100px;
height:100px;
margin:20px 50px 20px 0px;
}
.m4{
width:100px;
height:100px;
margin:20px 50px 20px 0px;
}
</style>
</head>
<body>
<form class="f1">
<div class="box1">
<img src="img/1.jpg" class="m1">
<span>还没有账号?<a href="#">30秒注册</a></span>
</div>
<div class="box2">
<input type="radio" checked="chacked" name="shouji" class="j1">手机动态密码登录
<input type="radio" name="putong" class="p1">普通登录
</div>
<div class="box3">
<input type="text" value="已注册的手机号码" class="in1">
</div>
<div class="box4">
<input type="text" value="动态密码" class="in2">
<input type="text" value="获取手机动态密码" class="in3">
</div>
<div class="box5">
<input type="checkbox" checked="chacked" class="in4">自动登录
</div>
<div class="box6">
<input type="text" value="登录" class="in5">
</div>
<p>你也可以使用以下账号登录</p>
<div class="box7">
<a href="#"><img src="img/2.jpg" class="m2"></a>
<a href="#"><img src="img/3.png" class="m3"></a>
<a href="#"><img src="img/4.png" class="m4"></a>
</div>
</form>
</body >
</html>