效果图如下：
简单的单页注册页面 课堂上的练习
刚学css时做的 无功能 只是一个UI而已
感兴趣的直接复制下方代码拿走即可
大神请绕道 互相学习共同进步
<!doctype html>
<!--星逸博客-->
<html>
<head>
<meta charset="utf-8" />
<title>梧州宝石 - 注册界面</title>
<!--css样式内容开始-->
<style type="text/css">
/*标题文本样式*/
.title1
{
font-size:35px;
color:#b8860b;
font-weight:bold;
margin-left:135px;
}
.title2
{
font-size:25px;
color:#000000;
}
/*文本样式*/
.text1
{
color:red;
font-size:12px;
font-weight:bold;
}
.text2
{
font-size:13px;
}
.text3
{
font-size:15px;
color:red;
}
/*文本框样式*/
input[type=text], [type=password]
{
width: 25%;
padding: 12px;
border: 1px solid #ccc;
resize: vertical;
/*border-radius: 4px;文本框圆角*/
}
/*去除超链接下划线*/
a
{
text-decoration:none;
}
/*按钮控件*/
input[type=submit]
{
background-color: #daa520;
border: none;
color: white;
padding: 14px 22px;
text-decoration: none;
cursor: pointer;
font-weight:bold;
font-size:14px;
margin-left:50px;
}
</style>
</head>
<body>
<div>
<p>
<span class="title1">梧州宝石</span>
<span class="title2"> | 用户注册</span>
<br />
<hr width="80%" size="3" color="#cccccc" />
</p>
</div>
<div align="center">
<p>
<span class="text1"> *</span><span class="text2">会员名：</span>
<input type="text" name="wb1">
</p>
<p>
<span class="text1">*</span><span class="text2">登录密码：</span>
<input type="password" name="wb2">
</p>
<p>
<span class="text1">*</span><span class="text2">密码确认：</span>
<input type="password" name="wb3">
</p>
<p>
<span class="text1">*</span><span class="text2">手机号码：</span>
<input type="text" name="wb4">
</p>
<p>
<span class="text1"> *</span><span class="text2">邮箱：</span>
<input type="text" name="wb5">
</p>
<p>
<input type="checkbox" name="chck" style="margin-left:145px;">
<span class="text2">创建网站的同时，我统一遵守：
<a href="#"><span class="text3">《梧州宝石条款》</span></a> 及
<a href="#"><span class="text3">《隐私声明》</span></a>
</span>
</p>
<p>
<input type="submit" name="subt" value="同意并注册">
</p>
</div>
</body>
</html>
评论 (0)