【免费】期末作业_我的家乡-湛江——html和css.zip资源-CSDN文库

共75个文件

jpg：28个

html：11个

png：11个

需积分: 0 67 浏览量更新于2022-03-09 收藏 135.29MB ZIP 举报

在本项目"期末作业_我的家乡-湛江——html和css.zip"中，我们可以看到一个以HTML和CSS技术构建的网页设计作品，旨在介绍作者的家乡——湛江。这个压缩包包含了项目的所有源代码文件，让我们来深入探讨HTML和CSS在前端开发中的应用以及它们如何帮助创建这样一个网页。 HTML（HyperText Markup Language）是网页内容的基础结构语言，用于定义网页的各个元素，如标题、段落、图像、链接等。在这个项目中，HTML文件可能包含了关于湛江地理、历史、文化、风景名胜区等各种信息的标记。例如，`<h1>`标签用于创建主标题，`<p>`标签用于添加段落文本，`<img>`标签则用于插入图片，而`<a>`标签用于设置超链接，使用户可以跳转到更多相关资源。 CSS（Cascading Style Sheets）则是用来控制网页样式和布局的关键技术。通过CSS，开发者可以实现色彩、字体、间距、排列等视觉效果的定制。在这个作业中，CSS可能被用来设置背景颜色、字体样式、布局网格、按钮样式、导航栏设计等。例如，使用`body`选择器可以改变整个页面的背景色，`.header`类可以定义页眉的样式，`#main-content` ID可以定位主要内容区域的样式，而`.button`类则可以定制按钮的外观和交互效果。在HTML和CSS的结合使用下，网页不仅具有了丰富的信息内容，还拥有吸引人的视觉呈现。CSS的盒模型（Box Model）概念在此也非常重要，它包括内容(content)、内边距(padding)、边框(border)和外边距(margin)，这些属性共同决定了元素在网页上的空间占用。同时，浮动(float)和定位(position)技术则可以帮助实现复杂的布局设计，如让某些元素在屏幕右侧固定显示或者在特定位置对齐。此外，响应式设计(responsive design)可能是此项目的一个关键点。考虑到不同设备的屏幕尺寸和分辨率，开发者可能会使用媒体查询(media queries)来确保网页在手机、平板和桌面电脑上都能正常显示。例如，通过设置`@media screen and (max-width: 768px)`，可以为小于768像素宽度的设备定义特殊的样式规则。这个"期末作业_我的家乡-湛江——html和css.zip"项目涵盖了HTML的基本元素使用、CSS的样式控制、布局设计以及响应式网页开发等前端开发核心知识。通过这个项目，学生可以锻炼其在实际场景中应用理论知识的能力，同时展示出对家乡文化的热爱和创新思维。

收起资源包目录

期末作业_我的家乡-湛江——html和css.zip （75个子文件）

期末作业_我的家乡-湛江——html和css

my_hometown

css

animate.min.css 816B

styles.css 9KB

information.html 4KB

index-population.html 5KB

food.html 5KB

index-administration.html 4KB

scenery.html 10KB

设计图

scenery.jpg 4.74MB

food.jpg 5.34MB

custom.jpg 4.97MB

information.jpg 4.77MB

index.jpg 5.07MB

sataionmaster.jpg 4.84MB

index-history.html 6KB

index-Geography.html 4KB

img

jing1.jpg 210KB

jing.jpg 104KB

meishi2.png 342KB

jing9.jpg 264KB

zi.jpg 81KB

2.jpeg 78KB

1.jpeg 71KB

03.png 1.55MB

fengjing4.png 391KB

01.jpg 42KB

8.jpeg 23KB

meishi3.png 327KB

xiongmao.jpg 20KB

jing3.jpg 240KB

lishi.mp4 34.48MB

8.jpg 70KB

jing7.jpg 168KB

3.png 619KB

5.jpeg 63KB

jing5.jpg 163KB

jing10.jpg 351KB

jiaoyu.mp4 1.6MB

2.jpg 20KB

11.jpeg 31KB

diliweizhi.mp4 22.22MB

fengjing3.png 380KB

zhanjiang.mp4 16.24MB

fengjing5.png 447KB

pengyuyan.jpg 36KB

jing6c.jpg 207KB

3.jfif 33KB

3.jpeg 24KB

1.jpg 39KB

10.jpeg 35KB

wuyanzu.jpg 19KB

4.jpeg 12KB

xj.jpg 21KB

food1.jpg 55KB

9.jpeg 29KB

jing4.jpg 177KB

1.webp 30KB

xingzhengquyu.mp4 21.55MB

jing2.jpg 235KB

7.jpeg 29KB

1.jfif 89KB

yifei.jpg 25KB

6.jpeg 24KB

meishi1.png 670KB

renko.mp4 1.4MB

2.jfif 17KB

fengjing6.png 406KB

2.webp 16KB

meihsi4.png 523KB

02.png 34KB

jing8.jpg 249KB

.keep 0B

custom.html 4KB

index.html 4KB

index-education.html 4KB

stationmaster.html 3KB

资源推荐

资源预览

资源评论

<!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>湛江景点</title> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/animate.min.css"> </head> <body> <div>  <div class="header"> <div class="content"> <div class="header-left"> <h3>我的家乡</h3> </div> <div class="header-mid">  <ul> <li><a href="index.html"><span>首页</span></a></li> <li><a href="food.html"><span>美食</span></a></li> <li class="active"><a href="scenery.html"><span>景点</span></a></li> <li><a href="custom.html"><span>民俗</span></a></li> <li><a href="stationmaster.html"><span>反馈</span></a></li> <li><a href="information.html"><span>站长</span></a></li> </ul> </div> <div class="header-right">   <button onclick="alert('功能尚未开发')">湛江</button>  </div> </div> </div>  <div class="scenery-clear">  <div class="scenery"> <div class="scenery-body"> <div class="scenery-body-header"> <h4>金鹿园</h4> </div> <div class="scenery-body-body"> <img class="img-responsive" src="img/fengjing6.png" alt="img1"> <p>金鹿园是华南地区最大的养鹿基地和种鹿供应基地，是全国北鹿南养示范基地、全国农业旅游示范基地，广东省生态示范园。金鹿园位于湛江市湖光岩风景区北侧(距湖光岩1公里)，是华南地区最大的养鹿基地和种鹿供应基地，是全国北鹿南养示范基地，占地近百亩，与湖光岩、南亚热带植物园共同构成环湖生态旅游圈，附近空气清新，景色幽美，是湛江市理想的天然"氧吧"。</p> </div> </div> </div>  <div class="scenery"> <div class="scenery-body"> <div class="scenery-body-header"> <h4>中国大陆南极村</h4> </div> <div class="scenery-body-body"> <img class="img-responsive" src="img/fengjing5.png" alt="img1"> <p>中国大陆南极村(角尾乡)位于广东省徐闻县西南部，被琼州海峡和北部湾所拥环，地形似伸向大海的牛角，面积37平方公里，人口3.2万人。中国大陆南极村的"顶端点"是灯楼角，南极村灯楼角和台湾的鹅銮鼻、海南临高角并称中国南三端。南极村位于东经109°55′，北纬20°13′。古有"极南"、"尽南"之称，拥有壮美的滨海景观、密集的人文史迹、浓郁的渔家风情、奇特的珊瑚建筑。中国大陆最南端端点灯楼角、琼州海峡与北部湾的合水线、中国大陆架最大最美的珊瑚礁群是中国独一无二的旅游资源。</p> </div> </div> </div>  <div class="scenery"> <div class="scenery-body"> <div class="scenery-body-header"> <h4>湛江海滨公园</h4> </div> <div class="scenery-body-body"> <img class="img-responsive" src="img/fengjing3.png" alt="img1"> <p>湛江海滨公园位于广东省湛江市霞山区东北角海滨，这里有细白的沙滩、湛蓝的海水、挺拔的椰树，如茵的芳草，鲜艳的花卉。富有亚热带海洋风光，被称为湛江的"城市客厅"。节假日公园都增设丰富多彩的游园活动，每年春节都举办大型花展。湛江市多次在公园举办重大庆典和文艺活动，较大型的有西南地区经济贸易博览会、海博会、农博会等共三届湛江博览会的开幕式烟花文艺晚会和贺千禧黑豹、藏民天朔摇滚音乐会等。</p> </div> </div> </div>  <div class="scenery"> <div class="scenery-body"> <div class="scenery-body-header"> <h4>孔子文化城</h4> </div> <div class="scenery-body-body"> <img class="img-responsive" src="img/fengjing4.png" alt="img1"> <p>孔子文化园是集生态园林、山水景观、休闲旅游、餐饮购物、文艺演出、国学讲堂为一体的开放式儒家文化主题公园。位于曲阜孔庙正南300米处。孔子文化园占地面积2888.8平方米，以明代建筑风格为基调，采北方园林之庄严典雅，南方私家园林之玲珑奇秀，全园有楼、堂、亭、树、台、廊、坊、庑等建筑400余间，主要景点有善华堂、光世堂、泮池、仁山、乐湖、咏归亭、必观亭等，环境优美、曲径通幽、品位高雅，是参观游览、餐饮购物、文化娱乐、商业促销的理想场所。</p> </div> </div> </div>  <div class="scenery"> <div class="scenery-body"> <div class="scenery-body-header"> <h4>硇洲岛</h4> </div> <div class="scenery-body-body"> <img class="img-responsive" src="img/2.jpg" alt="img1"> <p>硇洲岛，古称硭，是一个大约20-50万年前由海底火山爆发而形成的海岛，也是中国第一大火山岛. 位于广东省湛江市东南约40公里处，北傍东海岛，西依雷州湾，东南面是南海，纵深是太平洋，总面积约56平方公里。硇洲岛是"湛江八景"之一，美曰:"硇洲古韵"。它是湛江市的岛外之岛，风景秀丽，一年四季气候宜人。岛中名胜古迹众多，有南国著各的旅游度假胜地-那晏海石滩，有十分理想的天然海浴场，有与伦敦、好望角灯塔齐名的世界著名三大灯塔之一 -硇洲灯塔。古迹有:宋皇城遗址、祥龙书院、八角井、宋皇碑、宋皇亭、宋皇村、赤马村以及窦振彪墓和"宫保坊"等。</p> </div> </div> </div>  <div class="scenery" style="margin-bottom: 10px"> <div class="scenery-body"> <div class="scenery-body-header"> <h4>湖光岩</h4> </div> <div class="scenery-body-body"> <img class="img-responsive" src="img/9.jpeg" alt="img1"> <p>湖光岩风景区位于中国大陆最南端湛江市区西南18公里处，被联合国地质专家称为研究地球与地质科学的"天然年�