用HTML实现人人网登录页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p{
margin-left: 12px;
}
a{
text-decoration:none;
}
.num{
color: rgb(0, 0, 255);
position: relative;
top: -10px;
text-decoration: underline;
}
.num:hover{
color: rgb(255, 0, 0);
}
.box{
width: 200px;
height: 60px;
background-color: rgb(0, 128, 0);
}
.box2{
width: 0px;
border: 30px solid rgb(0, 128, 0);
border-color: transparent transparent transparent rgb(0, 128, 0);
position: relative;
left: 200px;
bottom: 61px;
}
.promptly{
color: rgb(255, 255, 255);
font-size: 30px;
position: relative;
left: 40px;
top: 10px;
}
</style>
</head>
<body>
<div>
<a href="#"><img src="./02练习：人人网注册页面/image/renren_titile.gif" alt=""></a>
<p>人人网，中国 <span style="font-weight: 999;">最真实、最有效</span>的社会平台，加入人人网，找回老朋友，结交新朋友。</p>
<form action="./target.html">
电子邮箱：
<input type="text" name="userName" value=""/ ><br><br>
设置密码:
<input type="password" name="passWord" value=""/ class="p"><br><br>
设置姓名：
<input type="text" name="userName" value=""/><br><br>
性别: 男：<input type="radio" name="sex" value="male" checked /> 女：<input type="radio" name="sex" value="female" /><br><br>
生日：
<select name="birthday">
<option value="jy">1991</option>
<option value="je" >1992</option>
<option value="js">1993</option>
<option value="jsi">1994</option>
</select>
年
<select name="birthday">
<option value="wy">05</option>
<option value="ly" >06</option>
<option value="qy">07</option>
<option value="by">08</option>
</select>
月
<select name="birthday">
<option value="erqi">27</option>
<option value="erba" >28</option>
<option value="erjiu">29</option>
<option value="sanshi">30</option>
<option value="sanshiyi">31</option>
</select>
日
<p>为什么要填写我的生日?</p>
我现在：
<select name="birthday">
<option value="sf" selected>请选择身份</option>
<option value="ys" >医生</option>
<option value="ls">老师</option>
<option value="xs">学生</option>
</select>
<p><a href="#"><img src="./02练习：人人网注册页面/image/renren_code.gif" alt="" width="100px"></a>
<a href="#" class="num">看不清换一张</a></p>
验证码：
<input type="text" name="userName" value=""/>
<p>
<a href="#"><div class="box">
<span class="promptly">立即注册</span>
</div></a>
<a href="#"><div class="box2"></div></a>
</p>
</div>
</body>
</html>
呈现出来的效果图:
扫一扫
2381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
