<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代表风景</title>
<style type="text/css">
.main{
width: 1000px;
height: 400px;
/* background: red; */
margin: 30px auto;
}
.fist{
height: 100%;
width: 450px;
margin: 0 20px;
float: left;
}
.scend{
height: 100%;
width: 400px;
margin: 120px 50px;
float: left;
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
img{
height: 400px;
width: 450px;
}
.nav{
height: 50px;
background: yellowgreen;
}
.navlist li{
float: left;
height: 40px;
width: 130px;
line-height: 48px;
text-align: center;
/* margin: 0 40px; */
}
.navlist a{
color: black;
display: block;
font-size: 28px;
}
.navlist{
width: 1000px;
margin: auto;
}
.navlist a:hover{
background: pink;
}
body{
background: linear-gradient(to right,pink,skyblue);
background: url(../图片合集/Camera_XHS_17026323048121040g00830mr09ldt4m4g49uj.jpg);
background-repeat: no-repeat;
background-repeat: repeat-x;
background-size: 100%;
background-attachment: fixed;
}
p{
font-size: 30px;
font-family: 宋体;
}
.return{
position: fixed;
right: 20px;
bottom: 20px;
color: darkred;
border: 2px;
font-size: 20px;
background-color: white;
height: 40px;
line-height: 37px;
}
.muludiv{
width: 250px;
height: 380px;
background: bisque;
float: left;
position: fixed;
}
.mululist{
width: 100%;
height: 100%;
}
.mululist li{
margin: 28px 80px;
}
.mululist li a{
font-size: 20px;
display: block;
}
strong{
font-size: 30px;
}
.right{
width: 100%;
height: 380px;
background: aquamarine;
float: left;
}
.muluimg{
width: 100%;
height: 100%;
}
hr{
border: 5px solid black;
}
</style>
</head>
<body>
<div class="nav" id="nav">
<ul class="navlist">
<li><a href="../首页/首页.html">首页</a></li>
<li><a href="../庐山简介/庐山简介.html">庐山简介</a></li>
<li><a href="../代表风景/代表风景.html">代表风景</a></li>
<li><a href="../文化特色/文化特色.html">文化特色</a></li>
<li><a href="../地图指南/地图指南.html">地图指南</a></li>
<li><a href="../美食特色/美食特色.html">美食特色</a></li>
<li><a href="../关于我们/关于我们.html">关于我们</a></li>
</ul>
</div>
<div class="muludiv">
<strong>目录</strong>
<hr>
<ul class="mululist">
<li><a href="#ru">如琴湖</a></li>
<li><a href="#xiao">小天池</a></li>
<li><a href="#lu">芦林湖</a></li>
<li><a href="#xian">仙人洞</a></li>
<li><a href="#die">三叠泉</a></li>
<li><a href="#long">龙首崖</a></li>
</ul>
</div>
<!-- <div class="right"><img class="muluimg" src="../图片合集/截图20231214153532.png" alt=""></div> -->
<div class="main">
<div class="fist"><img id="#ru" src="../图片合集/三叠泉.jpg" alt=""></div>
<div class="scend">
<strong>如琴湖</strong><hr><p>形如提琴，峰岭围抱，森林蓊蔚，冬季雾凇冰挂，银装素裹绝美，晴天下拍照非常通透，白居易的诗就是在此写下</p>
</div>
<div class="main">
<div class="fist"><img id="xiao" src="../图片合集/img11.jpg" alt=""></div>
<div class="scend">
<strong>小天池</strong><hr><p>是看日落的绝佳之地和最佳赏雪点，打卡寺庙、佛塔、雾凇、小沙弥雕像，在白雪的衬托下更是禅意十足。</p>
</div>
<div class="main">
<div class="fist"><img id="lu" src="../图片合集/雪景.jpg" alt=""></div>
<div class="scend">
<strong>芦林湖</strong><hr><p>打卡湖心亭山水美景，可以看到西湖断桥的韵味。四周山环水绕，环绕幽雅，冬季飘渺的云雾，好似踏入了仙境</p>
</div>
<div class="main">
<div class="fist"><img id="xian" src="../图片合集/img14.png" alt=""></div>
<div class="scend">
<strong>仙人洞</strong><hr><p>传说八仙之一的吕洞宾曾在这古洞修炼成仙，迄今已有千年之久了。浑然天成的石窟，常常被云雾所笼罩</p>
</div>
<div class="main">
<div class="fist"><img id="die" src="../图片合集/img15.jpg" alt=""></div>
<div class="scend">
<strong>三叠泉</strong><hr><p>被誉为"庐山第一奇观"，两山峡谷之中，瀑布之下凉爽宜人，雷声轰鸣，可遥望瀑布、戏水、观山色、眺望鄱阳湖</p>
</div>
<div class="main">
<div class="fist"><img id="long" src="../图片合集/img16.jpg" alt=""></div>
<div class="scend">
<strong>龙首崖</strong><hr><p>悬崖左边石亭是观看龙首崖，观云雾的最佳位置——只见龙首崖悬壁峭立，一石壁立千仞，如苍龙昂首</p>
</div>
<a class="return" href="#nav"><strong>返回顶部</strong></a>
</body>
</html>
web课程设计作业.zip
需积分: 0 113 浏览量
更新于2024-01-07
收藏 179.26MB ZIP 举报
在“Web课程设计作业.zip”这个压缩包中，我们可以推测这是一份与Web开发相关的学习或教学材料。Web课程设计通常涵盖了多个关键知识点，包括HTML、CSS、JavaScript基础，前端框架，后端开发，数据库管理和网页交互等。下面将详细讨论这些领域的核心概念。
1. **HTML（超文本标记语言）**：HTML是构建网页结构的基础，它定义了网页的各个元素如标题、段落、链接、图像等。了解如何使用不同的HTML标签，以及如何组织和结构化内容，是每个Web开发者必备的技能。
2. **CSS（层叠样式表）**：CSS用于控制网页的样式和布局，包括颜色、字体、间距、大小、位置等。通过CSS，可以实现响应式设计，让网页在不同设备上都能良好显示。CSS3引入了许多新特性，如媒体查询、动画和过渡效果，使网页更具视觉吸引力。
3. **JavaScript**：JavaScript是网页的动态脚本语言，用于处理用户交互、操作DOM（文档对象模型）、发送AJAX请求等。理解变量、数据类型、函数、条件语句和循环等基本概念至关重要。ES6（ECMAScript 6）的引入提供了许多新的语法特性，如类、箭头函数和模板字符串，使代码更加简洁易读。
4. **前端框架**：目前流行的前端框架有React、Vue.js和Angular等，它们简化了开发过程，提供了一套完整的组件化开发模式。例如，React使用JSX语法来组合UI，Vue.js则以其轻量级和易于上手而受欢迎，Angular则提供了全面的解决方案，包括模板、依赖注入和服务。
5. **后端开发**：后端处理服务器端逻辑，通常涉及选择合适的编程语言（如Java、Python、Node.js等）、搭建服务器环境（如Express.js、Django、Spring Boot等）、API设计和数据库交互。RESTful API设计原则是后端开发中的重要概念，用于创建清晰、可预测的接口。
6. **数据库管理**：常见的关系型数据库如MySQL、PostgreSQL，非关系型数据库如MongoDB，用于存储和检索数据。理解SQL（结构化查询语言）是必需的，包括增删改查操作，以及更高级的联接、子查询和事务处理。
7. **网页交互**：AJAX（异步JavaScript和XML）技术允许不刷新页面的情况下与服务器交换数据并更新部分网页内容。此外，WebSocket提供双向通信，用于实时应用如聊天室和在线游戏。
8. **版本控制**：Git是常见的版本控制系统，用于协同开发和版本管理。学习使用Git的基本命令，如克隆、提交、推送和拉取，对于团队合作至关重要。
9. **Web安全**：了解常见的安全问题，如XSS（跨站脚本攻击）、CSRF（跨站请求伪造）和SQL注入，以及相应的防护措施，是保障网站安全的关键。
10. **响应式设计**：随着移动设备的普及，确保网页在不同屏幕尺寸下都能正常显示变得尤为重要。利用媒体查询和流式布局等技术，可以实现响应式设计。
以上就是Web课程设计作业可能涵盖的主要知识点。通过深入学习和实践，学生将能够构建功能完备、用户体验良好的Web应用程序。
web课程设计作业.zip （68个子文件） 
web课程设计作业 登录界面 
登录.html 4KB 庐山简介 庐山简介.html 5KB 关于我们 关于我们.html 3KB 美食特色 美食特色.html 5KB 首页 首页.html 4KB 地图指南 地图指南.html 2KB 代表风景 代表风景.html 5KB 文化特色 文化特色.html 2KB 图片合集 
索道.jpg 135KB
截图20231215174600.png 1.1MB QQ图片20231216210020.png 1.19MB 截图20231215165110.png 1.68MB denglu.jpg 194KB QQ图片20231215164521.png 2.6MB 截图20231213180123.png 467KB dongge.jpg 40KB 截图20231214150112.png 100KB img6.jpg 980KB 截图20231215170620.png 6KB 截图20231215170549.png 46KB 截图20231215163606.png 733KB Camera_XHS_17026321742851040g00830mr09ldt4m6049uj.jpg 472KB 截图20231213175450.png 74KB 白鹿洞.jpg 296KB 图片1.png 50KB
eb2ca77eb35a1486c67ab0d5b54e74d1.mp3 3.88MB 图片3.png 972KB img2.jpg 1014KB QQ截图20231216204257.png 2.01MB img14.png 1.22MB img5.jpg 894KB 图片4.png 1.25MB 截图20231216204512.png 926KB 雪景.jpg 1.75MB jia.jpg 38KB QQ图片20231215175407.png 1.32MB map.jpg 28KB deng.jpg 16KB 封面.jpg 166KB 图片2.png 17KB img11.jpg 94KB 截图20231215175125.png 28KB img4.jpg 895KB 截图20231215164745.png 201KB img15.jpg 79KB img1.jpg 730KB 截图20231215170606.png 34KB img16.jpg 86KB Camera_XHS_17026323048121040g00830mr09ldt4m4g49uj.jpg 623KB 截图20231215170645.png 10KB img3.jpg 1008KB 截图20231214152116.png 904KB QQ图片20231216200522.png 1.61MB QQ图片20231216204432.png 1.83MB 三叠泉.jpg 864KB 截图20231215175629.png 50KB 截图20231215174845.png 36KB zuce.jpg 225KB 截图20231215163755.png 781KB li.jpg 14KB 截图20231214152458.png 119KB Camera_XHS_17026327536050302at01kiihm487r1c011ah0.jpg 123KB 截图20231214150547.png 24KB 截图20231214153532.png 228KB
VID_20231212_194015.mp4 141.86MB Camera_XHS_17026319234411000g0082hctihs4is0005ns2.jpg 579KB 白鹿洞书院.jpg 1.03MB Camera_XHS_17026326042451000g00825v8a4gsfu01g5or5.jpg 186KB2024-02-10 上传
5星 · 资源好评率100%179 浏览量
2024-07-03 上传
181 浏览量
162 浏览量
157 浏览量
112 浏览量
198 浏览量
2023-11-13 上传
175 浏览量
200 浏览量
2024-10-09 上传
5星 · 资源好评率100%173 浏览量
2024-02-04 上传
169 浏览量
2024-06-04 上传
5星 · 资源好评率100%196 浏览量
2024-06-23 上传
资源评论
2301_80777014
- 粉丝: 0
- 资源: 1
