菜单 搜索
首页 前端知识 HTML CSS JS网页设计

HTML CSS JS网页设计

2024-01-24 15:01:15 前端知识 前端哥 303 574 我要收藏

文章目录

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

作品介绍

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

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

一、代码演示

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

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

      <div class="box">     <!--一个大盒子-->
			<div class="box-b">
				<div class="box-b-d" id="deng">
					<a id="dengl" href="javascript:;">登录</a>    <!--登录-->
					<i>|</i>
                    <a id="zc" href="javascript:;">注册</a>     <!--注册-->
				</div>
				<div class="box-b-s">
					<p id="shij"></p>       <!--获取当前时间-->
				</div>
			</div>
			<div class="box-k">
				<div class='box-k-t'>
					<img src="img/b.jpg"/>   <!--logo-->
				</div>
				<ul class="box-k-b">  <!--导航栏-->
					<li>
						<a>首页</a>
					</li>
					<li>
						<a>景区简介</a>
					</li>
					<li>
						<a>特色美食</a>
					</li>
					<li>
						<a>在线旅游</a>
					</li>
					<li>
						<a>旅游好处</a>
					</li>
					<li>
						<a>预约服务</a>
					</li>
				</ul>
			</div>
复制

注册：

      <div id="formContainer" class="dwo">
			<div class="formRight">
				<!-- Register form -->
				<form id="register" class="otherForm">
					<header>
						<h1>用户注册</h1>
						<p>注册后享受更多服务</p>
					</header>
					<section>
						<label>
              <p>用户名</p>
              <input type="text" id="userName" />
              <div class="border"></div>
            </label>
						<label>
              <p>邮箱</p>
              <input type="email" id="email" />
              <div class="border"></div>
            </label>
						<label>
              <p>密码</p>
              <input type="password" id="pwd" />
              <div class="border"></div>
            </label>
						<label>
              <p>重复密码</p>
              <input type="password" id="repwd" />
              <div class="border"></div>
            </label>
						<button id="btn" type="button">注 册</button>
					</section>
					<footer>
						<a href="login.html">返 回</a>
					</footer>
				</form>
			</div>
		</div>
复制

登录：

       <div id="formContainer" class="dwo">
			<div class="formRight">
				<!-- Login form -->
				<form id="login">
					<header>
						<h1>欢迎回来</h1>
						<p>请先登录</p>
					</header>
					<section>
						<label>
              <p>用户名</p>
              <input type="text" id="userName" />
              <div class="border"></div>
            </label>
						<label>
              <p>密码</p>
              <input type="password" id="pwd" />
              <div class="border"></div>
            </label>
						<button type="button" id="loginButton">登 录</button>
					</section>
					<footer>
						<a href="#">忘记密码</a>
						<a href="register.html" id="registerBtn">注册新用户</a>
					</footer>
				</form>
			</div>
		</div>
复制

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部分：轮播图主要由左、右箭头，五个顺序按钮，五张图片组成。

           <div id="box-t">         <!--轮播图-->
				<div id="left">
					<span><</span>      <!--左箭头-->
				</div>
				<div id="right">         <!--右箭头-->
					<span>></span>
				</div>
				<img class="tup" src="img/3.jpg"/>    <!--获取图片-->
				<img src="img/1.jpg"/>
				<img src="img/2.jpg"/>
				<img src="img/4.jpg"/>
				<img src="img/5.jpg"/>
				<div class="box-t-y">           <!--按钮-->
					<p class="box-y-x"></p>
					<p></p>
					<p></p>
					<p></p>
					<p></p>
				</div>
			</div>
复制

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代码：

           <div class="box-h">     <!--家乡简介部分-->
				<div class="box-h-j">
					<p>－－邯郸简介－－</p>
				</div>
				<div class="box-h-x">
					<img src="img/h2.jpg">
					<div class="box-h-x-y">
						<div class="y-nei">
							<p>美丽邯郸</p>
						</div>
						<div class="y-nei-w">
							<p>“邯郸”之名，最早出现于古本《竹书纪年》。邯郸地名之由来，现一般以《汉书·地理志》中三国时魏国人张晏的注释为源：“邯郸山，在东城下，单，尽也，城廓从邑，故加邑云。”意思是说，邯郸的地名源于邯郸山，在邯郸的东城下，有一座山，名叫邯山，单，是山脉的尽头，邯山至此而尽，因此得名邯单，因为城廓从邑，故单旁加邑( 阝)而成为邯郸。邯郸
								二字作为地名，三千年沿用不改，是中国地名文化的一个特例。</p>
						</div>
						<div class="y-nei y-nei-x">
							<p>显示更多</p>
						</div>
					</div>
				</div>
			</div> 
复制

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部分：

           <div class="box-j">     <!--热门景点部分-->
				<div class="box-h-j">  
					<p>－－热门景点－－</p>
				</div>
				<ul class="box-j-x"> 
					<li class="box-x-1">
						<img src="img/j2.jpg">
						<span>赤水湾古镇</span>
						<p>赤水湾古镇，坐落在太行山东麓、涉县中原村清河畔，太行山深处的“不夜城”。</p>
					</li>
					<li class="box-x-1 box-x-2">
						<img src="img/j1.jpg">
						<span class="wenz">娲皇宫</span>
						<p class="wenz2">娲皇宫位于邢台市西南约45公里处，主峰海拔1089米，孤峰接天，高耸入云，有“雷
							鸣阳光下，雨起半山间”之说。</p>
					</li>
					<li class="box-x-1">
						<img src="img/j3.jpg">
						<span>京娘湖</span>
						<p>京娘湖位于河北省邯郸市武安市西北部山区的口上村北，亦称
							口上水库，有“太行三峡”之称。</p>
					</li>
				</ul>
			</div>
复制

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部分：

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

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部分：点击返回顶部文字，直接到页面开头。

            <div class="box-w">               <!--页尾-->
				<div class="box-w-1">
					<img src="img/b.jpg"/>
					<div class="w-x">         <!--尾部文字-->
					   <span>美丽邯郸</span>
					   <p>客服热线：0312 8675555</p>
				   </div>
				</div>
				<div class="w-z">            
					<img src="img/二.jpg" />       <!--二维码图片-->
					<a href="">返回<br>顶部</a>     <!--点击直接返回顶部-->
				</div>
			</div>
复制

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 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/113.html
标签
htmlcssjavascript
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

【web开发】4、JavaScript与jQuery

2024-02-01 12:02:58

jQuery AJAX请求的统一封装

2024-02-01 12:02:53

jQuery知识学习

2024-02-01 12:02:53

JQuery——动画效果

2024-02-01 12:02:52

jQuery复习

2024-02-01 12:02:51

使用Nodejs爬取网页某个数据并把爬到的数据写入excel (服务端部分)

2024-02-01 12:02:50

事件在jQuery中如何使用，JS中window.onload在jquery中的写法

2024-02-01 12:02:49

jQuery时间控件——日期选择器(Datepicker)汉化版使用详解

2024-02-01 12:02:49

jQuery表单提交的方法有多种方式

2024-02-01 12:02:49

jquery控制easyui中combobox、textbox显示隐藏

2024-02-01 12:02:49

广告位招租：QQ85750956
大家推荐的文章
1

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
2

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
3

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
4

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
5

导航栏以及二级菜单栏（下拉列表）的制作

2024-01-25 11:01:03994
6

Get请求报错404出现原因及解决办法

2024-01-25 10:01:26993
7

vue3 vite pinia 配置动态路由、解决刷新页面路由消失问题

2024-01-27 01:01:35992
8

jQuery实现AJAX和AJAX跨域问题

2024-01-28 12:01:54988
9

echarts - 自定义形状 - 实现立体柱状图

2024-01-30 10:01:46987
10

前端大屏适配几种方案

2024-01-29 13:01:44987

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！