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

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

❤ 【作者主页——🔥获取更多优质源码】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰

一、网页介绍📖
一、网页效果🌌
二、代码展示😈
- 1.HTML结构代码 🧱
- 2.CSS样式代码 🏠
三、个人总结😊
四、更多干货🚀

一、网页介绍📖

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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>云南民族文化网</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>


<!-- Copyright � 2005. Spidersoft Ltd -->
<style>
A.applink:hover {border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:none}
A.applink       {border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none}
A.info          {color:#2F5BFF;background:transparent;text-decoration:none}
A.info:hover    {color:green;background:transparent;text-decoration:underline}
</style>
<!-- /Copyright � 2005. Spidersoft Ltd -->
<div class="page">
<div class="banner"><img src="images/banner.jpg" /></div>

<div class="daohang"><p><a href="index.html">首页</a></p>
<p><a href="jieshao.html">云南介绍</a></p>
<p><a href="wenhua.html">云南民族文化</a></p>
<p><a href="fengqing.html">民族风情</a></p>
<p><a href="xiaogushi.html">民族小故事</a></p>
<p><a href="tupian.html">民族图片</a></p>
<p><a href="liuyan.html">客户留言</a></p><p><a href="lianxi.html">地理位置</a></p></div>

<div class="content">

<div class="zuo">
<img src="images/zuo1.jpg" />
<div class="fangshi">
  <h1>云南的民族</h1>
  <p> 　　云南是我国少数民族最多的省份，根据1990年全国第四次人口普查分布的数据，全国56个民族中，云南就有52个，其中人口在5000人以上的民族有26个，除汉族外，少数民族有25个，各民族分布呈大杂居、小聚居的特点。其中云南的世居民族有15个：白族、哈尼族、傣族、僳僳族、拉祜族、佤族、纳西族、景颇族、布朗族、普米族、阿昌族、怒族、基诺族、德昂族、独龙族。全省总人口约4192万人(1999年)，其中少数民族人口1300多万人，占全省总人口的1/3。在25个少数民族中人口最多的是彝族，有400多万;人口最少的是独龙族，仅5500人。
    <br />
  </p>
</div>
       
</div>


<div class="you">
<div class="jieshao">
<h1>云南介绍</h1>
<p><img src="images/jieshao.jpg" width="218" height="147" style="float:left; margin-right:19px;" />　　云南是一个资源异常丰富的省份，素有“动物王国”、“植物王国”、“有色金属王国”、“民族文化聚宝盆”等诸多美誉。如果我们从经济社会发展的现代化趋势来看，文化资源则是云南最重要、最可宝贵的资源。可以说，云南是一个文化资源富矿，而且这些丰富而独特的资源正适应和吻合了现代市场经济和知识经济的特征、要求、方向及趋势,蕴藏着极高的经济价值，是我省塑造巨大的文化力和全新的形象力的无穷宝藏和财富。</p>
<p>在文化经济日益一体化的今天，我们必须用经济的眼光来审视和梳理我们的文化资源，要站在产业发展的角度来认识历史和自然赋予我们的独特优势。云南文化资源的富足和厚重，我认为至少体现在以下3个方面：<br />
</p>
</div>

<div class="jieshao">
<h1>云南民族文化</h1>
<p>　　云南，雪域高原与热带雨林共存，高山深谷和阔坝平湖相间，集结了全国二分之一以上的动植物种类，见证着26个民族生存发展的历史。分属于古代氐羌族系、百越族系、百濮族系和苗瑶族系后裔的25个少数民族与地处西南边陲的汉族人民世代交好，呈现大杂居、小聚居的分布格局，使得这片红土地上骄傲持久地绽放着绚丽多姿的民族文化之花，而云南所特有的15个民族更为这里“民族文化王国”地位的确立奠定了不容置疑的基础。 这是一块被漫长的地质运动反复雕琢过的大地。南北990公里跨径的域内，海拔急速从西北隅梅里雪山卡瓦博格峰巅的6740米降至南部河口县境的76米，地势也随之自西北向东南呈阶梯状逐层降低。方圆39．4万平方公里的土地上，发育于滇西北的横断、乌蒙等巨大山系引领着逶迤境内的大小山峦，雄踞去省域94%的国土面积；蜿蜒奔流于山原的伊洛瓦底江、怒江、澜沧江、金沙江、元江、南盘江六大水系，或以劈山夺路之势咆哮疾行，塑成深邃险峻的高山峡谷，或作丽人徐趋之状缓缓流淌，点化旖旎动人的河滨风光。<br />
</p>
</div>

<div class="jieshaoB">
  <h1>云南民族文化展示</h1>
  <p><marquee><img src="images/chanpin1.jpg" /><img src="images/chanpin2.jpg" /><img src="images/chanpin3.jpg" /><img src="images/chanpin4.jpg" /><img src="images/chanpin5.jpg" /><img src="images/chanpin6.jpg" /><img src="images/chanpin7.jpg" /><img src="images/chanpin8.jpg" /></marquee></p>
  </div>

</div>


<div class="clearit"></div>

<div class="foot"><p>版权所有 禁止盗版  <br />云南欢迎您</p></div>


</div>




</div>
</body>
</html>

2.CSS样式代码 🏠


@charset "utf-8";
/* CSS Document */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
*{margin:0;padding:0;border:0;}
body {	font-family: "宋体";font-size: 12px;color:#000000;line-height: 20px;text-align:left;background-color:#EE7600 ;}
td,th {font-family: "宋体";font-size: 12px;color: #000000;}
a {color: #000000;}
A:link {TEXT-DECORATION: none;}
A:visited {TEXT-DECORATION: none;}
A:hover {TEXT-DECORATION: underline;}
ul,li{list-style-type:none;}

.clearit{clear:both;}
.page{width:1003px; margin:0 auto;}


.daohang{width:1003px; height:42px; margin:0 auto; overflow:hidden; background:url(../images/daohang.jpg) repeat-x;}
.daohang p{width:120px; line-height:42px; display:block; float:left; text-align:center; font-size:14px; font-weight:bold; }
.daohang p a{color:#345479;}

.content{width:1003px; margin:0 auto; background:#c2cdda; padding:20px 0 0;}

.zuo{width:220px; float:left; margin-left:10px; display:inline; }
.fangshi{width:220px; border:1px solid #ffffff; margin-top:10px;background:#345479; }
.fangshi h1{font-size:14px; padding:0 10px; font-weight:bold; line-height:26px; line-height:26px; border-bottom:1px solid #ffffff; color:#ffffff;}
.fangshi p{text-align:left; padding:0 10px; line-height:24px;color:#ffffff;}

.you{width:750px; float:left; margin-left:10px; display:inline;}
.jieshao{width:748px;border:1px solid #ffffff; background:#345479; margin-bottom:10px; }
.jieshao h1{font-size:14px; padding:0 10px; font-weight:bold; line-height:28px; line-height:28px; background:#345479;border-bottom:1px solid #ffffff; color:#ffffff;}
.jieshao p{text-align:left; padding:10px; line-height:24px;color:#ffffff;}

.jieshaoB{width:748px;border:1px solid #ffffff; background:#345479; margin-bottom:10px; }
.jieshaoB h1{font-size:14px; padding:0 10px; font-weight:bold; line-height:28px; line-height:28px; background:#345479;border-bottom:1px solid #ffffff; color:#ffffff;}
.jieshaoB p{padding:10px 0;}
.jieshaoB img{width:200px; margin-right:10px; padding:1px; border:1px solid #FFFF00; background:#FFFFFF;}
.foot{width:1003px; margin:0 auto; padding-top:50px; background:url(../images/foot.jpg) repeat-x top; padding-bottom:50px;}
.foot p{text-align:center; line-height:30px; color:#345479;}


.you h2{font-size:14px; font-weight:bold; text-align:center; line-height:30px; border-bottom:1px solid #FFFF00; color:#000000;}
.neirong{padding:20px; line-height:24px; color:#000000;}

.zhanshi{padding-bottom:20px; overflow:hidden;}
.zhanshi img{width:160px; display:block; float:left; margin-left:10px; display:inline;}

.messageB{width:600px; padding:10px 0; overflow:hidden; text-align:left; line-height:24px;}
.messageB ul li{line-height:24px; margin-top:16px; list-style:none; padding:0;border:0;}
.messageB ul li span{vertical-align:middle; padding-right:12px;}
.messageB ul li .message_in{width:300px; height:22px; border:1px solid #999999;vertical-align:middle;line-height:22px; padding:0;}
.messageB ul li .message_te{width:500px; height:90px; border:1px solid #999999;vertical-align:middle;line-height:18px; padding:0;}
.messageB ul li .message_btn{width:64px; height:20px;  padding:0; line-height:20px; background:url(../images/btn.gif) no-repeat; color:#FFFFFF; font-weight:bold; cursor:hand;}