HTML5期末考核大作业,网站——青岛民俗 7页。 美丽家乡 学生旅行 游玩 主题住宿网页

本文主要是介绍HTML5期末考核大作业,网站——青岛民俗 7页。 美丽家乡 学生旅行 游玩 主题住宿网页,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓,一般的网页作业需要融入以下知识点:div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点,学生网页作业源码,制作水平和原创度都适合学习或交作业用,记得点赞。


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

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

文章目录🌰

  • 一、网站题目👨‍🎓
  • 二、网站描述✍️
  • 三、网站介绍📖
  • 四、网站效果🌐
  • 五、网站代码制作部分 📕
    • HTML结构代码🧱
    • CSS样式代码🏡
  • 六、遇到问题及如何解决🔍
  • 七、实训总结😊
  • 八、更多干货🎁


一、网站题目👨‍🎓

🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。


二、网站描述✍️

旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情,并通过访客留言,增加游客的互动体验。同时,地方旅游网站里的每一个网页都采用了统一的设计风格,以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格,更能吸引浏览者的眼球。


三、网站介绍📖

网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。

网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)html文件包含:其中index.html是首页、其他html为二级页面;
(2)css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3)js文件包含:js实现动态轮播特效, 点击事件等等(个别网页中运用到js代码)。


四、网站效果🌐

网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。
网站设计方面:计划实现简洁大气的网页设计效果。
网站功能方面:计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


五、网站代码制作部分 📕

(1)网站首页布局确定好各个板块的内容,并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

(2)页面使用了DIV+CSS布局,使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

(3)表单部分页面使用了DIV+CSS布局,使用到的知识主要有运用了form表单、input文本框和input提交按钮,完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。

HTML结构代码🧱


<!DOCTYPE htmlPUBLIC "-//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 href="css/css.css" rel="stylesheet" type="text/css" /><link href="css/lb.css" rel="stylesheet" type="text/css" /><body><div><div style="width:960px; height:280px; margin:10px auto;"><div id="focus"><ul><li><a href="two.html" target="_blank"><img src="images/01.jpg" width="960" /></a></li></ul></div></div><div class="mw">青岛民俗</div><div id="main"><div id="main_im"><div class="nav"><a href="index.html">首页</a><a href="jing.html">服饰</a><a href="ju.html">饮食</a><ahref="fengjing.html">居住</a></div><p class="i_p">青岛是一个现代化的城市,但也在向世界展示着地方民俗特色文化。地方民俗勾勒并凸显了青岛一地文化中的城市特色,而青岛能够为世界留下深刻记忆的,也正是囊括了民间传统文化在内的城市特色人文风貌。能够反映青岛一地人文风貌的,远不止于五花八门的传统民间工艺与民间小吃,还有近百年来青岛民间居住形式的里院建筑;具有浓郁地方特色的戏剧茂腔、柳腔;以妈祖为代表的沿海民间民俗信仰及各种民族文化节等。<br />青岛民俗作为集历史文化旅游、民俗风情旅游、休闲度假旅游、趣味娱乐旅游和生态环境旅游于一体的主题文化公园,突出体现了观赏性、知识性、娱乐性、参与性和情趣性等特点。 </p><div class="center "><img src="images/t1.jpg" width="700" height="400" /></div><p class="i_p">服饰民俗是指人们在服装、鞋帽、佩戴、装饰方面的风俗习惯。服饰和饮食一样,是每个人都离不开的。<br />时代、气候以至人的地位、职业、性别、年龄都对服饰有着直接的影响,所以服饰民俗也有着十分广泛的内容。人们为了适应季节变化,制作出了单衣、夹衣、棉衣、皮衣等各类服装;为了装饰和美化生活,按照不同性别、年龄,创造了各个时期不同的发型、首饰和佩戴方式;为了区别不同的职业分工,又出现了样式各异的职业服装,使人们可以明显地看出穿着者的身份和职业。<br />生活水平的高低对服饰民俗起着举足轻重的作用。旧时,青岛地区农民大都一年只有两套服装(一套单衣和一套棉衣),还要&quot;新三年,旧三年,缝缝补补又三年&quot;,这并不是为了节俭,而是贫穷所致。穿衣只是为了遮蔽身体、抵御风寒,根本谈不上装饰和审美功能。50年代以后农民开始穿针织或细布内衣,服装布料不断更新。改革开放以后,随着人们生活水平的提高,各类款式的服装争奇斗艳,人们的服饰再不是单纯为了蔽体御寒,而更多的则是为了美化生活而从款式、用料、色彩等多方面进行选择和穿戴。<br />帽子辛亥革命前,男子多戴瓜皮帽,俗称&quot;半帽&quot;&quot;瓜皮子&quot;,因其形状象半个西瓜而得名。瓜皮帽是用上尖下宽的多块绸布做成,用琉璃蛋或绒布结为顶饰(叫&quot;帽葫芦&quot;)。红色顶饰为青年人所戴;中老年戴的顶饰为蓝色;家中遇有丧事,则顶饰用白布包住。<br />毡帽,又称&quot;毡帽头&quot;,农民和商贩多在天冷时戴用。帽分左、右、后3块,翻上去是一圆形帽头,折下来可盖住面颊和后颈,多为褐色。</p><p class="i_p"></p></div></div><div id="foot"></div></div>
</body></html>

CSS样式代码🏡

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}.clearfix {zoom:1;}ul,li {list-style:none;}img {border:0;}.wrapper {width:960px; margin:0 auto; padding-bottom:50px;}h1 {height:50px; line-height:50px; font-size:22px; font-weight:normal; font-family:"Microsoft YaHei",SimHei;}.shuoming {margin-top:20px; border:1px solid #ccc; padding-bottom:10px;}.shuoming dt {height:30px; line-height:30px; font-weight:bold; text-indent:10px;}.shuoming dd {line-height:20px; padding:5px 20px;}/* qqshop focus */#focus {width:960px; height:280px; overflow:hidden; position:relative;}#focus ul {height:380px; position:absolute;}#focus ul li {float:left; width:960px; height:280px; overflow:hidden; position:relative; background:#000;}#focus ul li div {position:absolute; overflow:hidden;}#focus .btnBg {position:absolute; width:960px; height:20px; left:0; bottom:0; background:#000;}#focus .btn {position:absolute; width:780px; height:10px; padding:5px 10px; right:0; bottom:0; text-align:right;}#focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:10px; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;}#focus .btn span.on {background:#fff;}#focus .preNext {width:45px; height:100px; position:absolute; top:90px; background:url("img/sprite.png") no-repeat 0 0; cursor:pointer;}#focus .pre {left:0;}#focus .next {right:0; background-position:right top;}

六、遇到问题及如何解决🔍

实训中遇到得困难不少,比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等,最后,通过上网查询和请教别人得到了很好的解决。


七、实训总结😊

通过这次网页设计制作实训,能够灵活的运用到所学的知识和技巧制作简单的网页,掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识,对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料,学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题,通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大,学有所用,在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科,值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了,以至于很多想法都没能实现,在以后的学习过程中我要对网页制作有更深的了解,做出更为成熟的网页。


八、更多干货🎁

1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!

2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥在这里插入图片描述

这篇关于HTML5期末考核大作业,网站——青岛民俗 7页。 美丽家乡 学生旅行 游玩 主题住宿网页的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/169489

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

作业提交过程之HDFSMapReduce

作业提交全过程详解 (1)作业提交 第1步:Client调用job.waitForCompletion方法,向整个集群提交MapReduce作业。 第2步:Client向RM申请一个作业id。 第3步:RM给Client返回该job资源的提交路径和作业id。 第4步:Client提交jar包、切片信息和配置文件到指定的资源提交路径。 第5步:Client提交完资源后,向RM申请运行MrAp

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏