黑马程序员----基于BootStrap框架的网页制作综合案例

发布于

网页制作综合案例

  • 完整源码:
  • 效果演示:

完整源码:

代码语言：javascript
复制
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>模板1</title>
     <link href="../css/bootstrap.min.css" rel="stylesheet">
	 <!--表单校验-->
	 <script>
	 //密码和确认密码的一致性校验
	 function checkPwAndRPw(f1,f2)
	 {
		 if(f1&&f2)
		 {
			 //密码和确认密码不为空，进行非空校验
			 //1.密码和确认密码的值拿到
			 var pwd=document.getElementById("PassWord").value;
			 var rpwd=document.getElementById("rePassWord").value;
			 var msg=document.getElementById("rePassWordMsg");
			 var div=document.getElementById("rePassWordDiv");
			 if(pwd==rpwd)
			 {
				 //当输入正确后，将错误状态撤销，恢复之前正确的状态
				 div.className="form-group";//属性只能追加或者覆盖
				 msg.innerHTML="";
				 return true;
			 }
			 else
			 {
				 div.className+=" has-error";
				  msg.innerHTML="密码不一致";
				 return false;
			 }
		 }
		 else
		 {
			 //有一个为空，返回false
			 return false;
		 }
	 }
	 //非空校验---通用方法
	 function checkNotNull(nid)
	 {
		 //用户名不为空
		 //1.获取用户名表单输入项---元素对象
		 var nodex=document.getElementById(nid);
		 //2.获取对应错误信息回显 ----label元素
		 var msg=document.getElementById(nid+"Msg");
		 //3.获取对应的DIV
		 var div=document.getElementById(nid+"Div");
		 //4.进行非空判断
		 var reg=/^\s*$/;//如果有0~多个空白符号，就为真---全部为空格就为真，否则为假
		 if(reg.test(nodex.value))
		 {
		 			 //有错误时，给div的className追加属性
		            div.className+=" has-error";
		 			 msg.innerHTML="不能为空";
		 			 //用户名信息，不合格
		 			 return false;
		 }
		 else
		 {
			 //当输入正确后，将错误状态撤销，恢复之前正确的状态
			 div.className="form-group";//属性只能追加或者覆盖
			 msg.innerHTML="";
		 			 return true;
		 }
    }
		 //表单校验方法
		 function  CheckForm()
		 {
			 //用户名
			 var flag1=checkNotNull("userName");
			 //密码
			var flag2=checkNotNull("PassWord");
			 //确认密码
			 var flag3=checkNotNull("rePassWord");
            //一致性校验
			var flag4=checkPwAndRPw(flag2,flag3);
			 return flag1&&flag2&&flag3&&flag4;
		 }

 &lt;/script&gt;



</head>

<body>

<!--将所有内容包裹到一个容器中-->

<div class="container"><!--处于居中位置，且两边有留白-->

<!--网站头部-->

<div class="row"><!--栅格系统-->

<div class="col-md-4">

<img src="../funImage/logo2.png"/>

</div>


		  &lt;div class=&#34;col-md-4&#34;&gt;
		   &lt;img src=&#34;../funImage/header.png&#34;/&gt;
		   &lt;/div&gt;
		   
             &lt;!--第三部分是一个内联的无序列表--&gt;
			 &lt;ul class=&#34;list-inline&#34; style=&#34;margin-top: 15px;&#34;&gt;&lt;!--盒子模型，距离外部的上边框，十个像素--&gt;
				 &lt;li&gt;&lt;a href=&#34;&#34; class=&#34;btn btn-primary&#34;&gt;登录&lt;/a&gt;&lt;/li&gt;
				  &lt;li&gt;&lt;a href=&#34;&#34; class=&#34;btn btn-primary&#34;&gt;注册&lt;/a&gt;&lt;/li&gt;
				   &lt;li&gt;&lt;a href=&#34;&#34; class=&#34;btn btn-danger&#34;&gt;购物车&lt;/a&gt;&lt;/li&gt;
				 &lt;/ul&gt;
		 &lt;/div&gt;
	 &lt;!--导航条--&gt;
				 &lt;nav class=&#34;navbar navbar-inverse&#34;&gt;&lt;!--导航条变成黑色--&gt;
				   &lt;div class=&#34;container-fluid&#34;&gt;
					 &lt;div class=&#34;navbar-header&#34;&gt;
					   &lt;button type=&#34;button&#34; class=&#34;navbar-toggle collapsed&#34; data-toggle=&#34;collapse&#34; data-target=&#34;#bs-example-navbar-collapse-1&#34; aria-expanded=&#34;false&#34;&gt;
						 &lt;span class=&#34;sr-only&#34;&gt;汉堡按钮&lt;/span&gt;
						 &lt;span class=&#34;icon-bar&#34;&gt;&lt;/span&gt;
						 &lt;span class=&#34;icon-bar&#34;&gt;&lt;/span&gt;
						 &lt;span class=&#34;icon-bar&#34;&gt;&lt;/span&gt;
					   &lt;/button&gt;
					   &lt;a class=&#34;navbar-brand&#34; href=&#34;#&#34;&gt;BalckHorse&lt;/a&gt;
					 &lt;/div&gt;

					 &lt;div class=&#34;collapse navbar-collapse&#34; id=&#34;bs-example-navbar-collapse-1&#34;&gt;
					   &lt;ul class=&#34;nav navbar-nav&#34;&gt;
						   &lt;!--active表示当前选项被选中了--&gt;
						 &lt;li class=&#34;active&#34;&gt;&lt;a href=&#34;#&#34;&gt;手机数码 &lt;span class=&#34;sr-only&#34;&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
						 &lt;li&gt;&lt;a href=&#34;#&#34;&gt;电脑办公&lt;/a&gt;&lt;/li&gt;
						 &lt;li class=&#34;dropdown&#34;&gt;
						   &lt;a href=&#34;#&#34; class=&#34;dropdown-toggle&#34; data-toggle=&#34;dropdown&#34; role=&#34;button&#34; aria-haspopup=&#34;true&#34; aria-expanded=&#34;false&#34;&gt;更多 &lt;span class=&#34;caret&#34;&gt;&lt;/span&gt;&lt;/a&gt;
						   &lt;ul class=&#34;dropdown-menu&#34;&gt;
							 &lt;li&gt;&lt;a href=&#34;#&#34;&gt;手机&lt;/a&gt;&lt;/li&gt;
							 &lt;li&gt;&lt;a href=&#34;#&#34;&gt;电脑&lt;/a&gt;&lt;/li&gt;
							 &lt;li&gt;&lt;a href=&#34;#&#34;&gt;主机&lt;/a&gt;&lt;/li&gt;
							 &lt;li role=&#34;separator&#34; class=&#34;divider&#34;&gt;&lt;/li&gt;
							 &lt;li&gt;&lt;a href=&#34;#&#34;&gt;手柄&lt;/a&gt;&lt;/li&gt;
							 &lt;li role=&#34;separator&#34; class=&#34;divider&#34;&gt;&lt;/li&gt;
							 &lt;li&gt;&lt;a href=&#34;#&#34;&gt;VR虚拟设备&lt;/a&gt;&lt;/li&gt;
						   &lt;/ul&gt;
						 &lt;/li&gt;
					   &lt;/ul&gt;
					   &lt;!--form表单靠右显示--&gt;
					   &lt;form class=&#34;navbar-form navbar-right&#34;&gt;
						 &lt;div class=&#34;form-group&#34;&gt;
						   &lt;input type=&#34;text&#34; class=&#34;form-control&#34; placeholder=&#34;查询&#34;&gt;
						 &lt;/div&gt;
						 &lt;button type=&#34;submit&#34; class=&#34;btn btn-default&#34;&gt;搜索&lt;/button&gt;
					   &lt;/form&gt;
					 &lt;/div&gt;
				   &lt;/div&gt;
				 &lt;/nav&gt;
	 
	 &lt;!--注册页面主体--&gt;
	 &lt;!--背景图片---bi，后面要通过url的括号里面引入地址--&gt;
	 &lt;div class=&#34;row&#34; style=&#34;background-image: url(../funImage/regist_bg.jpg)&#34;&gt;
		&lt;!--背景图片只有在网页主体部分有内容时，才会显现出来--&gt;
		&lt;div class=&#34;col-sm-8 col-lg-offset-2&#34; style=&#34;border: 5px solid gainsboro; background-color: white ;&#34; &gt;&lt;!--列偏移2个位置，同时还要设置主体部分的边框--&gt;
			&lt;div class=&#34;row&#34;&gt;
				&lt;div class=&#34;col-sm-8 col-sm-offset-2&#34;&gt;
					&lt;font color=&#34;#204D74&#34; size=&#34;4&#34;&gt;会员注册&lt;/font&gt;
					&lt;/div&gt;
					&lt;/div&gt;
					&lt;!--给表单绑定js事件--&gt;
								&lt;form class=&#34;form-horizontal&#34; onsubmit=&#34;return CheckForm()&#34;&gt;
								  &lt;div id=&#34;userNameDiv&#34; class=&#34;form-group&#34;&gt;
									&lt;label class=&#34;col-sm-2 control-label &#34; &gt;用户名&lt;/label&gt;
									&lt;div class=&#34;col-sm-8&#34;&gt;
									  &lt;input type=&#34;text&#34; class=&#34;form-control&#34; id=&#34;userName&#34; name=&#34;userName&#34; placeholder=&#34;请输入用户名&#34;&gt;
									&lt;/div&gt;
									&lt;!--用户名输入有误时，通过js来填充对应显示的错误信息--&gt;
									&lt;label id=&#34;userNameMsg&#34; class=&#34;col-sm-2 control-label&#34;&gt;&lt;/label&gt;
								  &lt;/div&gt;
								  
								  &lt;div id=&#34;PassWordDiv&#34; class=&#34;form-group&#34;&gt;
									&lt;label  class=&#34;col-sm-2 control-label&#34;&gt;密码&lt;/label&gt;
									&lt;div class=&#34;col-sm-8&#34;&gt;                                        &lt;!--密码需要提交，并获取相应的对象，来进行表单校验--&gt;    
									  &lt;input type=&#34;password&#34; class=&#34;form-control&#34; id=&#34;PassWord&#34; name=&#34;PassWord&#34; placeholder=&#34;请输入密码&#34;&gt;
									&lt;/div&gt;
										&lt;label id=&#34;PassWordMsg&#34; class=&#34;col-sm-2 control-label&#34;&gt;&lt;/label&gt;
									&lt;/div&gt;
									
									&lt;div id=&#34;rePassWordDiv&#34; class=&#34;form-group&#34;&gt;
									&lt;label  class=&#34;col-sm-2 control-label&#34;&gt;确认密码&lt;/label&gt;
									&lt;div class=&#34;col-sm-8&#34;&gt;                  &lt;!--确认密码不需要提交，只需要再前段进行表单校验--&gt;
									&lt;input type=&#34;password&#34; class=&#34;form-control&#34; id=&#34;rePassWord&#34; placeholder=&#34;请重新输入一次密码&#34;&gt;
									&lt;/div&gt;
										&lt;label id=&#34;rePassWordMsg&#34; class=&#34;col-sm-2 control-label&#34;&gt;&lt;/label&gt;
								     &lt;/div&gt;
									 
									 &lt;div  id=&#34;emailDiv&#34; class=&#34;form-group&#34;&gt;
									 &lt;label  class=&#34;col-sm-2 control-label&#34;&gt;邮箱&lt;/label&gt;
									 &lt;div class=&#34;col-sm-8&#34;&gt;
									 &lt;input type=&#34;email&#34; class=&#34;form-control&#34; id=&#34;email&#34; name=&#34;email&#34; placeholder=&#34;请输入邮箱&#34;&gt;
									 &lt;/div&gt;
									 &lt;label id=&#34;emailMsg&#34; class=&#34;col-sm-2 control-label&#34;&gt;&lt;/label&gt;
									  &lt;/div&gt;
									 
									 
									 &lt;div div=&#34;NameDiv&#34; class=&#34;form-group&#34;&gt;
									 &lt;label  class=&#34;col-sm-2 control-label&#34;&gt;姓名&lt;/label&gt;
									 &lt;div class=&#34;col-sm-8&#34;&gt;
									 &lt;input type=&#34;text&#34; class=&#34;form-control&#34; id=&#34;Name&#34; name=&#34;Name&#34; placeholder=&#34;请输入姓名&#34;&gt;
									 &lt;/div&gt;
									  &lt;label id=&#34;NameMsg&#34; class=&#34;col-sm-2 control-label&#34;&gt;&lt;/label&gt;
									  &lt;/div&gt;
									  
									  &lt;div class=&#34;form-group&#34;&gt;
									  &lt;label  class=&#34;col-sm-2 control-label&#34;&gt;性别&lt;/label&gt;
									  &lt;div class=&#34;col-sm-8&#34;&gt;
									  &lt;input type=&#34;radio&#34;   name=&#34;sex&#34; placeholder=&#34;请输入性别&#34; value=&#34;man&#34; checked=&#34;checked&#34; style=&#34;margin-top: 10px;&#34;&gt;男
									   &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type=&#34;radio&#34;  name=&#34;sex&#34; placeholder=&#34;请输入性别&#34; value=&#34;woman&#34; style=&#34;margin-top: 10px;&#34;&gt;女
									  &lt;/div&gt;
									   &lt;/div&gt;
									  
									 
								  &lt;div class=&#34;form-group&#34;&gt;
									&lt;div class=&#34;col-sm-offset-2 col-sm-10&#34;&gt;
									  &lt;div class=&#34;checkbox&#34;&gt;
										&lt;label&gt;
										  &lt;input type=&#34;checkbox&#34;&gt; 记住我
										&lt;/label&gt;
									  &lt;/div&gt;
									&lt;/div&gt;
								  &lt;/div&gt;
								  
								  &lt;div class=&#34;form-group&#34;&gt;
									&lt;div class=&#34;col-sm-offset-2 col-sm-10&#34;&gt;
									  &lt;input type=&#34;submit&#34; class=&#34;btn btn-danger btn-lg&#34; value=&#34;注册&#34;/&gt;
									&lt;/div&gt;
								  &lt;/div&gt;
								&lt;/form&gt;
									&lt;/div&gt;
									
									&lt;!--网站底部--&gt;
									&lt;div class=&#34;row&#34;&gt;
										&lt;div class=&#34;col-sm-12&#34;&gt;
											&lt;img src=&#34;../funImage/footer.jpg&#34; width=&#34;100%&#34;/&gt;
											&lt;/div&gt;
			
			&lt;/div&gt;
		 &lt;/div&gt;
	 &lt;!--网站底部--&gt;
										
				&lt;div clas=&#34;row&#34;&gt;
					&lt;div class=&#34;dol-sm-12 text-center&#34;&gt;&lt;!--当前标签下所有元素居中显示--&gt;
						&lt;ul class=&#34;list-inline&#34;&gt;
						&lt;li&gt;&lt;a href=&#34;https://blog.csdn.net/m0_53157173&#34;&gt;关于我们&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a href=&#34;https://blog.csdn.net/m0_53157173&#34;&gt;联系我们&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a href=&#34;https://blog.csdn.net/m0_53157173&#34;&gt;招贤纳士&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a href=&#34;https://blog.csdn.net/m0_53157173&#34;&gt;法律声明&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a href=&#34;https://blog.csdn.net/m0_53157173&#34;&gt;友情链接&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a href=&#34;https://blog.csdn.net/m0_53157173&#34;&gt;支付方式&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a href=&#34;https://blog.csdn.net/m0_53157173&#34;&gt;配送方式&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a href=&#34;https://blog.csdn.net/m0_53157173&#34;&gt;服务声明&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a href=&#34;https://blog.csdn.net/m0_53157173&#34;&gt;广告声明&lt;/a&gt;&lt;/li&gt;
							&lt;/ul&gt;
						&lt;/div&gt;
					&lt;/div&gt;		
			
			
			&lt;div clas=&#34;row&#34;&gt;
				&lt;div class=&#34;dol-sm-12 text-center&#34;&gt;&lt;!--当前标签下所有元素居中显示--&gt;
                   Copyright @ 2005-2020 大忽悠 版权所有
					&lt;/div&gt;
				&lt;/div&gt;			 
					 
	 &lt;/div&gt;

  &lt;script src=&#34;../js/jquery-1.11.3.min.js&#34;&gt;&lt;/script&gt;
  &lt;script src=&#34;../js/bootstrap.min.js&#34;&gt;&lt;/script&gt;



</body>

</html>

效果演示:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

#网页制作#源码