【javaWeb】学⽣注册页⾯编写及美化2--------html+css 学⽣信息注册界⾯及美化：
代码如下：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学⽣信息注册页⾯</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>
</head>
<body>
<div class="back">
css无法修改滚动条样式
<div class="left">
<h1>学⽣信息注册</h1>
<p>xueshengxinxizhuce</p>
</div>
<div class="right">
<table border="0">
<tr>
<td align="left">姓名：</td>
<td><input type="text"class="kuang" placeholder="  请输⼊姓名"></td>
</tr>
<tr>
<td align="left">性别：</td>
<td><input type="radio" checked>男<input type="radio">⼥
</td>
</tr>
<tr>
<td align="left">出⽣⽇期：</td>
<td><input type="text"class="kuang"
placeholder="  yyyy-mm-dd"></td>
</tr>
<tr>
<td align="left">学校：</td>
<td><input type="text"class="kuang" placeholder="  请输⼊学校名"></td>
</tr>
<tr>
<td align="left">密码：</td>
<td><input type="password"class="kuang"
placeholder="  请输⼊六位密码"></td>
phpmyadmin id自增
</tr>
<tr>
<td align="left">专业：</td>
学生个人网页制作html代码css
<td><select class="kuang">
<option value="计算机科学与技术">计算机科学与技术
<option value="粮⾷⼯程">粮⾷⼯程
</select></td>
</tr>
<tr>
<td align="left">体育特长：</td>
<td><input type="checkbox" name="体育特长">篮球<input
type="checkbox" name="体育特长">排球<input type="checkbox"
name="体育特长">⾜球<input type="checkbox" name="体育特长">游泳</td>
</tr>
<tr>
address line
<td align="left">上传照⽚：</td>
<td><input type="file"class="kuang"></td>
</tr>
</tr>
<tr>
<td align="left">个⼈介绍：</td>
<td><textarea rows="3" cols="33" placeholder="介绍⼀下⾃⼰吧！"class="kuang"></textarea></td> </tr>
<tr align="center">
<td colspan="2">
<form action="#" method="get">
<input type="submit" value="提交"class="anniu"><input
type="reset" value="取消"class="anniu">
</form>
</td>
</tr>
</table>
</div>
<div class="foot"><p>已有账号？<a href="#">点此⽴即登录</a></p></div>
</div>
</body>
</html>
css:
@charset"UTF-8";
body {
background-image:url("注册页⾯背景图.jpg") }
div.back {
background-color:rgba(255,255,255,0.7); width:730px;
margin-top:100px;
margin-left:450px;
padding:10px;
height:408px;
windowsme}
table{
font-weight:bold;
}
div.left {
float: left;
margin-left:70px;
margin-top:70px;
}
div.right {
float: right;
padding:
}
div.foot{
下列叙述中
margin-top:350px;
margin-left:55px;
}
td{
padding:3px;
}
.anniu {
border-radius:2px;
padding:6px 34px;
background-color: #F5FFFA;
font-size:14px;
font-weight: bold;
border:0;
}
.kuang {
background-color:rgba(255,255,255,0.7); border-radius:2px;
padding-top:6px;
padding-bottom:6px;
padding-left:10px;
padding-right:10px;
border: #FFFFFF solid 1px;
width:70%;
}
效果图如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。