关于前端的知识

关于前端的知识首先是html的head部分!

用户登录-国华人寿保险商城

	<script src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.validate.js" ></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#msg-login").click(function(){
				$("#id1").hide();
				$("#id2").show();
			});
			$("#pwd-login").click(function(){
				$("#id1").show();
				$("#id2").hide();
			});
		});
		
	</script>
	
	 <script type="text/javascript">
    	$().ready(function() {
		 $("#id1").validate({
		    rules: {
		   		username: {
		    		required: true
		   		},
		   		password: {
		    		required: true,
		   		},
		 	 },
		        messages: {
		  			firstname: "请输入姓名",
		   			email: {
		    			required: "请输入Email地址",
		    			email: "请输入正确的email地址"
		   			},
		   		password: {
		    		required: "请输入密码",
		    		minlength: jQuery.format("密码不能小于{0}个字 符")
		   		}
		  
		 	 }
		    });
		});

    </script>

然后是body部分

<body>
		<div class="header">
			<div class="title">
					<div class="personalCenter"><a href="#">个人中心</a>
						<ul class="menu-list-left">
							<li>
								<a href="#">我的订单</a>
							</li>
							<li>
								<a href="#">我的保单</a>
							</li>
							<li>
								<a href="#">理财资产</a>
							</li>
							<li>
								<a href="#">年金账户</a>
							</li>
							<li>
								<a href="#">个人信息</a>
							</li>
							<li>
								<a href="#">自助服务</a>
							</li>
						</ul>	
					</div>
					<span class="shuxian">|&nbsp&nbsp<a href="#">信访邮箱</a></span>
					<span class="shuxian">|&nbsp&nbsp<a href="#">招才纳贤</a></span>
					<span class="shuxian">|&nbsp&nbsp<a class="weibo" href="#">&nbsp;&nbsp;国华人寿新浪微博</a></span>
					<span class="shuxian">|&nbsp&nbsp<a href="#">万能险利率公告</a></span>
					<span class="shuxian">|&nbsp&nbsp<a href="#">投连险价格公布</a></span>
				</div>
			<div class="welcome">
				<span>您好,欢迎来到国华人寿&nbsp&nbsp&nbsp&nbsp</span>
				<span><a href="#">登录</a></span>
				<span class="shuxian">|&nbsp&nbsp<a href="#">注册</a></span>
			</div>
		</div>
		
		
		
		<div class="firstpage">
			<div class="logo">
				<a href="#"><img src="img/logo-1.png" width="127" height="32"></a>
			</div>
   			
    		<div class="menu">
				<span><a href="#">首页</a></span>
				<span><a href="#">网上商城</a></span>
				<span class="qudao"><a href="#">渠道中心</a>
					<ul class="qudaoxinxi">
						<p>
							<a href="#">网上保险</a>
						</p>
						<p>
							<a href="#">个人保险</a>
						</p>
						<p>
							<a href="#">银行保险</a>
						</p>
	
						<span>
							<p>
								<a href="#">经代保险</a>
							</p>
							<p>
								<a href="#">团体保险</a>
							</p>
							<p>
								<a href="#">电话保险</a>
							</p>
						</span>
					</ul>
				</span>
				<span class="fuwu"><a href="#">客户服务</a>
					<ul class="fuwuxinxi">
							<p>
								<a href="#">承保服务</a>
							</p>
							<p>
								<a href="#">续期服务</a>
							</p>
							<p>
								<a href="#">理赔服务</a>
							</p>
						<span>
							<p>
								<a href="#">保单服务</a>
							</p>
							<p>
								<a href="#">卡单服务</a>
							</p>
							<p>
								<a href="#">反欺诈提示</a>
							</p>
						</span>
					</ul>
				</span>	
				<span><a href="#">走进国华</a></span>
				<span><a href="#">新闻资讯</a></span>
			</div>
		</div>
		
		
		<div class="zhongjian">
			<img class="tou" src="img/tou.jpg" />
			<img class="ren" src="img/ren.jpg" />
			<h1>用户登录</h1>
			<div class="biankuang">
				<div class="container">
				<form action="" id="id1">
					<div class="form">
						<div>
							<img class="picture" src="img/passwordTab_red.png" oncli>
							<img id="msg-login" class="picture" src="img/duanxinTab.png">
						</div>
						
						<span class="error-msg">tianjin
			            </span> 

						<div class="input">
							<span><img src="img/username.png"></span>
							<input id="username" type="text" placeholder="用户名/手机号" >
						</div>
						<div class="input">
							<span><img src="img/password.png"></span>
							<input id="password"  type="password" placeholder="网站登录密码">
						</div>
						
						
						<div class="check">
							<input class="fl" type="checkbox">
							<span class="fl">下次自动登录</span> 
							<a class="fr" href="#">忘记密码？</a>
						</div>
						
						<input class="c2" type="submit" value="登录">
						<div class="reg_guide">
							<p style="color:black">合作网站账号登录：</p>
						    <div>
						    	<img src="img/zhifubao.png">&nbsp&nbsp&nbsp&nbsp&nbsp
						    	<img src="img/qq.png">&nbsp&nbsp&nbsp&nbsp&nbsp
						    	<img src="img/weixin.png">&nbsp&nbsp&nbsp&nbsp&nbsp
						    	<img src="img/wangyi.png">&nbsp&nbsp&nbsp&nbsp&nbsp
						    	<img src="img/weibo.png">
							</div>
						</div>
					</div>	
				</form>
				
				<form action="" id="id2">
					<div class="form">
						<div>
							<img id="pwd-login" class="picture" src="img/passwordTab.png">
							<img class="picture" src="img/duanxinTab_red.png">
						</div>
						<span class="error-msg">tianjin
			            </span> 
						<div class="input">
							<span><img src="img/username.png"></span>
							<input id="username" type="text" placeholder="用户名/绑定手机的账号" >
						</div>
						<div class="duanxin">
							<span><img src="img/duanxin.png"></span>
							<input id="username" type="text" placeholder="获取验证码" >
							<a href="#"><div class="huoqu">获取验证码</div></a>
						</div>
						<div class="yanzhengma"><input type="text" placeholder="右图验证字符"/></div>
						<div class="check">
							<input class="fl" type="checkbox">
							<span class="fl">下次自动登录</span> 
							<a class="fr" href="#">忘记密码？</a>
						</div>
						
						<input class="c2" type="submit" value="登录">
						<div class="reg_guide">
							<p style="color:black">合作网站账号登录：</p>
						    <div>
						    	<img src="img/zhifubao.png">&nbsp&nbsp&nbsp&nbsp&nbsp
						    	<img src="img/qq.png">&nbsp&nbsp&nbsp&nbsp&nbsp
						    	<img src="img/weixin.png">&nbsp&nbsp&nbsp&nbsp&nbsp
						    	<img src="img/wangyi.png">&nbsp&nbsp&nbsp&nbsp&nbsp
						    	<img src="img/weibo.png">
							</div>
						</div>
					</div>	
				</form>
				 
				
				
				<div class="biankuang-right">
					<img src="img/people.png">
					<p>现在免费注册成为国华人寿会员后，就可以立即在网上商城上购</br>买保险产品，享受安全、便利和优质的金融服务。</p>
					<img class="reg" src="img/register.png">
				</div>
			</div>
				</div>
			
		</div>
		
		
		

		<div class="footerall" >
			<div class="footer">
				<div class="footer-left">
					<div class="t1" style="font-weight: bold;padding-left: 5px;">合作网站</div>
					<div class="item-box">
						<span><a target="_blank" href="http://www.tmall.com">天猫</a></span>
						<span class="xuan"><a target="_blank" href="http://www.alipay.com">支付宝</a></span>
						<span class="xuan"><a target="_blank" href="http://jr.jd.com">京东金融</a></span>
					</div>
					<div class="item-box">
						<span><a target="_blank" href="http://www.taobao.com">淘宝</a></span>
						<span class="xuan"><a target="_blank" href="http://www.bestpay.com.cn">翼支付</a></span>
						<span class="xuan"><a target="_blank" href="http://jinrong.suning.com/?utm-source=eservice.95549.cn&utm-medium=reffer">苏宁金融</a></span>
					</div>
					<div class="item-box">
						<span><a target="_blank" href="http://weixin.qq.com">微信</a></span>
						<span class="xuan"><a target="_blank" href="http://www.tongbanjie.com">铜板街</a></span>
						<span class="xuan"><a target="_blank" href="http://money.sohu.com">搜狐财经</a></span>
					</div>
					<div class="item-box">
						<span><a target="_blank" href="http://www.yixin.im">易信</a></span>
						<span class="xuan"><a target="_blank" href="http://www.tenpay.com">财付通</a></span>
						<span class="xuan"><a target="_blank" href="https://www.mybosc.com">上行快线</a></span>
					</div>
					<div class="item-box">
						<span><a target="_blank" href="http://www.163.com">网易</a></span>
						<span>&nbsp;</span>
						<span>&nbsp;</span>
					</div>
				</div>
				<div class="footer-mid">
					<div class="t1" style="font-weight: bold;padding-left: 5px;">国华人寿</div>
					<div class="item-box">
						<span><a href="#">招才纳贤</a></span>
						<span class="xuan"><a href="#">联系我们</a></span>
					</div>
					<div class="item-box">
						<span><a href="#">法律声明</a></span>
						<span class="xuan"><a href="#">网站地图</a></span>
					</div>
					<div class="item-box">
						<span><a href="#">友情链接</a></span>
						<span class="xuan"><a href="#">帮助中心</a></span>
					</div>
					<div class="item-box">
						<span><a href="#">关于我们</a></span>
					</div>
				</div>

				
				<div class="footer-right">
					<p class="bottom-call-title">网上业务咨询：</p>
					<p class="call-info">95549</p>
					<p class="bottom-call-title">咨询\报案\查询\投诉\电话销售</p>
					<p>
						<span><a href="#" target="_blank"><img class="foot-picture" src="img/public.png" style="width: 117px"></a></span>
						<span><a href="#" target="_blank"><img class="foot-picture" src="img/internet.png" style="width: 117px"></a></span>
					</p>
				</div>
			</div>

		</div>			
    	
		<div class="xian"></div>
		
		<div class="bottom-all">
	        <a target="_blank" style="display: inline-block;position: absolute;top:0;right: 2px;padding-right: 0;padding-left: 0; ">
	        	<img src="img/cnnic.png"  style="width: 89px; height: 32px;"/>
	        </a>
	        <div class="bottom">
	            <div class="bottom-first"> Copyright © 2014 国华人寿保险股份有限公司 All rights Reserved </div><br>
	            <div>经营许可证编号：沪ICP备11033068号&emsp;&emsp;沪B2-20110108&emsp;&emsp;京公网安备110105002158号</div>
	        </div>
	    </div>
	</body>

这里script定义了函数，方便对html页面的元素做增删改查

然后对body开始设计首先添加common.css样式

body,div,dl,dt,dd,ul,ol.li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
{
    margin: 0;
    padding: 0;
    color: black;
    outline: none;
}


body {
    font-family: "Microsoft yahei";
    font-size: 12px;
    color: #666;
}

//列表的前面的样式
ul,li {
    list-style-type: none;
}


id为id2的样式隐藏起来
#id2{
	display: none;
}

接着设计header的样式

.header{
	height:40px;
	line-height: 40px;
	background-color: #4a4f57;
	color:white;
	text-decoration: none;
}
.header a{
	color:white;
	text-decoration: none;
}
.header a:hover{
	color:red;
	text-decoration:none;
}


.title{
	margin-left:200px;
	float:left;
	color: white;
}


.weibo {
    background: url(../img/weibo.gif) no-repeat 1px 1px;
    height: 16px;
    margin-left: 0px;
    padding-left: 18px !important;
}


.personalCenter{
    display: inline-block;
    padding: 0 5px;
    color: white;
}

.personalCenter:hover ul{
	display: block;
	position:absolute;
	left:200px;
	top:35px;
	color:black;
}


.menu-list-left{
    position: absolute;
    top:25px;
    left:20px;
    width:50px;
    padding: 0px 25px;
    border:1px solid #F2F2F2;
    background: white;
    z-index: 9999;
    display: none;
}
.menu-list-left li{
    width: 60px;
    height: 13px !important;
    line-height: 13px !important;
    margin: 15px 0;
}
.menu-list-left li a{
    font-size: 12px;
    color:black;
}

.welcome{
	float: right;
	height: 40px;
    line-height: 40px;
    color: darkgray ;
    margin-right: 150px;
}

.shuxian{
    color:white;
    margin:0 4px;
}

继续添加fristpage的样式

.firstpage{
	background-color: white;
	height: 10px;
	
}

.logo{
	margin-left:200px;
	margin-top:20px;
	float:left;
	width:127px;
	height:32px;
	
}

.menu{
	float:left;
	margin-left: 20px;
	margin-top:-8px;
	
}

.menu span{
	font-size: 14px;
	margin:30px;
	line-height: 30px;
	margin-left:10px;
	
	
}
.menu a{
	color:black;
	text-decoration: none;
}	


.menu a:hover{
	color:red;
	border-bottom: 1px solid red;
	padding-bottom: 8px;
}

.qudao{
    display: inline-block;
    padding: 0 5px;
    color: white;
}

.qudao:hover ul{
	display: block;
	position:absolute;
	left:450px;
	top:100px;
	color:black;
	width:200px;
}


.qudaoxinxi{
    position: absolute;
    top:50px;
    left:200px;
    width:200px;
    padding: 0px 25px;
    border:1px solid #F2F2F2;
    background: white;
    z-index: 9999;
    display: none;
    border-right: 1px solid #ddd;
}


.qudaoxinxi span{
	float:right;
	margin-left: 110px;
	margin-top: -90px;
}

.fuwu{
    display: inline-block;
    padding: 0 5px;
    color: white;
}

.fuwu:hover ul{
	display: block;
	position:absolute;
	left:600px;
	top:100px;
	color:black;
	width:210px;
	height:100px;
}


.fuwuxinxi{
    position: absolute;
    top:80px;
    left:200px;
    width:200px;
    padding: 10px 5px 10px 25px;
    border:1px solid #F2F2F2;
    background: white;
    z-index: 9999;
    display: none;
    border-right: 1px solid #ddd;
}


.fuwuxinxi span{
	float:right;
	margin-left: 110px;
	margin-top: -90px;
}

中间的zhongjian.css

.zhongjian{
	margin-top: 60px;
	width:auto;
	border: 1px solid gainsboro;
}

.zhongjian h1{
	position: absolute;
	top: 136px;
	left: 240px;
	color: white;
	font-size: 10px;
}


.zhongjian h1 img{
	margin: 5px 10px 0 200px;
	display: inline;
}



.tou{
	margin-left: 180px;
	margin-top:5px;
}

.ren{
	display: block;
	margin-left:210px;
	margin-top:-45px;
	
}

.biankuang{
	height:auto;
	border: 1px black;
	margin: 50px;	
}



.biankuang-right{
	margin-top:30px;
	margin-left:520px;	
	border: 1px black;
}


.picture{
	width:180px;
	height:44px;
}



.container {
	margin-top:-400px;
	margin-left:150px;
	margin-right:160px;	
	width:950px;	
	height: 420px;
	background-repeat: no-repeat;
	background-size:cover;
	border:1px solid darkgray;
}


.container .form {
	margin-left:50px;
	margin-top:30px;
	width: 370px;
	height: 360px;
	padding: 10px;
	margin-top:20px;
	float: left;
	border: 1px solid darkgray;
}


.container .form .input {
	margin-top: 20px; 
	margin-left:35px;
	padding: 5px;
	background-color: white;
	width:300px;
	height: 25px;
	border: 1px solid lightgrey;
	padding-bottom: 1px;
}

.container .form .input input {
	width:274px;
	height: 15px;
	outline: none;
	border: 1px white;	
}


.container .form .input span {
	display: block;
	width: 28px;
	height: 28px;
	float: left;
	margin: -1px;
}

.container .form  P {
	margin-top: 15px;
	font-size: 10px;
	color: red;
}



.container .form .check span {
	font-size: 10px;
	color: black;
	
}

.container .form .check a {

	font-size: 10px;
	color: black;	
	text-decoration: none;
	margin-left::;0px;	
}


.container .form>input {
	margin-top:20px;
	margin-left:38px;
	width:300px;
	height:43px;
	background:url(../img/denglu_btn.png);
	font-size:16px;
	color:white;
	text-align:center;
	line-height: 30px;
	border:none;
	border-radius:3px;
	
}


.check{
	margin-top:15px;
	margin-left:40px;
}

.fr{
	margin-left:150px;
}

.reg_guide{
	margin-top:30px;
	margin-left:40px;
}


.reg{
	margin-left: 50px;
	margin-top:15px;
}


.error-msg{
	margin-top: 10px;
	width:310px;
	height:30px;
	display: block;
	margin-left: 37px;
	border: 1px solid gray;
	background-color: darkgray;
}

短信的css样式

.yanzhengma{
	margin-top: 10px;
	width:170px;
	margin-left: 35px;
	border: 1px solid darkgray;
	height:30px;
}

.yanzhengma input{
	width:140px;
	height: 30px;
	outline: none;
	border: none;
	margin-left: 10px;
	line-height: 30px;
}

.get{
	margin-top: 1px;
	width:108px;
	height:50px;
	display: inline;
	border: 1px solid black;
	padding-left: 5px;
}

.get a{
	text-decoration: none;
	color: black;
}



.duanxin {
	margin-top: 20px; 
	margin-left:35px;
	padding: 5px;
	background-color: white;
	width:200px;
	height: 25px;
	border: 1px solid lightgrey;
	padding-bottom: 1px;
}

.duanxin input{
	border: none;
	width:164px;
}


.duanxin .huoqu {
	border: 1px solid lightgray;
	width:100px;
	height:32px;
	margin-top:-23px;
	margin-left:205px;
	line-height: 32px;
	background-color:grey ;
	color:yellow;
}

.huqou a{
	text-decoration: none;
	color: yellow;
}
.huoqu:hover a{
	color:yellow;
	text-decoration: none;
}

.container {
	margin-top:-40px;
	margin-left:150px;
	margin-right:160px;	
	width:950px;	
	height: 460px !important;
	background-repeat: no-repeat;
	background-size:cover;
	border:1px solid darkgray;
}


.container .form {
	margin-left:50px;
	margin-top:30px;
	width: 370px;
	height: 400px !important;
	padding: 10px;
	margin-top:20px;
	float: left;
	border: 1px solid darkgray;
}

脚的样式

.footerall{
	margin-top:40px;
	}


.footer-left{
	float:left;
	margin-left: 200px;
}

.footer-mid{
	float:left;
	margin-left:100px;
}

.footer-right{
	float:left;
	margin-left:150px;
}

.call-info{
    font-family: "Microsoft yahei";
    font-size: 24px !important;
    color:#dc1a25 !important; 
    padding-left: 40px !important;
    background: url("img/call.png") no-repeat 0 10px;
    font-weight: bold;
}

.item-box{
    width: 200px;
    height:20px;
    margin-top:15px;
}


	
.item-box a{
	text-decoration: none;
	color: darkgrey;
	margin-top:10px;
	}
	
.item-box .xuan{
	margin-left: 20px;
}	

.footer-mid{
	margin-left: 190px;
}

.footer-mid xuan{
	margin-left: 50px;
}

.footer-right{
	font-size: 16px;
	color: black;
}

.foot-picture{
	width:150%;
}


.xian{
	width:980px;
	border-bottom: 1px solid gainsboro;
	margin-top:260px;
	margin-left:200px;
}


.bottom-all{
    width: 1010px;
    margin: 15px auto;
    text-align: center;
    margin-bottom: 70px;
    padding-bottom: 5px;
    position: relative;
}


.bottom{
    position: absolute;
    top:0;
    left: 30px;
}

.bottom-first{
	position: absolute;
    top:0;
    left: 0;
}

关于前端的知识 首先是html的head部分!

猜你喜欢

关于前端的知识首先是html的head部分!