代码段

css实现倒三角

<!DOCTYPE html>
<html>
<head>
<style>div{width: 0;height: 0;border-width: 10px;border-style: solid;border-color:  black  transparent transparent transparent
}
</style>
</head>
<body><div></div></body>
</html>

css样式总结

1、文本两端对齐很简单，text-align-last: justify;
2、span不能设置宽高，所以需要设置display: inline-block;

项目列表

——js
————main.js
——css
————main.css
——img
————logo.png
————phone.png
——main.html

完整代码

main.html

<!DOCTYPE html>
<html lang="en" dir="ltr"><head><meta charset="utf-8"><title>注册页面</title><link rel="stylesheet" href="css/main.css"></head><body><!-- 页头 --><div class="header"><div class="wrap"><div class="header-content header-left"><img src="img\logo.png"/><div>慕课高铁客户服务中心&nbsp;|<span>客户服务</span></div></div><div class="header-content header-right"><img src="img\phone.png"><div>手机版</div></div><div class="header-content header-middle"><div class="account"><a href="#"><span class="menu">我的IMOOC <span class="triangle"></span></span></a><div class="menu-list" id="menu-list"><div class="menu-list-items">未完成订单</div><div class="menu-list-items">已完成订单（改/退）</div><div class="menu-list-items">我的保险</div><div class="menu-list-items">查看个人信息</div><div class="menu-list-items">账户安全</div><div class="menu-list-items">常用联系人</div><div class="menu-list-items">重点旅客预约</div><div class="menu-list-items">遗失物品查找</div><div class="menu-list-items">服务查询</div><div class="menu-list-items">投诉</div><div class="menu-list-items">建议</div></div></div><div class="tab">意见反馈&nbsp;&nbsp; <span>imooc@com</span>&nbsp;&nbsp;&nbsp;&nbsp;您好，请 <span>登陆</span>&nbsp;&nbsp;|&nbsp;&nbsp;注册&nbsp;&nbsp;&nbsp;&nbsp;</div></div></div></div><!-- 分割线 --><div class="line"></div><!-- 主体 --><div class="main"><div class="wrap"><div class="intro">您现在的位置：&nbsp;<span>客运首页</span>&nbsp;>&nbsp;<span>注册</span></div><div class="form"><div class="title">账户信息</div><div class="table"><!--用户名--><div class="form-content"><span class="form-label">用户名</span>:<input class="form-input"  id="form-input-userName" placeholder="用户名设置成功后不可修改"><span class="form-tips">6-30位字母、数字或"-",字母开头</span></div><!--登陆密码--><div class="form-content"><span class="form-label">登陆密码</span>:<input class="form-input" id="form-input-pwd" placeholder="6-20位字母、数字或符号"><!-- <span class="form-tips"></span> --><span class="level"><span class="low"></span><span class="middle"></span><span class="high"></span></span></div><div id="pwd-error-code"></div><!--确认密码--><div class="form-content"><span class="form-label">确认密码</span>:<input class="form-input" id="form-input-pwd2" placeholder="请在此输入您的登陆密码"><span class="form-tips"></span></div><!--姓名--><div class="form-content" id="name-tips-contents"><span class="form-label">姓名</span>:<input class="form-input" id="form-input-name" placeholder="请输入姓名"><span class="form-tips"><a id="form-name-tips" href="#">姓名填写规则</a></span><div id="hidden-name-tips">1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。<br/>2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。<br/>3.姓名中有繁体字无法输入时，可用简体替代。<br/>4.姓名较长，汉字与英文字符合计超过30个（1个汉字算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不区别大小写</div></div><!--证件类型--><div class="form-content"><span class="form-label">证件类型</span>:<select class="form-input" id="form-input-cards"><option value="idcard">二代身份证</option><option value="HMPass">港澳通行证</option><option value="TaiwanPass">台湾通行证</option><option value="passport">护照</option></select><span class="form-tips"></span></div><!--证件号码--><div class="form-content"><span class="form-label">证件号码</span>:<input class="form-input" id="form-input-userId" placeholder="请输入您的证件号码"><span class="form-tips"></span></div><!--邮箱--><div class="form-content"><span class="form-label">邮箱</span>:<input class="form-input" id="form-input-mail" placeholder="请正确填写邮箱地址"><span class="form-tips"></span></div><!--手机号码--><div class="form-content"><span class="form-label">手机号码</span>:<input class="form-input" id="form-input-phone" placeholder="请输入您的手机号码"><span class="form-tips">请正确填写手机号码，稍后将想该手机发送短信验证码</span></div><!--旅客类型--><div class="form-content"><span class="form-label">旅客类型</span>:<select class="form-input" id="form-input-visiters"><option value="adult">成人</option><option value="student">儿童</option><option value="child">学生</option><option value="army">残疾军人</option><option value="police">伤残人民警察</option></select><span class="form-tips"></span></div><!-- 阅读并提交 --><div id="form-end"><input type="checkbox" id="choose"><label for="choose">我已阅读并同意遵守规定 <span>《中国铁路客服服务中心网站服务条款》</span></label><br/><button id="handup">下一步</button></div></div></div></div></div><!-- 分割线 --><div class="line"></div><!-- 页尾 --><div class="footer"><div class="Copyright">关于我们|网站声明<br/>Copyright (c) 2018 Copyright Holder All Rights Reserved.</div></div></body><script type="text/javascript" src="js/main.js"></script>
</html>

main.css

*{margin: 0;padding: 0;box-sizing: border-box;/*防止边框超出*/
}.header{width: 100%;height: 80px;line-height: 50px;background-color: #E8E8E8;font-size: 12px;
}
.wrap{width: 1000px;height: 100%;margin: 0 auto;/* background-color:blue; */
}
.header .header-content{height: 80px;line-height: 80px;
}
.header-left{float: left;
}
.header-left img{width: 60px;height: 60px;margin-top: 10px;margin-right: 10px;display: inline-block;float: left;
}.header-left div{float: left;font-size: 18px;font-weight: bold;
}.header-left div span{font-size: 12px;font-weight:normal;
}
.header-middle{float: right;margin-right:20px;position: relative;
}
.header-middle span{color:rgb(251,116,3);
}
.header-middle a{text-decoration: none;
}
.header-middle .menu{display: inline-block;color:black;padding-right: 20px;width:130px;position: relative;
}
.tab{float: right;
}
.account{float: right;
}
.triangle{position: absolute;top:36px;margin-left: 10px;width: 0;height: 0;border-width: 8px;border-style: solid;border-color:  black  transparent transparent transparent
}
.menu-list{position: absolute;right: 0px;top:60px;width: 130px;padding-left: 10px;padding-top:10px;border: 1px solid rgb(36,135,201);background-color: white;visibility: hidden;
}
.menu-list .menu-list-items{width: 116px;height: 30px;border-bottom: 1px dotted #ccc;line-height: 30px;
}
.menu-list-items:nth-of-type(3n+1){height: 30px;border-bottom: none;
}.header .header-right{float: right;
}
.header-right img{width: 15px;height:21px;margin-top: 30px;float: left;
}
.header-right div{float: left;margin-right: 20px;
}
.line{width:100%;height: 2px;background-color: rgb(36,135,201);/* display: inline-block; */
}
.main{width: 100%;height: 550px;
}
.main .intro{height: 30px;line-height: 30px;font-size: 14px;font-weight: bold;
}
.main .intro span{font-weight: normal;
}
.main .form{border: 1px solid rgb(251,116,3);border-radius:5px;height: 420px;
}
.main .form .title{width: 100%;height: 30px;line-height: 30px;border-radius:5px;background-color: rgb(251,116,3);color:white;font-size: 16px;padding-left: 10px;}
.main .form .table{width: 560px;margin: 20px auto;
}.main .table .form-content{height:30px;line-height: 30px;font-size: 12px;
}.form-content:not(:nth-of-type(8))::before{content:"*";color:rgb(251,116,3);
}
.form-content:nth-of-type(8){margin-left: 8px;
}.table .form-content .form-label{display: inline-block;width: 50px;/* 文本两端对齐很简单，text-align-last: justify; */text-align-last: justify;-moz-text-align-last: justify;
}.table .form-content .form-input{width: 200px;
}
.form-content .form-input{font-size: 12px;
}
.table .form-tips{font-size: 12px;color:rgb(251,116,3);
}.form-tips a{color:rgb(251,116,3);
}
.form-content .level{width: 200px;height: 10px;/* span不能设置宽高，所以需要设置display: inline-block; */display: inline-block;/* visibility:hidden; */
}
.form-content .level span{width:30px;height: 8px;background-color: grey;margin-right: 5px;display: inline-block;
}
#name-tips-contents{position: relative;
}
#hidden-name-tips{position: absolute;left: 340px;top:17px;font-size: 12px;width: 380px;padding: 10px;border: 1px solid rgb(36,135,201);background-color: white;visibility: hidden;
}#pwd-error-code{margin-left: 100px;font-size: 12px;
}#form-end{text-align: center;margin-top: 20px;
}
#form-end button{margin-top: 10px;width: 150px;height: 30px;line-height: 30px;color:white;background-color: rgb(251,116,3);border-radius: 5px;}
#form-end label{font-size: 14px;
}
#form-end label span{color:rgb(36,135,201);
}
.footer{width: 100%;height: 80px;font-size: 12px;background-color: #E8E8E8;text-align: center;padding-top: 20px;
}}

main.js

var input = {userName:{element:'form-input-userName',// 6-30位字母、数字或'_'，字母开头。pattern:/^[a-z]\w{5,29}$/,correct:'用户名输入正确',error: '6-30位字母、数字或"_"，字母开头'},pwd:{element:'form-input-pwd',// 6-20位字母、数字或符号pattern:/^\S{6,20}$/,correct:'',error:"请输入6-20位字母、数字或符号"},pwd2:{element:'form-input-pwd2',correct:'两次输入一致',error:"两次输入不一致，请重新输入"},name:{element:'form-input-name',// 姓名只能包含中文或者英文,且中文字符在2-15之间，英文字符在3-30个之间pattern: /^[\u4e00-\u9fa5]{2,15}|[a-zA-Z]{3,30}$/,correct:"姓名输入正确",error: '姓名只能包含中文或者英文,且字符在3-30个之间！'},cards:{element:'form-input-cards'},userId:{element:'form-input-userId',// 18位数字，最后一位可以是大写或者小写的x。pattern: /^\d{17}[X\d]$/,correct:'号码输入正确',error: '请输入18位身份证号码'},mail:{element:'form-input-mail',// @符号前面可以是数字、大小写字母，符号“_或-”，@后面是数字、大小写字母，// 符号“_或-”加上符号"."再以数字、大小写字母，符号“_或-”为结尾pattern: /^[a-z0-9_-]+@[a-z0-9_-]+\.[a-z0-9_-]+$/i,correct:'邮箱格式正确',error: '请输入正确的邮箱'},phone:{element:'form-input-phone',// 第一位必须是数字1，第二位不能是1和2，必须是11位数字pattern: /^1[^1|^2]\d{9}$/,correct:'手机格式正确',error: '您输入的手机号码不是有效的格式!'},visiters:{element:'form-input-visiters'}}//获取节点
var inputElements = document.getElementsByClassName("form-input");
var submitBtn = document.getElementById('handup');
var pwd1 = document.getElementById(input['pwd'].element);
var pwdErr = document.getElementById('pwd-error-code');
var pwdLevel = document.getElementsByClassName('level')[0];
var formNameTips = document.getElementById('form-name-tips');
var checkbox = document.getElementById('choose');
var tipsContents = document.getElementById("hidden-name-tips");
var account = document.getElementsByClassName('account')[0];
var menuList = document.getElementById('menu-list');window.onload= function(){// 添加input的验证事件eachInputAddVerifyListener();//给submit按钮绑定事件，点击按钮后，所有的Input都要验证一遍submitBtn.addEventListener("click",submitHandler);//当滑过姓名填写规则时，显示tips// 一般onmouseout和mouseover搭配使用formNameTips.onmouseover = function(){tipsContents.style.visibility="visible";}formNameTips.onmouseout = function(){tipsContents.style.visibility="hidden";}account.onmouseover = function(){menuList.style.visibility="visible";}account.onmouseout = function(){menuList.style.visibility="hidden";}}function eachInputAddVerifyListener(){for(var i=0;i<inputElements.length;i++){inputElements[i].addEventListener("blur",function(){formValidByObj(this);})}
}//表单验证
function formValidByObj(ele){var idx =(ele.id).split("-")[2];console.log(idx);var content = ele.value;//寻找兄弟节点中的form-tips的元素var formTips = ele.parentNode.querySelector('.form-tips');var flag = false;if(idx=="pwd2"){//处理确认密码if(ele.value==""){formTips.innerHTML="输入框不能为空";formTips.style.color = "red";return flag;}else{if(pwd1.value==ele.value){flag=true;}else{flag=false;}}}else if(idx=="cards" || idx=='visiters'){return true;}else{var pattern = input[idx].pattern;flag = pattern.test(content);}//密码处理方式有不同if(idx=="pwd"){handlePwd(flag,formTips,content);}else{if(flag){formTips.innerHTML=input[idx].correct;formTips.style.color = "green";}else{formTips.innerHTML=input[idx].error;formTips.style.color = "red";}}return flag;
}//密码处理，
function handlePwd(flag,formTips,content) {checkCodeLevel(content);if(flag){// console.log(formTips);pwdErr.innerHTML=input['pwd'].correct;}else{pwdErr.innerHTML=input['pwd'].error;pwdErr.style.color = "red";}
}
//验证密码复杂度等级
function checkCodeLevel(content){if(/^[1-9]+$/.test(content) || /^[a-zA-Z]+$/.test(content) || /^\W+$/.test(content)){//密码为低pwdLevel.children[0].style.backgroundColor="red";pwdLevel.children[1].style.backgroundColor="grey";pwdLevel.children[2].style.backgroundColor="grey";}else if(/^[1-9|a-z]+$/i.test(content) || /^[\W|a-z]+$/i.test(content) || /^[\W|1-9]+$/i.test(content)){//密码为中pwdLevel.children[0].style.backgroundColor="red";pwdLevel.children[1].style.backgroundColor="orange";pwdLevel.children[2].style.backgroundColor="grey";}else if(/\W[a-zA-Z]*/.test(content)){//密码为高pwdLevel.children[0].style.backgroundColor="red";pwdLevel.children[1].style.backgroundColor="orange";pwdLevel.children[2].style.backgroundColor="green";}
}//点击提交按键，表单全验证
function submitHandler(){console.log("submit");var res = true;;for(var i=0;i<inputElements.length;i++){//  console.log(inputElements[i]);var currFlag = formValidByObj(inputElements[i]);if(currFlag==false){res = false;}//    console.log(res);}// console.log(checkbox.checked);//判断checkbox是否选中if(checkbox.checked && res==true){window.open("https://www.imooc.com",'_self');}}

前端：注册校验页面（html+css+javascript）相关推荐

web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面)
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
web前端期末大作业：文化网站设计——中国风文化html源码(6个页面) HTML+CSS+JavaScript...
web前端期末大作业:文化网站设计--中国风文化html源码(6个页面) HTML+CSS+JavaScript 期末作业HTML代码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到 ...
web前端实训大作业：餐饮网站设计——美食城(7个页面) HTML+CSS+JavaScript
web前端实训大作业:餐饮网站设计--美食城(5个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要 ...
web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作...
web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
web前端大三实训网页设计：餐饮网站设计——烧烤美食山庄(7个页面) HTML+CSS+JavaScript
web前端大三实训网页设计:餐饮网站设计--烧烤美食山庄(7个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
HTML5期末大作业：售票网站设计——票务网站整套模板(24个页面) HTML+CSS+JavaScript
HTML5期末大作业:售票网站设计--票务网站整套模板(24个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
HTML5期末大作业：动漫网站设计——迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码学生网页课程设计期末作业下载动漫大学生网页设计制作成
HTML5期末大作业:动漫网站设计--迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码学生网页课程设计期末作业下载动漫大学生网页设计制作成临近期末, 你还在为 ...
web课程设计网页规划与设计：个人毕设网站设计 —— 二手书籍(11个页面) HTML+CSS+JavaScript
web课程设计网页规划与设计:网站设计--二手书籍(11个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
HTML5期末大作业：个人网站设计——拾艺客个人设计工作室(6个页面) HTML+CSS+JavaScript...
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能满足你的 ...
HTML5期末大作业：网站——卡通漫画游戏官方网页 (萌王) 13个页面 HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计
HTML5期末大作业:HTML5期末大作业:网站--卡通游戏官方网页 (萌王)HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个 ...

前端：注册校验页面（html+css+javascript）

文章目录

代码段

css实现倒三角

css样式总结

项目列表

完整代码

main.html

main.css

main.js

前端：注册校验页面（html+css+javascript）相关推荐

最新文章

热门文章