版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhuisaozhang1292/article/details/86156472
输入：
登录页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div style = "width:980px;height:400px;margin:auto;margin-top:100px;">
<div style = "width:40%;height:100%;inline-height:100%;float:left;text-align:center">
<img alt="" src="1.jpg" style = "display:inline-block;width:100%;height:100%;">
</div>
<div style = "width:59%;height:100%;float:right;position:relative;">
<div style = "position:absolute;left:10%;width:70%;height:70%;">
<div style = "margin:10%;width:80%;height:10%;">
<div style = "width:25%;height:100%;float:left;text-align:right;">
<label for = "username" style = "color:red">*</label>
<label for = "username" style = "font-size:20px;font-weight:bold;">用户名:</label>
</div>
<div style ="height:25px;width:200px;float:left;position:relative;">
<input type="text" style = "height:25px;width:170px;padding-right:30px">
<span style="position:absolute;right:5px;top:7px;background-image:url('i_name.jpg');height:16px;width:16px;display:inline-block;background-repeat:no-repeat;">
</span>
</div>
</div>
<div style = "margin:10%;width:80%;height:10%;">
<div style = "width:25%;height:100%;float:left;text-align:right;">
<label for = "username" style = "color:red">*</label>
<label for = "username" style = "font-size:20px;font-weight:bold;">密码:</label>
</div>
<div style ="height:25px;width:200px;float:left;position:relative;">
<input type="text" style = "height:25px;width:170px;padding-right:30px">
<span style="position:absolute;right:5px;top:7px;background-image:url('i_pwd.jpg');height:21px;width:14px;display:inline-block;background-repeat:no-repeat;">
</span>
</div>
</div>
<div style = "margin:10%;width:80%;height:10%;">
<div style = "width:25%;height:100%;float:left;text-align:right;">
<label for = "username" style = "color:red">*</label>
<label for = "username" style = "font-size:20px;font-weight:bold;">验证码:</label>
</div>
<div style ="height:25px;width:200px;float:left;position:relative;">
<input type="text" style = "height:25px;width:170px;padding-right:30px">
<span style="position:absolute;right:5px;top:5px;background-image:url('i_phone.jpg');height:21px;width:14px;display:inline-block;background-repeat:no-repeat;">
</span>
</div>
</div>
<div style = "margin:10%;width:80%;height:10%;margin-left:120px;">
<input type = "checkbox">
<label>自动登录</label>
<label> 忘记密码</label>
</div>
<div style = "width:50%;height:15%;margin-left:120px;margin-top:40px;">
<input onclick = "window.open('https://blog.csdn.net/zhuisaozhang1292')" type = "button" value = "登录" style = " background-color: red;width:100%;height:100%; border:0" >
</div>
</div>
<a href = "https://blog.csdn.net/zhuisaozhang1292">
<div style = "position:absolute;right:0;bottom:0;width:120px;height:40px;line-height:40px;background:green;text-align:center;">
免费注册>>
</div>
</a>
</div>
</div>
</body>
</html>输出效果：
注册页面
输入：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div style = "width:980px;height:400px;margin:auto;margin-top:100px;">
<div class = "pg-header" style = "width:980;height:100px;">
<div style = "width:100px;height:20px;inline-height:50px;float:left;text-align:center ;">收藏本站</div>
<div style = "width:100px;height:20px;inline-height:50px;float:right;text-align:center ;">登录</div>
<div style = "width:100px;height:20px;inline-height:50px;float:right;text-align:center ;">免费注册</div>
<div style = "width:100px;height:20px;inline-height:50px;float:right;text-align:center ;">我的订单</div>
<div style = "width:120px;height:20px;inline-height:50px;float:right;text-align:center ;">VIP会员俱乐部</div>
<div style = "width:100px;height:20px;inline-height:50px;float:right;text-align:center ;">客户服务</div>
</div>
<div class = "pg-content" style = "width:980;height:800px;">
<div style = "width:200px;height:100px;">
<img alt="" src="1.jpg" style = "width:200px;height:100px;">
</div>
<div style = "width:500px;height:600px;margin-top:50px;">
<div>
<label style = "font-size:30px;margin-left:50px;top:100px;">注册新用户</label>
</div>
<div style = "width:200px;height:28px;float:left;text-align:right;margin-top:20px;">
<label for = "username" style = "color:red">*</label>
<label for = "username" style = "font-size:20px;font-weight:bold;">用户名:</label>
</div>
<div style ="width:200px;height:30px;float:left;position:relative;margin-top:20px;">
<input id = "username" type="text" style = "height:25px;width:170px;padding-right:30px">
<span style="position:absolute;right:5px;top:7px;background-image:url('i_name.jpg');height:16px;width:16px;display:inline-block;background-repeat:no-repeat;">
</span>
</div>
<div style = "width:200px;height:28px;float:left;text-align:right;margin-top:20px;">
<label for = "userphone" style = "color:red">*</label>
<label for = "userphone" style = "font-size:20px;font-weight:bold;">手机名:</label>
</div>
<div style ="width:200px;height:30px;float:left;position:relative;margin-top:20px;">
<input id = "userphone" type="text" style = "height:25px;width:170px;padding-right:30px">
<span style="position:absolute;right:5px;top:7px;background-image:url('i_phone.jpg');height:21px;width:14px;display:inline-block;background-repeat:no-repeat;">
</span>
</div>
<div style = "width:200px;height:28px;float:left;text-align:right;margin-top:20px;">
<label for = "userpwd" style = "color:red">*</label>
<label for = "userpwd" style = "font-size:20px;font-weight:bold;">登录密码:</label>
</div>
<div style ="width:200px;height:30px;float:left;position:relative;margin-top:20px;">
<input id = "userpwd" type="password" style = "height:25px;width:170px;padding-right:30px">
<span style="position:absolute;right:5px;top:7px;background-image:url('i_pwd.jpg');height:16px;width:16px;display:inline-block;background-repeat:no-repeat;">
</span>
</div>
<div style = "width:200px;height:28px;float:left;text-align:right;margin-top:20px;">
<label for = "userpwd_again" style = "color:red">*</label>
<label for = "userpwd_again" style = "font-size:20px;font-weight:bold;">确认密码:</label>
</div>
<div style ="width:200px;height:30px;float:left;position:relative;margin-top:20px;">
<input id = "userpwd_again" type="password" style = "height:25px;width:170px;padding-right:30px">
<span style="position:absolute;right:5px;top:7px;background-image:url('i_pwd.jpg');height:16px;width:16px;display:inline-block;background-repeat:no-repeat;">
</span>
</div>
<div style = "width:200px;height:28px;float:left;text-align:right;margin-top:20px;">
<label for = "verify_code" style = "color:red">*</label>
<label for = "verify_code" style = "font-size:20px;font-weight:bold;">验证码:</label>
</div>
<div style ="width:200px;height:30px;float:left;position:relative;margin-top:20px;">
<input id = "verify_code" type="text" style = "height:25px;width:170px;padding-right:30px">
<span style="position:absolute;right:5px;top:7px;background-image:url('i_phone.jpg');height:21px;width:14px;display:inline-block;background-repeat:no-repeat;">
</span>
</div>
<div style = "margin-left:120px;margin-top:20px;float:left;">
<input type = "checkbox">
<label>我已阅读并同意</label>
<a href = "https://blog.csdn.net/zhuisaozhang1292">《用户注册协议》</a>
</div>
<a href = "https://blog.csdn.net/zhuisaozhang1292">
<div style = "width:200px;height:40px; margin-left:120px;margin-top:20px;float:left;border:0;text-align:center;line-height:40px;background-color:red">
<label style = "font-size:20px;font-weight:bold;">自动登录</label>
</div>
</a>
</div>
</div>
</div>
</body>
</html>样式
