300字范文 > 关于旅游景点主题的HTML网页设计——青岛民俗 7页带登录注册

关于旅游景点主题的HTML网页设计——青岛民俗 7页带登录注册

时间：2020-07-20 23:59:27

⛵源码获取文末联系✈
Web前端开发技术
描述网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 游景点介绍 | 旅游风景区 | 家乡介绍 | 等网站的设计与制作| HTML期末大学生网页设计作业

HTML：结构

CSS：样式

在操作方面上运用了html5和css3，

采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

JavaScript：做与用户的交互行为

文章目录

前端学习路线网页基本结构网页演示HTML结构代码学的反而越迷茫学习更多

前端学习路线

（1）html文件：其中index.html是首页、其他html为二级页面；

（2）css文件：css全部页面样式,文字滚动, 图片放大等；

（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）

网页基本结构

(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个

(2)二级页面：从首页点击进入之后的页面叫做二级页面

(3)三级页面：从二级页面点击进入的页面

网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的

首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名

导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.

网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。

网页演示

HTML结构代码

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><link rel="stylesheet" href="css/two.css"><link rel="stylesheet" href="css/lb.css"><script src="jq/jq.js"></script></head><body><header><img src="images/logo.png" alt=""><ul class="yue"><li class="CSre">和我们一起阅读</li><li class="shouye"><a href="javascript:;">首页</a><div id="xia"><a href="index.html">首页</a><a href="jing.html">服饰</a><a href="ju.html">饮食</a><a href="fengjing.html">居住</a><a href="two.html">民俗</a></div></li><li><a href="javascript:;">文化图</a></li><li><a href="javascript:;">关于我们</a></li></ul><div class="search"><input type="text" placeholder="搜索"><a href="dl.html">登录</a><span style="color: rgb(255, 255, 255); font-weight:700;">|</span><a href="zc.html">注册</a></div></header><section><p class="S_p">回族作为中华民族大家庭中的一员，在长期不断地吸收伊斯兰文化、阿拉伯文化、波斯文化和中国汉文化等各种文化因素过程中，形成了一整套本民族独特的风俗习惯，成为沟通传统与现实、物质生活和精神生活之间的一种民族基础文化。回族的通用语为华语，第二语言为阿拉伯语，在回族群内部占有举足轻重的地位。在日常交往及宗教活动中，回族保留了大量的阿拉伯语和波斯语的词汇。</p><div class="S_div"><img src="images/24.jpg" alt=""><img src="images/aa.jpg" alt=""></div></section><div><div style="width:960px; height:280px; margin:10px auto;"></div><script>$(".shouye").mouseover(function () {$("#xia").stop().slideDown();})$(".shouye").mouseout(function () {$("#xia").stop().slideUp();})a = 0;setInterval(function () {var er = ["url('images/a1.jpg')", "url('images/a2.jpg')", "url('images/a3.jpg')", "url('images/a4.jpg')", "url('images/a5.jpg')", "url('images/ff.jpg')"];$('body').css('background', er[a]);$('body').css('background-size', '100%');if (a < 7) {a++;}else {a = 0;}}, 5000);</script></body></html>