盒子模型之免费体验登录页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>免费体验登录页面</title>
<link href="css/Page_215_5.css" rel="stylesheet" type="text/css"  />
</head>
<body>
<div id="login">
<ul>
<li>
<span class="list">*</span>
<span>姓名:</span>
<input type="text" name="username"  />
</li>
<li>
<span class="list">*</span>
<span>邮箱:</span>
<input type="email" name="email"  />
</li>
<li>
<span class="list">*</span>
<span>电话:</span>
<input type="text" name="telphone"  />
</li>
<li>
<span>性别:</span>
<select >
<option selected="selected"><span>请选择</span></option>
<option>男</option>
<option>女</option>
</select>
</li>
<li>
<span>年龄:</span>
<select>
<option selected="selected"><span>请选择</span></option>
<option>20</option>
<option>21</option>
</select>
</li>
</ul>
<div id="button"></div>
</div>
</body>
</html>

//cssy样式
#login{
width:300px;
background: url(../img1/bg.jpg) 0px 0px no-repeat;;
margin: 0px auto;
border-radius: 5px;
}
ul{
list-style: none;
padding-top: 80px;
}
li{
height: 30px;
line-height: 30px;
}
span{

color: white;
font-size: 12px;
}
.list{

color: red;
}
ul li input,select{
border-radius: 5px;
}


select{
border-radius: 5px;
}


#button{
height: 40px;
width: 150px;
background: url(../img1/btn.jpg) 0px 0px no-repeat;
margin: 0px auto;
padding-bottom: 50px;
}
//效果图


猜你喜欢

转载自blog.csdn.net/qq_33151859/article/details/78214253