本文介绍了一个旅游主题的静态网页设计实例，使用HTML+CSS完成页面布局，具备整洁的排版和丰富的内容。通过该实例，读者可以学习到网页设计的基本流程和技术要点。
👨🎓学生HTML静态网页基础水平制作👩🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
🏀 精彩专栏推荐👇🏻👇🏻👇🏻
💝 【作者主页——🔥获取更多优质源码】
💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】
一、网站题目👨🎓
🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。
二、网站描述✍️
旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。
三、网站介绍📖
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言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 />
天津位于华北平原海河五大支流汇流处，东临渤海，北依燕山，海河在城中蜿蜒而过，海河是天津的母亲河。天津滨海新区被誉为"中国经济第三增长极"。天津是夏季达沃斯论坛常驻举办城市。</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.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥
扫一扫
2012
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
