<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
* { margin:0; padding:0;}
body { font-family:Arial, Helvetica, sans-serif,"微软雅黑"; font-size:14px;}
input { border:0;}
.bg0 { background:url(back.jpg) no-repeat; width:1000px; height:670px;}
.bg0 .red0 { color:#F00;}
.bg0 form { width:500px; height:550px; margin:auto; padding-top:30px;}
h1 { font-size:20px; color:#C6F; font-weight:bold; text-align:center;
padding-right:100px;}
.bg0 p { margin-top:30px;}
.bg0 p .righ0 { width:120px; display:inline-block; text-align:right;
color:#F69;}
.bg0 p .righ1 { width:120px; display:inline-block; text-align:right;
color:#F69; padding-right:9px;}
.bg0 p input { border:2px solid #F00; border-radius:4px;}
.bg0 .min0 { text-align:center;}
.bg0 .sub0 { background:#F99; width:300px; height:24px;}
.bg0 .zi0 { color:#F00; text-align:right; padding-right:180px;}
</style>
</head>
<body>
<div class="bg0">
<form action="#" method="post">
<h1>用户注册</h1>
<p>
<span class="righ0">用户名：</span>
<span class="red0">*</span>
<input type="text" name="username" required>
</p>
<p>
<span class="righ0">密码：</span>
<span class="red0">*</span>
<input type="password" name="userp0" required>
</p>
<p>
<span class="righ0">确认密码：</span>
<span class="red0">*</span>
<input type="password" name="userp1" required>
</p>
<p>
<span class="righ1">邮箱：</span>
<input type="email" name="uemail">
</p>
<p>
<span class="righ1">公司名称：</span>
<input type="text" name="gname">
</p>
<p>
<span class="righ1">公司地址：</span>
<input type="text" name="gplace">
</p>
<p>
<span class="righ1">购买类型/用途：</span>
<input type="checkbox" name="gtype" value="1">
<span class="red0">IT设备数码</span>
<input type="checkbox" name="gtype" value="2">
<span class="red0">通讯</span>
<input type="checkbox" name="gtype" value="3">
<span class="red0">办公耗材</span>
<input type="checkbox" name="gtype" value="4">
<span class="red0">家电</span>
</p>
<p>
<span class="righ1">企业人数：</span>
<select>
<option>请选择</option>
<option>1000人及以内</option>
<option>3000人及以内</option>
<option>5000人及以内</option>
</select>
</p>
<p>
<span class="righ1">公司性质：</span>
<select>
<option>请选择</option>
<option>国有企业</option>
<option>外资企业</option>
<option>私营企业</option>
<option>合资企业</option>
</select>
</p>
<p class="min0"><input type="submit" value="立即注册" class="sub0"></p>
</form>
<div>
<p class="zi0">
计网19-2班 20190312058 赵海龙
</p>
</div>
</div>
</body>
</html>
=================================================================================================
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>CSS控制表单样式</title>
<style type="text/css">
body{ font-size:12px; font-family:"宋体";} /*全局控制*/
body,form,input,p{ padding:0; margin:0; border:0;} /*重置浏览器的默认样式*/
form{
width:320px;
height:150px;
padding-top:20px;
margin:50px auto; /*使表单在浏览器中居中*/
background:#f5f8fd; /*为表单添加背景颜色*/
border-radius:20px; /*设置圆角边框*/
border:3px solid #4faccb;
}
p{
margin-top:15px;
text-align:center;
}
p span{
width:40px;
display:inline-block;
text-align:right;
}
.num,.pass{ /*对文本框设置共同的宽、高、边框、内边距*/
width:152px;
height:18px;
border:1px solid #38a1bf;
padding:2px 2px 2px 22px;
}
.num{ /*定义第一个文本框的背景、文本颜色*/
background:url(images/1.jpg) no-repeat 5px center #FFF;
color:#999;
}
.pass{ /*定义第二个文本框的背景*/
background:url(images/2.jpg) no-repeat 5px center #FFF;
}
.btn01,.btn02{
width:60px;
height:25px;
border-radius:3px; /*设置圆角边框*/
border:1px solid #6b5d50;
margin-left:30px;
}
.btn01{ background:#3bb7ea;} /*设置第一个按钮的背景色*/
.btn02{ background:#fb8c16;} /*设置第二个按钮的背景色*/
</style>
</head>
<body>
<form action="#" method="post">
<p>
<span>账号：</span>
<input type="text" name="username" value="admin" class="num" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" />
</p>
<p>
<span>密码：</span>
<input type="password" name="pwd" class="pass" pattern="^[a-zA-Z]\w{5,17}$"/>
</p>
<p>
<input type="button" class="btn01" value="登录"/>
<input type="button" class="btn02" value="注册"/>
</p>
</form>
</body>
</html>
#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=
本文来自博客园，作者：凡是过去，皆为序曲，转载请注明原文链接：https://www.cnblogs.com/longhai3/p/15888024.html
如有疑问，欢迎提问
#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=
