简单的HTML+css完成的用户注册界面（新手第一次写） |
您所在的位置：网站首页 › 简单的h5表单提交页面 › 简单的HTML+css完成的用户注册界面（新手第一次写） |
简单的HTML+css完成的用户注册界面（新手第一次写）
|
下面是css部分的代码实现： 用户注册 /*初始化属性*/ *{ padding: 0; margin: 0; box-sizing: border-box; } body{ background-image: url("../image/register.jpg"); background-repeat: no-repeat; background-size: 100%; } /*最外围的大div*/ .mainPart{ width: 1000px; height: 500px; border: 4px solid #ebe5ff; margin: 90px auto auto; } /*左上角文字的div*/ .explain{ float: left; } /*设置第一个P标签*/ .explain p:first-child{ color: #ff956e; font-size: 25px; margin-left: 10px; margin-top: 10px; } /*设置最后一个P标签*/ .explain p:last-child{ margin-left: 10px; } /*中间表单部分的div*/ .tableArea{ float: left; width:500px; height:400px; margin-left: 70px; margin-top: 50px; } /*设置背景图片*/ #picture{ /*使用绝对定义取消其在页面中占据的位置*/ position: absolute; /*让其他袁术覆盖于图片上方*/ z-index: -1; /*图片透明度*/ opacity: 0.5; width: 995px; height:495px; } /*右上角的文字div*/ .rightTip{ float: right; } .rightTip a{ color: #ff94d7; text-decoration: none; } .rightTip a:hover{ color: #ff3b31; } /*中间的div的表单区域设置*/ .tableData{ width: 400px; height: 350px; margin: auto; } /*设置fieldset*/ fieldset{ height: 396px; } /*设置表格*/ .dataTableLeft{ width: 80px; text-align: right; } .dataTableRight{ padding-left: 20px; } /*设置输入框*/ #username,#password,#perName,#phoneNumber,#number,#date,#email{ border: 1px solid rgba(203,197,198,0.03); border-radius: 5px; height: 27px; width:235px; padding-left: 5px; } /*设置提交按钮*/ #sub{ width: 120px; height: 40px; background-color: rgba(84,83,87,0.11); border: 1px solid #faf7f7; border-radius: 10px; color: #deebff; } .subTd{ text-align: center; } /*单独设置验证码框*/ #number{ width:100px; } /*单独设置验证码图片*/ #numberPicture{ /*设置垂直居中*/ vertical-align: middle; width:130px; height:35px; } /*单独设置性别选择框旁边的文字*/ .sex{ font-size: 18px; }------------------------------------分割线，下面是html部分-------------------------------------- 
新用户注册 USER REGISTER 新用户注册 用户名 密码 Email 姓名 手机号 性别 男 女 出生日期 验证码
已有账号？立即登入 -------------------------------------------------完整代码如下--------------------------------------- 用户注册 /*初始化属性*/ *{ padding: 0; margin: 0; box-sizing: border-box; } body{ background-image: url("../image/register.jpg"); background-repeat: no-repeat; background-size: 100%; } .mainPart{ width: 1000px; height: 500px; border: 4px solid #ebe5ff; margin: 90px auto auto; } .explain{ float: left; } /*设置第一个P标签*/ .explain p:first-child{ color: #ff956e; font-size: 25px; margin-left: 10px; margin-top: 10px; } /*设置最后一个P标签*/ .explain p:last-child{ margin-left: 10px; } .tableArea{ float: left; width:500px; height:400px; margin-left: 70px; margin-top: 50px; } /*设置图片*/ #picture{ position: absolute; z-index: -1; opacity: 0.5; width: 995px; height:495px; } .rightTip{ float: right; } .rightTip a{ color: #ff94d7; text-decoration: none; } .rightTip a:hover{ color: #ff3b31; } /*中间的div的表单区域设置*/ .tableData{ width: 400px; height: 350px; margin: auto; } /*设置fieldset*/ fieldset{ height: 396px; } /*设置表格*/ .dataTableLeft{ width: 80px; text-align: right; } .dataTableRight{ padding-left: 20px; } /*设置输入框*/ #username,#password,#perName,#phoneNumber,#number,#date,#email{ border: 1px solid rgba(203,197,198,0.03); border-radius: 5px; height: 27px; width:235px; padding-left: 5px; } /*设置提交按钮*/ #sub{ width: 120px; height: 40px; background-color: rgba(84,83,87,0.11); border: 1px solid #faf7f7; border-radius: 10px; color: #deebff; } .subTd{ text-align: center; } /*单独设置验证码框*/ #number{ width:100px; } /*单独设置验证码图片*/ #numberPicture{ /*设置垂直居中*/ vertical-align: middle; width:130px; height:35px; } /*单独设置性别选择框旁边的文字*/ .sex{ font-size: 18px; }
新用户注册 USER REGISTER 新用户注册 用户名 密码 Email 姓名 手机号 性别 男 女 出生日期 验证码
已有账号？立即登入 --------------------------------------------页面效果图------------------------------------------------ |
该页面仅谷歌浏览器查看效果，页面窗口在缩小到一定比例时页面效果看起来会有点问题。新手上路，请多指教【本文地址】
今日新闻 |
推荐新闻 |