HTML+CSS+JS家乡主题网页设计学生网页设计作品 dreamweaver作业静态HTML网页设计模板旅游景点网页作业制作

本文链接：https://blog.csdn.net/wx___BJ050106/article/details/126175888

这篇博客分享了一位学生使用HTML、CSS和JavaScript设计的家乡旅游景点网页作业。内容包括网页介绍、网页效果展示、代码细节以及个人学习总结。网页设计运用了DIV盒子布局、CSS样式，如过渡效果、浮动和表格，并提供了HTML和CSS代码示例。博主还分享了前端开发的学习资源和更多相关干货。

摘要由CSDN通过智能技术生成

家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述

二、代码展示😈

1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~

<!DOCTYPE HTML>
<html>
<head>
<title>首页-名城衢州</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>       
<script type="text/javascript">
	jQuery(document).ready(function($) {
     
		$(".scroll").click(function(event){
     		
			event.preventDefault();
			$('html,body').animate({
     scrollTop:$(this.hash).offset().top},1200);
		});
	});

	$(document).ready(function() {
     
	$().UItoTop({
      easingType: 'easeOutQuart' });
	});
</script>

</head>
<body>
<div class="header">
<div class="container">
	<div class="logo">
		<div class="container">
			<a href="index.html"><img src="images/logo.png" class="img-responsive" alt=""></a>
		</div>
	</div>
	<div class="top-nav">
		<span class="menu"><img src="images/menu.png" alt=""></span>
		<ul class="nav1">
			<li class="hvr-sweep-to-bottom active"><a href="index.html">首页</a></li>
			<li class="hvr-sweep-to-bottom"><a href="travel.html">旅游</a></li>
			<li class="hvr-sweep-to-bottom"><a href="photos.html">美景</a></li>
			<li class="hvr-sweep-to-bottom"><a href="interact.html">互动</a></li>
		<div class="clearfix"> </div>
		</ul>
		<!-- script-for-menu -->
			 <script>
			   $( "span.menu" ).click(function() {
     
				 $( "ul.nav1" )