HTML+CSS网页制作成品—— html+css+javascript 绿色的随行旅游网页设计实例企业网站制作

最新推荐文章于 2024-05-31 12:55:05 发布

二挡起步

最新推荐文章于 2024-05-31 12:55:05 发布

阅读量3.2k

点赞数 37

分类专栏： web设计网页规划与设计 web前端期末大作业文章标签： html css javascript 旅游美食课程设计 HTML网页制作

本文链接：https://blog.csdn.net/m0_65484028/article/details/135453008

版权

web前端期末大作业同时被 2 个专栏收录

633 篇文章 116 订阅

订阅专栏

web设计网页规划与设计

465 篇文章 10 订阅

订阅专栏

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

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

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

一、网站题目👨‍🎓

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

二、网站描述✍️

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

三、网站介绍📖

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

网站程序方面：计划采用最新的网页编程语言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>
<html>
<head>
<meta charset="utf-8">
<title>随行网，随心而行，随意而留</title>
<link rel="shortcut icon" href="bitbug_favicon.ico"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/global.css" /> 

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

</head>
<body>
<div class="header1">
    <div class="header1-in">
        <div class="logo">
            <a href="#"><img src="img/logo.jpg" alt="说行就行，随行" /></a>
        </div>
        <div class="search">
            <div class="search-left">搜索目的地</div>
            <div class="search-center">
            <input type="text" class="tex1" placeholder="邂逅慵懒的小时光" />
            </div>
            <div class="search-right"></div>
        </div>
        <div class="zuce">
            <a href="#">登录|注册</a>&nbsp
            <a href="#">语言（简体中文）</a>
        </div>
    </div>
</div>
<div class="nav">
    <ul class="ul1">
        <li class="level1 cur first"><a class="a1" href="#">首页</a></li>
        <li class="level1"><a  class="a1" href="">目的地</a>
            <ul class="yincang">
                <li><a href="#">境内游</a></li>
                <li><a href="#">境外游</a></li>
                <li><a href="#">周边游</a></li>
                
            </ul>
        </li>
        <li class="level1"><a class="a1" href="#">发现</a>
            <ul class="yincang">
                <li><a href="#">美景</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">美女</a></li>
                
            </ul>
        </li>
        <li class="level1"><a class="a1" href="#">社区</a></li>
        <li class="level1"><a class="a1" href="#">自驾</a>
         
        </li>
        <li class="level1"><a class="a1" href="#">预定</a>
            <ul class="yincang">
                <li><a href="#">酒店</a></li>
                <li><a href="#">机票</a></li>
                <li><a href="#">地接</a></li>
                
            </ul>
        </li>
    </ul>
</div>
<div class="banner">
           
            <ul class="list0">
                <li class="cur"><a href="#"><img src="img/bg-1.jpg" alt="" /></a></li>
                <li><a href="#"><img src="img/bg-2.jpg" alt="" /></a></li>
                <li><a href="#"><img src="img/bg-3.jpg" alt="" /></a></li>
              
            </ul>
            <div class="fadeCover"></div>
            <ul class="circle">
                <li class="cur">1</li>
                <li>2</li>
                <li>3</li>
             
            </ul>
</div>
<!-- 内容区域 -->
<!-- 分享 -->

<div class="cl"></div>
<div class="hot">
    <div class="new">最新点评
        <span></span>
    </div>
    <div class="main">
        <ul>
            <li class="cur">马尔代夫真的太美了，下次还要再去！</li>
            <li>丽江之美，美及天下</li>
            <li>做一个没有故事的人,与我一起游世界。</li>
            <li>转机的时候还能在新加坡机场免税店购物,</li>

        </ul>
    </div>
<script type="text/javascript" src="js/hot.js"></script>
    <div class="manyidu">满意度：
        <span>100%</span>
    </div>
    <div class="comeon">即刻出发
        <span></span>
    </div>
</div>
<div class="cl"></div>
<div class="tejia">
    <p class="wenzi">
        
            <span class="cur">每日特价</span>
            <span>特价机票</span>
        
    </p>
    <p class="sanjiao"></p>
    <p class="more"><a href="#">更多>></a></p>
</div>
<div class="youhuitu">
    <ul>
        <li><img src="img/te01.jpg" alt="" />
            <div class="youhuitu-in">
            <div class="youhuitu-inl"> 优惠</div>
            <div class="youhuitu-inr">迪拜帆船游超值特惠</div>
            <div class="xiangxi">全国联运-迪拜帆船酒店三天三晚自由行，奢华体验 都套餐选择住帆船，做土豪，享好礼。</div>
			</div>
        </li>
        <li><img src="img/te02.jpg" alt="" />
            <div class="youhuitu-in">
				<div class="youhuitu-inl"> 优惠</div>
				<div class="youhuitu-inr">澳洲三城游超值特惠</div>
				<div class="xiangxi">澳洲三城自由行8/9天，悉尼黄金海岸布尼斯班 豪华酒店南航 广州飞不回头</div>
			</div>
        </li>
        <li><img src="img/te03.jpg" alt="" />
            <div class="youhuitu-in">
            <div class="youhuitu-inl"> 优惠</div>
            <div class="youhuitu-inr">亚德里亚海超值特惠</div>
			<div class="xiangxi">全国联运-亚德里亚自由行，奢华体验 都套餐选，做土豪，享好礼。</div>
			</div>
        </li>
        <li><img src="img/te04.jpg" alt="" />
            <div class="youhuitu-in">
			<div class="youhuitu-inl"> 优惠</div>
			<div class="youhuitu-inr">美国自由行超值特惠</div>
			<div class="xiangxi">美国自由行西岸10天7晚 自驾游全国出发一价全包含签证 全国联运7晚酒店自驾签证费全包</div>
			</div>
        </li>
    </ul>
    
</div>
<div class="youhuitu">
    <ul>
        <li><img src="img/te05.jpg" alt="" />
            <div class="youhuitu-in">
            <div class="youhuitu-inl"> 优惠</div>
            <div class="youhuitu-inr">迪拜帆船游超值特惠</div>
            <div class="xiangxi">全国联运-迪拜帆船酒店三天三晚自由行，奢华体验 都套餐选择住帆船，做土豪，享好礼。</div>
			</div>
        </li>
        <li><img src="img/te06.jpg" alt="" />
            <div class="youhuitu-in">
			<div class="youhuitu-inl"> 优惠</div>
			<div class="youhuitu-inr">澳洲三城游超值特惠</div>
			<div class="xiangxi">澳洲三城自由行8/9天，悉尼黄金海岸布尼斯班 豪华酒店南航 广州飞不回头</div>
			</div>
        </li>
        <li><img src="img/te07.jpg" alt="" />
            <div class="youhuitu-in">
			<div class="youhuitu-inl"> 优惠</div>
			<div class="youhuitu-inr">亚德里亚海超值特惠</div>
			<div class="xiangxi">全国联运-亚德里亚自由行，奢华体验 都套餐选，做土豪，享好礼。</div>
			</div>
        </li>
        <li><img src="img/te08.jpg" alt="" />
            <div class="youhuitu-in">
			<div class="youhuitu-inl"> 优惠</div>
			<div class="youhuitu-inr">美国自由行超值特惠</div>
			<div class="xiangxi">美国自由行西岸10天7晚 自驾游全国出发一价全包含签证 全国联运7晚酒店自驾签证费全包</div>
			</div>
        </li>
    </ul>
    
</div>
<div class="yaotiao">
        <img src="img/yaotiao.jpg" alt="" />
</div>
<div class="pinpai">
    <p class="wenzi">
        品牌目的地    
    </p>
    <p class="more"><a href="#">更多>></a></p>
</div>
<div class="pinpai_in">
    <div class="pinpai_inl">
        <img src="img/pinpai_left.png" alt="" />
        <div class="pinpai_inlin">
        </div>
        <span class="pinpai_inl_span1">马尔代夫超值连线游</span>
        <span class="pinpai_inl_span2">让你一次游个够，心动不如行动吧！</span>
    </div>
    <div class="pinpai_inr">
        <ul>
            <li class="cur"><img src="img/fuzhou.jpg" alt="" />
                <span ></span>  
                <p>福州</p>     
            </li>
            <li><img src="img/libo.jpg" alt="" />
                <span></span>
                <p>荔波</p>
            </li>
            <li><img src="img/malai.jpg" alt="" />
                <span></span>
                <p>马来西亚</p>
            </li>
            <li><img src="img/rongshui.jpg" alt="" />
                <span></span>
                <p>融水</p>
            </li>
            <li><img src="img/shannan.jpg" alt="" />
                <span></span>
                <p>山南</p>
            </li>
            <li><img src="img/shilin.jpg" alt="" />
                <span></span>
                <p>石林</p>
            </li>
            <li><img src="img/shanqiu.jpg" alt="" />
                <span></span>
                <p>山丘</p>
            </li>
            <li><img src="img/xian.jpg" alt="" />
                <span></span>
                <p>西安</p>
            </li>
        </ul>
    </div>


</div>
<div class="pinpai">
    <p class="wenzi">
        出境游    
    </p>
    <p class="more"><a href="#">更多>></a></p>
</div>
<div class="chujingyou">
    <div class="chujingyou-l">
        <ul>
            <li class="li11 tututu">
                <img src="img/11.jpg" alt=""  class="img11" />
                <span>怦然心动·吉之岛</span>
                <div class="heibu1 heibu">心动吉之岛</div>
            </li>
            <li class="tututu">
                <img src="img/12.jpg" alt="" />
                <span>第一缕阳光·斐然</span>
                <div class="heibu">第一缕阳光</div>
            </li>
            <li class="tututu">
                <img src="img/13.jpg" alt="" />
                <span>马尔代夫·度蜜月</span>
                <div class="heibu">度蜜月</div>
            </li>
            <li class="li21 tututu">
                <img src="img/21.jpg" alt=""  class="img21" />
                <span>欧冠·巴塞罗那 </span>
                <div class="heibu2 heibu">巴塞罗那 </div>
            </li>
            <li class="tututu">
                <img src="img/22.jpg" alt="" />
                <span>恋爱国度·巴黎</span>
                <div class="heibu">恋爱国度</div>
            </li>
            <li class="tututu">
                <img src="img/23.jpg" alt="" />
                <span> 执子之手·希腊</span>
                <div class="heibu">执手希腊</div>
            </li>
        </ul>
    </div>

    <div class="chujingyou-r">
            <span></span>
            <img src="img/cheshow.jpg" alt="" />
            <div class="show">
                <ul>
                    <li><a href="#">【游记】致青春之旅 锡勒草原</a></li>
                    <li><a href="#">【游记】自驾重庆武隆风景区</a></li>
                    <li><a href="#">【游记】无止境之征探索未历之美</a></li>
                    <li><a href="#">【游记】骏雅新派逛古都</a></li>
                    <li><a href="#">【游记】奥迪2015国际露营大会</a></li>
                  
                </ul>
            </div>
        
    </div>
</div>
<div class="footer">
    <div class="navfoot">
   <ul>
       <li><a href="#">关于我们</a></li>
       <li><a href="#">营销服务</a></li>
       <li><a href="#">商家服务</a></li>
       <li><a href="#">新手上路</a></li>
       <li><a href="#">合作伙伴</a></li>
       <li><a href="#">关注我们</a></li>
   </ul>
   </div>
    <div class="share">
        <span class="s1"></span>
        <span class="s2"></span>
        <span class="s3"></span>
        <span class="s4"></span>
    </div>
    <div class="cl"></div>
    <p>版权所有&copy;2015 FREE TRAVEL北京随行网有限公司</p>
    <p>京ICP备11011333号 京公网安备110105007294</p>
</div>
<!-- topback -->

</body>
</html>

CSS样式代码🏡


@charset "utf-8";
/* 禁用iPhone中Safari的字号自动调整 */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
/* 去除iPhone中默认的input样式 */
input[type="submit"],

input[type="reset"],

input[type="button"],

input{-webkit-appearance:none; resize: none;}
/* 取消链接高亮  */
body,div,ul,li,ol,h1,h2,h3,h4,h5,h6,input,textarea,select,p,dl,dt,dd,a,img,button,form,table,th,tr,td,tbody,article, 
aside, details,figcaption,figure,footer,header,hgroup, menu,nav,section{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0); }
/* 设置HTML5元素为块 */
article, aside, details,figcaption,figure,footer,header,hgroup, menu,nav,section {
display: block;
}
/* 图片自适应 */
img {
max-width: 100%;
height: auto;
width:auto\9; /* ie8 */
-ms-interpolation-mode:bicubic;/*为了照顾ie图片缩放失真*/
}
/* 初始化 */
body,div,ul,li,ol,h1,h2,h3,h4,h5,h6,input,textarea,select,p,dl,dt,dd,a,img,button,form,table,th,tr,td,tbody,article, 
aside, details,figcaption,figure,footer,header,hgroup, menu,nav,section{margin:0; padding:0; border:none;}
body{font-family: '宋体',Microsoft YaHei,Tahoma,Arial,sans-serif; color:#555; background-color:#F7F7F7;}
em,i{font-style:normal;}
strong{font-weight: normal;}
.clearfix:after{content:""; display:block; visibility:hidden; height:0; clear:both;}
.clearfix{zoom:1;}
a{text-decoration:none; color:#969696; font-family: '宋体',Microsoft YaHei,Tahoma,Arial,sans-serif;}
a:hover{color:#FED503; text-decoration:none;}
ul,ol{list-style:none;}
h1, h2, h3, h4, h5, h6{ font-size:100%; font-family: Microsoft YaHei;}
img{border: none;}
.scope{min-width:320px; max-width:640px;}

 /* 400 以下   400  -  480 一档  480 以上的是一档  */
 

 @media screen and (max-width:399px)
 {
 	html{
 		font-size: 15px;
 	}
 }
 @media (min-width: 400px) and (max-width: 480px)
 {
 	html{
 		font-size: 20px;
 	}
 }
 @media screen and (min-width: 481px)
 {
 	html{
 		font-size: 25px;
 	}
 }

.box-width-css{
	width: 100%;
	overflow: hidden;
}
.font1{
	font-size: 0.72rem;
}

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

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

七、实训总结😊

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

八、更多干货🎁

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

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

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

二挡起步

关注

37
点赞
踩
140

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS网页制作成品—— html+css+javascript 绿色的随行旅游网页设计实例企业网站制作

👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 🏀 精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥
复制链接

扫一扫