文章目录

• 作品介绍
• 一、代码演示
• • 1.登录、注册，获取当前时间
  • 2.轮播图
  • 3.家乡简介
  • 4.热门景点
  • 5.特色美食
  • 6.页尾
• 二、效果图
• 总结

作品介绍

HTML页面主要由：登录、注册跳转页面，轮播图，家乡简介，热门景点，特色美食等组成。通过Div+CSS、鼠标滑过特效、获取当前时间，跳转页面、基本所需的知识点全覆盖。

提示：以下是本篇文章正文内容，下面案例可供参考

一、代码演示

1.登录、注册，获取当前时间

HTML部分：这块分为两部分，上下两个大盒子，第一块包含登录、注册，获取时间。下面主要由LOGO、导航栏组成。通过a标签超链接组成，鼠标划过会有颜色变化，导航栏用无序列表ul更方便简洁。点击登录、注册分别跳转到另一页面。

      
      			
 				
 					登录     					|                     注册      				
 				
 					
        				
 			
 			
 				
 					    				
 				
   					
 						首页 					
 					
 						景区简介 					
 					
 						特色美食 					
 					
 						在线旅游 					
 					
 						旅游好处 					
 					
 						预约服务 					
 				
 			
 

注册：

      
 			
 				 				
 					
 						
用户注册
 						
注册后享受更多服务
 					
 					
 						               
用户名
                              
              						               
邮箱
                              
              						               
密码
                              
              						               
重复密码
                              
              						注 册 					
 					 				
 			
 		
 

登录：

       
 			
 				 				
 					
 						
欢迎回来
 						
请先登录
 					
 					
 						               
用户名
                              
              						               
密码
                              
              						登 录 					
 					 				
 			
 		
 

CSS部分：通过用全局选择器，清除外、内边距的样式， list-style: none;给列表清除样式。设置背景颜色、字体大小、颜色、宽高等一系列样式。

*{           /*全局选择器*/ 	margin:0;  /*外边距*/ 	padding: 0; /*内边距*/ } li{       list-style: none;     /*清除列表样式*/ } .box{ 	margin:auto;         /*页面居中*/ 	width:1000px; 	height:1650px; } .box a:hover{     text-decoration: none;     /*去掉a标签下划线*/     color:paleturquoise; } .box-b{ 	height: 35px; 	background: #6e9a3b;   /*背景颜色*/ 	 } .box-b-d{ 	font-size:15px;     /*字体大小*/ 	padding-top:8px;    /*内边距距离上为8*/ 	margin-left:10px; }  .box-b-d a{ 	color: #fff;  /*文字颜色*/ } .box-b-d i{ 	color:#fff; } .box-b-s{ 	color:#fff; 	font-size:15px; 	float:right;         /*右浮动*/ 	margin-top: -19px; 	margin-right:10px; } .box-k{ 	height:72px; 	background: #fff; } .box-k-t img{ 	height:50px; 	margin-left:200px; 	display: block;     /*显示图片*/ }  .box-k-b{ 	margin-top:-25px; 	margin-left:350px; } .box-k-b li{ 	float:left;     /*左浮动*/ 	margin-right:40px; 	 } .box-k-b li a{ 	color:#6e9a3b; 	font-size:13px; } 

JS部分：
登录、注册——首先获取元素，分别添加单击事件，Window.open跳转到新页面

       var oA = document.getElementById('dengl');    /*获取登录、注册元素,单击跳转到另一个页面*/ 	   oA.onclick = function() { 	   	  window.open("register.html","");            	   } 	   var oZ = document.getElementById('zc'); 	   oZ.onclick = function() { 	   	  window.open("register.html",""); 	   } 

注册页面——获取注册按钮，添加单击事件，判断两次密码输入是否一致，将userInfo转为字符串，永久的存储到页面。注册成功，以1000毫秒跳转到登录页面。

window.onload = function() {     		var oBtn = document.getElementById('btn');     		oBtn.onclick = function() {     			var userName = document.getElementById('userName').value;     			var email = document.getElementById('email').value;     			var passwor = document.getElementById('pwd').value;     			var repasswor = document.getElementById('repwd').value;     			if (passwor != repasswor) {     				alert('两次密码不一致！');     				return false;     			}     			var userInfo = {     				username:userName,     				passwor: passwor,     				email:email,     			};     			localStorage.setItem('userInfo',JSON.stringify(userInfo));     			alert('注册成功，跳转到登录页！');     			setTimeout('location.href = "login.html"', 1000);  //location定位  (注册成功后1秒跳转到登录项)     		};     	} 

登录页面——获取登录按钮，添加单击事件，if判断存储的用户密码是否和当前输入的一致，如果错误，则return false下面代码不执行。登录成功直接跳转到主页面。

window.onload = function() {     		var oLogin = document.getElementById('loginButton');     		oLogin.onclick = function() {     			var userName = document.getElementById('userName').value;     			var passwor = document.getElementById('pwd').value;     			var userInfo = JSON.parse(localStorage.getItem('userInfo'));  //将userInfo对象取出来 长期存到本地     			if (userName != userInfo.username && passwor != userInfo.Passwor ) {     				alert('你输入的用户名和密码有误！');     				return false;     			}     			var session = sessionStorage.getItem('userInfo');     			if (session) {     				alert(userInfo.username + '已登录');     			} else {     				sessionStorage.getItem('userInfo');     				alert('登录成功');     				location.href = '网页.html';     			}     		}     	} 

2.轮播图

HTML部分：轮播图主要由左、右箭头，五个顺序按钮，五张图片组成。

           
          				
 					<       				
 				
          					> 				
 				     				 				 				 				 				
            					
 					
 					
 					
 					
 				
 			
 

CSS部分：

img{ 	display: none;   /*隐藏图片*/ } #box-t{ 	  position: relative;   /*设置相对定位*/ } #box-t img{ 	width:1000px; 	height:400px; } #left{     font-size:45px;     color:#fff;     position: absolute;   /*设置绝对定位*/     top:45%;     cursor: pointer;      /*设置鼠标为小手状态*/ } #right{     font-size:45px;     color:#fff;     position: absolute;     top:45%;     right:0;     cursor: pointer; } .tup{ 	display: block; } .box-t-y{ 	position: absolute;  /*给按钮添加绝对定位*/     right:45%;     bottom:0;     /*下边距为0*/ } .box-t-y p{     width:20px;     height:20px;     display: inline-block;  /*不独占一行的块级元素*/     opacity: 0.7;           /*设置透明度*/     border:1px solid #fff;  /*边框为1像素白色实线*/     border-radius:10px;     /*实现椭圆效果*/     margin-right:10px;     cursor: pointer; } .box-y-x{ 	background: #6e9a3b; } 

JS部分：

      function lunb() { 	   	 for (var i = 0; i < aDp.length; i++) { 	   	  	 	 aDp[i].className = ""; 	   	  	 	 aImg[i].className = ""; 	   	  	 } 	   	  	  aDp[now].className = "box-y-x"; 	   	  	  aImg[now].className ="tup"; 	   } 	   var aBoxt = document.getElementById('box-t');     //获取元素 	   var aImg = aBoxt.getElementsByTagName('img'); 	   var aDp = aBoxt.getElementsByTagName('p'); 	   var aLeft = document.getElementById('left'); 	   var aRight = document.getElementById('right'); 	   var now = 0; 	   var dings = 'null'; 	   for (var i = 0; i < aDp.length; i++) {       //通过for循环，给按钮添加事件 	   	  aDp[i].index = i; 	   	  aDp[i].onmousemove = function () { 	   	  	 now = this.index; 	   	  	 lunb(); 	   	  } 	   } 	   aLeft.onclick = function() {        //左箭头 	   	  now--; 	   	  if (now < 0) { 	   	  	 now = 4; 	   	  } 	   	  lunb(); 	   } 	   aRight.onclick = function() {      //右箭头 	   	  now++; 	   	  if (now == 5) { 	   	  	 now = 0; 	   	  } 	   	  lunb(); 	   } 	   dings = setInterval( function () {     //添加定时器 	   	  now++; 	   	  if (now == 5) { 	   	  	 now = 0; 	   	  } 	   	  lunb(); 	   },1500); 	   aBoxt.onmouseout = function() {     //鼠标移出，触发开启定时器事件 	   	 dings = setInterval( function () { 	   	  now++; 	   	  if (now == 5) { 	   	  	 now = 0; 	   	  } 	   	   lunb(); 	     },1500); 	   } 

3.家乡简介

HTML代码：

           
      				
 					
－－邯郸简介－－
 				
 				
 					 					
 						
 							
美丽邯郸
 						
 						
 							
“邯郸”之名，最早出现于古本《竹书纪年》。邯郸地名之由来，现一般以《汉书·地理志》中三国时魏国人张晏的注释为源：“邯郸山，在东城下，单，尽也，城廓从邑，故加邑云。”意思是说，邯郸的地名源于邯郸山，在邯郸的东城下，有一座山，名叫邯山，单，是山脉的尽头，邯山至此而尽，因此得名邯单，因为城廓从邑，故单旁加邑( 阝)而成为邯郸。邯郸 								二字作为地名，三千年沿用不改，是中国地名文化的一个特例。
 						
 						
 							
显示更多
 						
 					
 				
 			
  

CSS代码：

.box-h{ 	height:310px;     display: block; } .box-h-j p{ 	font-size:26px; 	font-family: "华文隶书";  /*设置字体样式*/ 	color:#6e9a3b; 	text-align: center;    /*文字居中*/ 	padding-top:30px; } .box-h-x{ 	width:600px; 	height:200px; 	background: #fff; 	margin-left:180px; 	box-shadow: 6px 15px 30px #5E5E5E; } .box-h-x img{ 	display: block; 	width:160px; } .box-h-x-y{ 	width:440px; 	height:200px; 	float:right; 	margin-top:-200px; } .y-nei{ 	width:70px; 	height:30px; 	background: #6e9a3b; 	opacity: 0.5; 	margin-top:20px; } .y-nei p{ 	font-size:13px; 	color:#fff; 	text-align: center; 	line-height: 2; 	 } .y-nei-w p{ 	font-size:12px; 	margin-top:10px; 	color:#000000; 	margin-left:10px; } .y-nei-x{ 	width:70px; 	height:25px; 	margin-left:370px; 	margin-top:-15px; } 

4.热门景点

HTML部分：

           
      				
   					
－－热门景点－－
 				
 				
  					
 						 						赤水湾古镇 						
赤水湾古镇，坐落在太行山东麓、涉县中原村清河畔，太行山深处的“不夜城”。
 					
 					
 						 						娲皇宫 						
娲皇宫位于邢台市西南约45公里处，主峰海拔1089米，孤峰接天，高耸入云，有“雷 							鸣阳光下，雨起半山间”之说。
 					
 					
 						 						京娘湖 						
京娘湖位于河北省邯郸市武安市西北部山区的口上村北，亦称 							口上水库，有“太行三峡”之称。
 					
 				
 			
 

CSS部分：

.box-j{ 	height:350px; } .box-j-x{ 	width:750px; 	height:245px; 	margin: auto; } .box-x-1{ 	width: 240px; 	height:245px; 	background:#f0f3f4; 	float:left; 	margin-left:10px; } .box-x-1 img{ 	display: block; 	width: 240px; 	height:160px; } .box-x-1 span{ 	font-size:20px; 	font-family: "宋体"; 	font-weight: bold;     /*文字加粗*/ 	margin-top:5px; 	 } .box-x-1 p{ 	font-size:13px; 	 } .box-x-2{ 	background: #cdddb9; } .wenz{ 	font-size:20px; 	color:#fff; 	font-family: "宋体"; 	font-weight: bold; 	margin-top:5px; } .wenz2{ 	font-size:13px; 	color:#fff; } 

5.特色美食

HTML部分：

          
        				
 					
－－特色美食－－
 				
 				
 					
 						 						
 							磁县胖妮熏鸡 							
磁县胖妮熏鸡起源于磁县磁洲滏阳街焦家，焦明老人始创制，已有100多年的历史，至今已是五代传人。水分少、皮缩裂、肉外露、香味浓、肉质嫩，素称存放一年不变质。由此，胖妮熏鸡声誉大振，堪称磁洲一绝。
 						
 					
 					
 						 						
 							老槐树烧饼 							
津津乐老槐树烧饼是邯郸市饮食总公司经营了半个世纪的风味食品，因经营场地旁有一棵老槐树而得其名。以精粉、花椒盐、小炉烘烤，火候均匀。接近烤熟前。再用薄刀片绕饼盖拉一圈口，色泽焦黄，酥脆味美。
 						
 					
 					
 						 						
 							永年驴肉香肠 							
永年县驴肉香肠源于清朝末年，已有近百年的历史，属传统小吃流传至今，是河北省永年县的地方风味特，驴肉以其质高味美被尊为上乘佳品。以永年“马连升、东之驴、饭店大楼”三个首，深受消费者的欢迎。  
 						
 					
 				
 			
 

CSS部分：

.box-m{ 	height:410px; } .box-m-x{ 	width:630px; 	height:280px; 	margin:auto; } .box-m-1{ 	margin-left:15px; 	float:left; 	width:195px; 	height:280px; } .box-m-1 img{ 	display: block; 	width:195px; 	height:127px; } .box-m-wz{	 	margin-top:5px; 	text-align: center; } .box-m-wz span{ 	font-size:18px; } .box-m-wz p{ 	margin-top:8px; 	font-size:6px; } 

6.页尾

HTML部分：点击返回顶部文字，直接到页面开头。

            
                				
 					 					
          					   美丽邯郸 					   
客服热线：0312 8675555
 				   
 				
 				
             					        					返回
顶部      				
 			
 

CSS部分：

.box-w{ 	height:155px; 	background: #6e9a3b; } .box-w img{ 	display: block; } .box-w-1{ 	margin-left:220px; 	padding-top:40px; } .box-w-1 img{ 	width:100px; 	height: 40px; } .w-x{ 	margin-top: 5px; } .w-x span{ 	font-size:16px; 	font-family: "幼圆"; 	color:#fff; } .w-x p{ 	color:#fff; 	font-size:12px; } .w-z img{ 	margin-top:-90px; 	margin-right:120px; 	float: right; } .w-z a{ 	color: #fff; 	margin-top:-70px; 	margin-right:80px; 	float: right; } a{ 	cursor: pointer; } 

二、效果图

显示登录、注册，当前时间，轮播图等页面。

注册页面

登录页面

家乡简介

热门景点

特色美食

页尾

整体页面

总结

整体页面，大部分都是用div来写，每一块都用一个大div来包住，体现代码的规范，家乡简介，热门景点，特色美食，这几块都很简单，写成功一部分之后，下面的代码直接复制。轮播图这块也很简单，首先，你得明白按钮跟图片的关系，绝对定位和相对定位，是需要大家熟练掌握的，在以后写代码的过程中，会经常使用。最底部，返回顶部按钮，是通过用a标签来实现效果。
JavaScript 与 HTML 、CSS 共同构成了我们所看到的网页。
1.HTML 用来定义网页的内容，例如标题、正文、图像等；
2.CSS 用来控制网页的外观，例如颜色、字体、背景等；
3.JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。