您的位置：首页 > Web前端 > CSS

通过CSS设置样式，实现注册页面的网页

2018-10-13 16:34 676 查看

HTML代码：

[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<table align="center">
<tr><td><img src="../image/head.jpg"></td></tr>
<tr>
<td><form>
<table class="body">
<tr>
<td id="item" colspan="3">以下均为必填项</td>
</tr>
<tr>
<td class="left">请填写您的Email地址:</td>
<td><input type="email" class="center"></td>
<td class="right">此项为必填项，请输入您的Email地址</td>
</tr>
<tr>
<td class="left">设置您在当当网的昵称:</td>
<td><input type="text" class="center"></td>
<td class="right">此项为必填项，请输入您的昵称</td>
</tr>
<tr>
<td class="left">设置密码:</td>
<td><input type="password" class="center"></td>
<td class="right">此项为必填项，请设置您的密码</td>
</tr>
<tr>
<td class="left">再次输入您设置的密码:</td>
<td><input type="password" class="center"></td>
<td class="right">此项为必填项，请再次输入您的密码</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="checkbox">我已阅读并同意<a href="#">《当当网交易条款》</a>和<a href="#">《当当网用户使用条款》</a>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="reset" class="picButton "value="重&ensp;置"></td>
<td><input type="submit" class="picButton" value="注&ensp;册"></td>
</tr>
</table></form>
</td>
</tr>
<tr><td>
<img src="../image/foot.jpg">
</td></tr>
</table>
</body>
</html>

CSS代码：

css代码一般放置在head标签里。由于浏览器代码解析是顺序执行的，如果把css放在底部，HTML代码加载完毕而css没加载完时，会导致页面没有样式而难以阅读。

[code]<style type="text/css">
.body {
margin: 0;
padding: 0;
font-size: 14px;
border: 1px solid #999999;
}
tr {
line-height: 50px;
}
.picButton {
background-image: url("../image/register_submit.gif");
border: 0;
width: 128px;
height: 28px;
color: #FFFFFF;
font-weight: bold;
}
.left {
text-align: right;
background-color: rgb(232, 251, 255);
width: 186px;
}
.center {
border: 1px solid #000000;
width: 173px;
margin: 0 31px;
}
.right {
color: red;
width: 333px;
}
a {
color: #0033FF;
}
a:hover {
color: #FF0000;
text-decoration: none;
}
#item {
color: red;
font-size: 16px;
font-weight: bold;
line-height: 50px;
}
</style>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航