web前端网页课程设计大作业 html+css+javascript天津旅游(11页) dw静态旅游网页设计实例 企业网站制作

news2024/11/25 22:59:16

👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

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

💝 【作者主页——🔥获取更多优质源码】
💝 【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 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 href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="cleaner"></div>
<div id="container">
  <div class="dm"> 
    <!-- 代码 开始 -->
    <div id="yc-mod-slider">
      <div class="wrapper">
        <div id="slideshow" class="box_skitter fn-clear">
          <ul>
            <li> <img class="cubeRandom" src="images/dm1.jpg" /></li>
            <li> <img   class="cubeRandom" src="images/dm2.jpg" /></li>
            <li> <img   class="cubeRandom" src="images/dm3.jpg" /></li>
          </ul>
        </div>
        <script type="text/javascript" src="js/slideshow.js"></script> 
      </div>
    </div>
    <!-- 代码 结束 --> 
  </div>
  <div class=" clear"></div>
  <div class="index_main">
    <div class="index_list">
      <ul>
        <li> <a href="index.html">首页</a> </li>
        <li> <a href="page1.html">天津摩天轮</a> </li>
        <li> <a href="page2.html">五大道</a> </li>
        <li> <a href="page3.html">古文化街</a> </li>
        <li> <a href="page4.html">海河意式</a> </li>
        <li> <a href="page5.html">瓷房子</a> </li>
        <li> <a href="page6.html">欢乐谷</a> </li>
        <li> <a href="page7.html">自然博物馆 </a> </li>
        <li> <a href="page8.html">西开教堂</a> </li>
        <li> <a href="page9.html">霍元甲故居</a> </li>
        <li> <a href="page10.html">主题公园</a> </li>
      </ul>
    </div>
    <div class="index_mainr">
      <h1>欢迎光临--天津旅游网
      </h1>
      <p>天津，简称津，中华人民共和国直辖市、国家中心城市、超大城市、环渤海地区经济中心、首批沿海开放城市、综合交通枢纽，全国先进制造研发基地、北方国际航运核心区、金融创新运营示范区、改革开放先行区。 [1-3] <br />
        天津自古因漕运而兴起，明永乐二年十一月二十一日（1404年12月23日）正式筑城，是中国古代唯一有确切建城时间记录的城市。历经600多年，造就了天津中西合璧、古今兼容的独特城市风貌。<br />
      天津位于华北平原海河五大支流汇流处，东临渤海，北依燕山，海河在城中蜿蜒而过，海河是天津的母亲河。天津滨海新区被誉为&quot;中国经济第三增长极&quot;。天津是夏季达沃斯论坛常驻举办城市。</p>   
      <p></p>
      <div class="index_xz">
        <ul>
          <li><a href="page1.html"> <img src="images/r1.jpg" /></a> <a href="page1.html">天津摩天轮</a></li>
          <li><a href="page2.html"> <img src="images/r2.jpg" /> </a><a href="page2.html">五大道</a></li>
          <li><a href="page3.html"> <img src="images/r3.jpg" /> </a><a href="page3.html">古文化街 </a></li>
          <li><a href="page4.html"> <img src="images/r4.jpg" /> </a> <a href="page4.html">海河意式风情区</a></li>
          <li><a href="page5.html"> <img src="images/r5.jpg" /></a> <a href="page5.html">瓷房子</a>
          </li><li><a href="page6.html"> <img src="images/r6.jpg" /> </a><a href="page6.html">欢乐谷</a></li>
          <li><a href="page7.html"> <img src="images/r7.jpg" /> </a> <a href="page7.html">自然博物馆 </a> </li>
          <li><a href="page8.html"> <img src="images/r8.jpg" /> </a><a href="page8.html">西开教堂</a> </li>
          <li><a href="page9.html"> <img src="images/r9.jpg" /></a><a href="page9.html">霍元甲故居</a></li>
          <li><a href="page10.html"> <img src="images/r10.jpg" /> </a><a href="page10.html">主题公园</a></li>
        </ul>
        <div class="cleaner"></div>
      </div>
      <div class=" clear"></div>
    </div>
    <div class=" clear"></div>
  </div>
  <div class="share">
    <ul>
      <!--<li><a href="#"> <img src="images/1.png" /></a></li>
      <li><a href="#"> <img src="images/2.gif" /> </a></li>
      <li><a href="#"> <img src="images/3.png" /> </a></li>
      <li><a href="#"> <img src="images/4.png" /> </a></li>
      <li><a href="#"> <img src="images/5.png" /> </a></li> -->
    </ul>
    <div class="cleaner"></div>
  </div>
  <div id="footer"> Copyright © 天津旅游网</div>
  <div class=" clear"></div>
</div>
<!-- End Of Container -->
</body> 
</html>

CSS样式代码🏡



body {	margin: 0;	padding:0;	font-family:微软雅黑;	font-size: 14px;background: url(../images/bj.jpg) center top no-repeat fixed #000;}
a:link, a:visited {	color: #87430c; text-decoration: none; }
a:active, a:hover { color: #f00;}
p {	font-family: Tahoma, "Trebuchet MS", Verdana;	font-size: 16px;	color: #222; line-height:26px;	text-align: justify;}

.fl{ float:left;}
.fr{ float:right;}
li{ list-style-type:none;}
.clear{ clear:both;}
.cleaner {	clear: both;}
.p5{ padding:5px;}



#container {	width: 960px; padding:30px;	margin:10px auto; background-color:rgba(255,255,255,0.8);-moz-border-radius:20px;border-radius:20px; min-height:600px; margin-bottom:50px;
}

.index_main{ width:960px; height:auto; min-height:500px; margin:auto; padding:30px 0px;}
.index_list{ width:120px; float:left;}
.index_list li{background:#fff; width:100px; height:30px; margin:5px; padding:1px 20px;text-align:left;-moz-border-radius:10px;border-radius:10px; text-align:center; }
.index_list li a{ color:#2aa7ef;font-size:20px; text-align:center; line-height:30px;}
.index_list li a:hover{ color:#0e5279;}
.index_list li:hover{ background:#FFC;}
.index_mainr {width:700px; float:right;}
.index_mainr h1{ color:#175798;font-size:35px; text-align:center; line-height:56px; font-weight:normal;}
.index_xz{ width:660px; border-top:1px dashed #ddd;}
.index_xz ul{ margin-left:-40px;}
.index_xz li{ width:200px; height:160px; float:left; margin:5px; list-style-type:none; text-align:center; }
.index_xz li:hover{}
.index_xz li img{ width:200px; height:140px;-moz-border-radius:10px;border-radius:10px; border:2px solid #ccc;}
.index_xz li img:hover{ border:2px solid #4b75dd;}

.title{width:900px; height:46px; margin:auto;}
.title h1{color:#2aa7ef;font-size:20px; line-height:46px; }
.xz_list{ width:960px; margin:auto; border-top:1px dashed #2aa7ef;}
.xz_list ul{ margin-left:-30px;}
.xz_list li{ width:150px; height:130px; float:left; margin:4px; list-style-type:none; text-align:center; }
.xz_list li:hover{}
.xz_list li img{ width:150px; height:100px;-moz-border-radius:10px;border-radius:10px; border:2px solid #ccc;}
.xz_list li img:hover{ border:2px solid #4b75dd;}


.share{ width:220px; height:50px; margin:auto;}
.share li{ float:left; margin:2px;}
.share li img{ width:30px; height:30px;}








#footer {width:900px;color: #555;	margin: 0;	padding: 10px 0;	text-align: center;}




/* -------------------index lunbo css -------------------------------*/
.dm{ width:950px; height:380px; margin:auto;-moz-border-radius:30px;border-radius:30px; overflow:hidden; margin-bottom:0px;}
.fn-clear { zoom: 1; }
.box_skitter { position: relative; background: none; }
.box_skitter ul { display: none; }
.box_skitter .container_skitter { overflow: hidden; position: relative; }
.box_skitter .image { overflow: hidden; }
.box_skitter .image img {width: 950px; height:380px; display: none; }
.box_skitter .box_clone { position: absolute; top: 0; left: 0; width: 100px; overflow: hidden; display: none; z-index: 20; }
.box_skitter .box_clone img { position: absolute; top: 0; left: 0; z-index: 20; }
.box_skitter .prev_button { position: absolute; top:30%; left:30px; z-index: 100; width:69px; height:124px; overflow: hidden; text-indent: -9999em; margin-top: -5px; background: url(../images/prev.png) no-repeat left top !important; }
.box_skitter .next_button { position: absolute; top:30%; right:50px; z-index: 100; width:69px; height:124px;  overflow: hidden; text-indent: -9999em; margin-top: -5px; background: url(../images/next.png) no-repeat left top !important; }
.box_skitter .label_skitter { z-index: 150; position: absolute; display: none; }
.loading { position: absolute; top: 50%; right: 50%; z-index: 10000; margin: -16px -16px; color: #fff; text-indent: -9999em; overflow: hidden; background: url(../images/ajax-loader.gif) no-repeat left top; width: 31px; height: 31px; }
#slideshow { width: 950px; height:380px; }
#slideshow ul { display: none;

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

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

七、实训总结😊

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

八、更多干货🎁

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

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/92689.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

草料二维码如何在多行业实现管理和自动化工作

草料二维码如何在多行业实现管理和自动化工作

二维码&#xff0c;在我们的日常生活中随处可见&#xff0c;不管是我们常用的微信支付&#xff0c;还是日常出入的场所码&#xff0c;已经渗透在我们生活的点点滴滴中。 如果我们自己也希望通过二维码&#xff0c;来传达文字、数据等信息&#xff0c;那么很多人都肯定给你推荐…
阅读更多...
NS3笔记

NS3笔记

NS3笔记1 Docker环境配置1.1 Docker安装1.2 镜像安装1.3 安装其他软件1.4 安装ns31 Docker环境配置 1.1 Docker安装 俺是macOS&#xff0c;直接参考这个网址。 1.2 镜像安装 俺打算安装Ubuntu18.04&#xff0c;镜像版本可以Ubuntu 镜像库 # 拉取镜像 docker pull ubuntu:18…
阅读更多...
深入理解可升级智能合约

深入理解可升级智能合约

准备 为了理解可升级合约&#xff0c;必须理解proxy机制&#xff0c;要理解proxy机制&#xff0c;必须理解solidity的sstore和sload,以及关于以太坊架构和存储结构&#xff08;数据结构&#xff09;。 关于Solidity中的sstore和sload深入理解&#xff1a; 非常好的一篇剖析&…
阅读更多...
SAP ABAP 散装笔记20220825

SAP ABAP 散装笔记20220825

SAP ABAP 散装笔记20220825 引言&#xff1a; 散装笔记的标题系列中记录了我常用、备忘、易错的知识点。 关键字&#xff1a;SAP ABAP 散装笔记 知识点 文章目录SAP ABAP 散装笔记202208251. 获取域值和域值描述的两种方式2. 打开新的会话窗口&#xff08;并执行可能的事务码…
阅读更多...
西妥昔单抗丨艾美捷西妥昔单抗Cetuximab方案

西妥昔单抗丨艾美捷西妥昔单抗Cetuximab方案

西妥昔单抗Cetuximab是针对人表皮生长因子受体的一种单克隆抗体&#xff0c;主要作用就是与表皮生长因子受体结合&#xff0c;阻断表皮生长因子受体与其它配体的结合而达到抗肿瘤的目的。各种恶性肿瘤细胞&#xff0c;例如直肠癌细胞、胃癌细胞&#xff0c;表面都高表达表皮生长…
阅读更多...
WebStorm pull(拉取)项目commit(提交)、push（推送）代码

WebStorm pull(拉取)项目commit(提交)、push（推送）代码

1.打开WebStrom&#xff0c;找到Git---克隆... 2.输入需要克隆的项目地址&#xff0c;将其项目克隆下来 3.pull&#xff08;拉取&#xff09;、commit&#xff08;提交&#xff09;、push&#xff08;推送&#xff09; 4.在你本地新建一个和你git分支一样名字的分支 5.改完代码…
阅读更多...
Eslint

Eslint

1. 配置文件 配置文件由很多种写法&#xff1a; .eslintrc.*&#xff1a;新建文件&#xff0c;位于项目根目录 .eslintrc.eslintrc.js.eslintrc.json区别在于配置格式不一样package.json 中 eslintConfig&#xff1a;不需要创建文件&#xff0c;在原有文件基础上写。 2. 具体…
阅读更多...
什么是Python？Python有什么特性？

什么是Python？Python有什么特性？

什么是Python&#xff0c;相信第一次接触Python的同学会有一些疑问。我们通过百度百科得到Python的定义为&#xff1a; 　　Python是一种跨平台的计算机程序设计语言。是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。最初被设计用于编写自动化脚本&#xff…
阅读更多...
UDS入门至精通系列：诊断时间参数

UDS入门至精通系列：诊断时间参数

文章目录 前言一、诊断时间参数 P2二、诊断时间参数 P2*三、诊断时间参数 S3四、上述参数在应用中的汇总总结前言 在职场中，对于自己领导吩咐的事情，事事有响应，是你在领导面前彰显自己能力的机会。并且这其中的响应时间就是你职业能力的时刻。 同样在汽车电子诊断领域，因…
阅读更多...
忆享科技受邀亮相CIS2022网络安全创新大会

忆享科技受邀亮相CIS2022网络安全创新大会

12月14日&#xff0c;忆享科技受邀亮相第八届网络安全创新大会&#xff08;简称“CIS”&#xff09;多维时空专场&#xff0c;与行业内资深专家及众多头部企业交流对话&#xff0c;深度了解网络安全行业新理念、新技术、新思路和新实践&#xff0c;共同探讨行业技术创新与突破。…
阅读更多...
Java+Swing实现的五子棋游戏

Java+Swing实现的五子棋游戏

JavaSwing实现的五子棋游戏一、系统介绍二、功能展示1.游戏展示三、系统实现1.ChessFrame .java四、其它1.其他系统实现2.获取源码一、系统介绍 五子棋游戏实现人机对战、人人对战两个模式。 二、功能展示 1.游戏展示 三、系统实现 1.ChessFrame .java package five;impor…
阅读更多...
【图像处理】图像拼接原理介绍

【图像处理】图像拼接原理介绍

问题 图像拼接是图像处理的基础之一&#xff0c;虽然自己并没有直接做图像拼接方面的研究&#xff0c;但在面试中却多次被问到这方面的内容&#xff0c;可见这个知识点还是很重要的。事实上&#xff0c;很多场景都会用到图像拼接的知识&#xff0c;例如运动检测与跟踪、游戏画…
阅读更多...
HJL-E6/A DC220V数字式【电流继电器】

HJL-E6/A DC220V数字式【电流继电器】

1&#xff0e;用途 HJL系列数字式交流电流继电器为瞬时动作特性&#xff0c;用于发电机&#xff0c;变压器和输电线路的过负荷和短路保护&#xff0c;作为启动元件。 2&#xff0e;安装结构 导轨安装9&#xff0c;导轨安装E 两种壳体尺寸&#xff0c;具体尺寸请参考外型尺寸…
阅读更多...
Spark 3.0 - 12.ML GBDT 梯度提升树理论与实战

Spark 3.0 - 12.ML GBDT 梯度提升树理论与实战

目录 一.引言 二.GBDT 理论 1.集成学习 2.分类 & 回归问题 3.梯度提升 4.GBDT 生成 三.GBDT 实战 1.数据准备 2.构建 GBDT Pipeline 3.预测与评估 四.总结 一.引言 关于决策树前面已经介绍了常规决策树与随机森林两种类型的知识&#xff0c;本文主要介绍梯度提…
阅读更多...
小游戏赛道如何加速流量增长？

小游戏赛道如何加速流量增长？

小游戏是指设计极简的轻量级游戏。它构造简单&#xff0c;但却给人带来了娱乐性和重复参与的欲望。 近年来&#xff0c;小游戏在抖音、微信小游戏等平台拥有着疯狂裂变的可能性&#xff0c;出现了例如“羊了个羊”“跳一跳”、“合成大西瓜”等风靡一时的小游戏。 这些爆火的小…
阅读更多...
「微服务系列」统一网关Gateway

「微服务系列」统一网关Gateway

为什么需要网关 网关功能&#xff1a; 身份认证和权限校验服务路由、负载均衡请求限流在SpringCloud中网关的实现包括两种&#xff1a; Zuul&#xff1a;基于Servlet的实现&#xff0c;属于阻塞式编程。SpringCloudGateway&#xff1a;是基于Spring5中提供的WebFlux&#xf…
阅读更多...
关注渐冻症|菌群助力探索其发病机理及相关干预措施

关注渐冻症|菌群助力探索其发病机理及相关干预措施

最杰出的物理学家之一的斯蒂芬威廉霍金想必大家都知道&#xff0c;以及曾经风靡全网的“冰桶挑战”&#xff0c;它们都与一种罕见疾病有关&#xff0c;那就是渐冻症。 媒体的宣传让渐冻症成为了较为“知名”罕见病之一&#xff1b;2000年丹麦举行的国际病友大会上正式确定6月21…
阅读更多...
【Redis】数据类型操作二 (Set/Hash/Zset)

【Redis】数据类型操作二 (Set/Hash/Zset)

文章目录3、Redis集合(Set)4、 Redis哈希(Hash)5、Redis有序集合Zset(sorted set)实操3、Redis集合(Set)4、 Redis哈希(Hash)5、Redis有序集合Zset(sorted set)3、Redis集合(Set) Redis Set 是String类型的无序集合。一个key集合可以对应多个value元素。Redis Set 可以自动排重…
阅读更多...
[附源码]Python计算机毕业设计高校篮球训练管理系统Django（程序+LW）

[附源码]Python计算机毕业设计高校篮球训练管理系统Django（程序+LW）

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等…
阅读更多...
Python如何做自动化测试？

Python如何做自动化测试？

众做周知&#xff0c;自动测试的优势是显而易见的&#xff0c;它可以大大节省我们的时间&#xff0c;提高我们的工作效率。那么Python如何做自动化测试呢&#xff1f;本文将用Python编写一个简单的测试用例&#xff0c;并指导大家写做自动化测试的代码。如果大家对这个内容感兴…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023