- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

web前端期末大作业——基于html+css+javascript+jquery+bootstarp响应式的出国旅游定制公司官网

IT司马青衫发表于 2022/08/13 17:36:09 2022/08/13

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

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

@TOC

一、网站题目👨‍🎓

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

二、网站描述✍️

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

三、网站介绍📖

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

网站程序方面：计划采用最新的网页编程语言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 lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>蓝精灵旅游</title>
    
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/swiper.min.css" rel="stylesheet">
    <link href="css/htmleaf-demo.css" rel="stylesheet">
    <link href="css/bootstrap-datepicker3.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

</head>
<body>

<div class="blueDialog"></div>

<!-- header start -->
<header>
    <div class="container-fluid header">
        <div class="row">
            <div class="col-md-2 col-xs-4">
                <a class="logo" href="javascript:;"><img src="img/logo.png" alt=""></a>
            </div>
            <div class="col-md-8 col-xs-8 col-md-offset-2 text-right">
                +010 8476 6802
                <button class="btn btn-lan" data-lan="1">En</button>
                <a href="javascript:;" class="btn btn-custom" data-toggle="modal" data-target="#testModal">一键定制</a>
            </div>
        </div>
    </div>
    
    <!-- nav start -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <div class="blue_nav">
                    <ul class="nav navbar-nav col-md-12 col-sm-12">
                        <li class="col-md-nav"><a href="#">首页</a></li>
                        <li class="col-md-nav dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true" aria-expanded="false">
                                目的地 <span class="glyphicon glyphicon-menu-down"></span>
                            </a>
                            <ul class="dropdown-menu dropdown-list">
                                <div class="dropdown-list-bg"></div>
                                <li class="dropdown-item col-md-nav col-xs-4">
                                    <dl>
                                        <dt class="color-1">非洲</dt>
                                        <dd><a href="#">乌干达</a></dd>
                                        <dd><a href="#">肯尼亚</a></dd>
                                        <dd><a href="#">南非</a></dd>
                                        <dd><a href="#">博茨瓦纳</a></dd>
                                        <dd><a href="#">纳美比亚</a></dd>
                                        <dd><a href="#">赞比亚</a></dd>
                                        <dd><a href="#">摩洛哥</a></dd>
                                    </dl>
                                </li>
                                <li class="dropdown-item col-md-nav col-xs-4">
                                    <dl>
                                        <dt class="color-2">亚洲</dt>
                                        <dd><a href="#">中国</a></dd>
                                        <dd><a href="#">越难</a></dd>
                                        <dd><a href="#">缅甸</a></dd>
                                        <dd><a href="#">泰国</a></dd>
                                        <dd><a href="#">老挝</a></dd>
                                        <dd><a href="#">不丹</a></dd>

            <div class="col-md-4 col-xs-12">
                <div class="blue_footer_title">联系我们</div>
                <div class="blue_footer_tel">
                    <p>地址: 北京市朝阳区望京园402号楼<br>东亚望京中心B座3802</p>
                    <p>电话: +86-010-8476-6802</p>
                    <p>邮箱: contactus@bluespiritvoyages.com</p>
                </div>
            </div>
        </div>
        <div class="row blue_link">
            <div class="col-md-8 col-xs-12">
                <div class="blue_footer_link">
                    <a href="#"><img src="img/link-logo.png" alt=""></a>
                </div>
                <div class="blue_footer_link">
                    <a href="#"><img src="img/link-logo.png" alt=""></a>
                </div>
                <div class="blue_footer_link">
                    <a href="#"><img src="img/link-logo.png" alt=""></a>
                </div>
                <div class="blue_footer_link">
                    <a href="#"><img src="img/link-logo.png" alt=""></a>
                </div>
            </div>
            <div class="col-md-4 col-xs-6 blue_code">
                <div class="col-md-3 col-xs-12">
                    <img src="img/code_1.jpg" alt="">
                    <p>官方公众号</p>
                    <p>Blue Spirit</p>
                </div>
                <div class="col-md-3 col-xs-6">
                    <img src="img/code_2.jpg" alt="">
                    <p>官方微博</p>
                    <p>@Blue Spirit</p>
                </div>
            </div>
        </div>
    </div>
</footer>

<section class="blue_copy">
    <div class="container">© 2017 YOUR COMPANY. DESIGNED BY EVEN DESIGN STUDIO</div>
</section>



<!-- 预订 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabe1">&nbsp;</h4>
            </div>
            <div class="modal-body blue_model_submit blue_modal_hotel">
                <div class="row">
                    <div class="col-md-8 col-xs-12 col-md-offset-2">
                        <div class="blue_model_submit_title">
                            <p><span>用户申请预订</span></p>
                            <p>除姓名、电话、邮箱外，其他所有信息将为您保存</p>
                        </div>
                        <div class="row blue_model_submit_line">
                            <div class="col-md-4 col-xs-4 text-right">
                                <span>*</span>姓名：
                            </div>
                            <div class="col-md-8 col-xs-8">
                                <input class="form-control" type="text" placeholder="ep:陈某某">
                            </div>
                        </div>
                        <div class="row blue_model_submit_line">
                            <div class="col-md-4 col-xs-4 text-right">
                                <span>*</span>电话：
                            </div>
                            <div class="col-md-8 col-xs-8">
                                <input class="form-control" type="text" placeholder="ep:13120529630">
                            </div>
                        </div>
                        <div class="row blue_model_submit_line">
                            <div class="col-md-4 col-xs-4 text-right">
                                <span>*</span>邮箱：
                            </div>
                            <div class="col-md-8 col-xs-8">
                                <input class="form-control" type="text" placeholder="ep:52961637@qq.com">
                            </div>
                        </div>
                        <div class="row blue_model_submit_line">
                            <div class="col-md-4 col-xs-4 text-right">
                                <span>*</span>旅行日期：
                            </div>
                            <div class="col-md-8 col-xs-8">
                                <div class="input-group date datepicker">
                                    <input type="text" class="form-control" placeholder="ep:2017年11月15号">
                                    <div class="input-group-addon">
                                        <span class="glyphicon glyphicon-th "></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row blue_model_submit_line">
                            <div class="col-md-4 col-xs-4 text-right">
                                <span>*</span>预计入住天数：
                            </div>
                            <div class="col-md-8 col-xs-8">
                                <input class="form-control" type="text" placeholder="ep:7天">
                            </div>
                        </div>
                        <div class="row blue_model_submit_line">
                            <div class="col-md-4 col-xs-4 text-right">
                                <span>*</span>旅行人数：
                            </div>
                            <div class="col-md-8 col-xs-8">
                                <div class="input-group blue_sel_group">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-default btn-text">成人</button>
                                        <button type="button" class="btn btn-default dropdown-toggle btn-icon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="glyphicon glyphicon-menu-down blue_sel_icon"></span>
                                            <span class="sr-only">Toggle Dropdown</span>
                                        </button>
                                        <ul class="dropdown-menu blue_sel_option">
                                            <li><a href="javascript:void(0);">1</a></li>
                                            <li><a href="javascript:void(0);">2</a></li>
                                            <li><a href="javascript:void(0);">3</a></li>
                                            <li><a href="javascript:void(0);">4</a></li>
                                        </ul>
                                    </div>
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-default btn-text">儿童</button>
                                        <button type="button" class="btn btn-default dropdown-toggle btn-icon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="glyphicon glyphicon-menu-down blue_sel_icon"></span>
                                            <span class="sr-only">Toggle Dropdown</span>
                                        </button>
                                        <ul class="dropdown-menu blue_sel_option">
                                            <li><a href="javascript:void(0);">1</a></li>
                                            <li><a href="javascript:void(0);">2</a></li>
                                            <li><a href="javascript:void(0);">3</a></li>
                                            <li><a href="javascript:void(0);">4</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row blue_model_submit_line">
                            <div class="col-md-4 col-xs-4 text-right">
                                其他信息：
                            </div>
                            <div class="col-md-8 col-xs-8">
                                <textarea class="form-control" name="" id=""></textarea>
                            </div>
                        </div>
                        <div class="row blue_model_submit_line">
                            <div class="col-md-4 col-xs-4 col-md-offset-4 col-xs-offset-4">
                                <button class="btn btn_country btn_hotel">提交</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/bootstrap-datepicker.zh-CN.min.js" charset="UTF-8"></script>
<script>
    $(function(){
        $('.datepicker').datepicker({
            language: 'zh-CN'
        });
    })
</script>
<script src="js/page.js"></script>
<script src="js/dialog.js"></script>
</body>
</html>

CSS样式代码🏡


@charset "utf-8";
* {
    font-family: "Microsoft YaHei",'微软雅黑';
}

button, input, textarea {
    outline: none;
}

img {
    width: 100%;
    height: auto;
    border: none;
}

ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.p0{
    padding-left: 0;
    padding-right: 0;
}
.fz14{
    font-size: 14px;
}

.header {
    background: #374356;
    padding: 8px 15px;
    color: #cccccc;
    line-height: 40px;
    font-size: 14px;
}

.logo img {
    width: auto;
    max-height: 40px;
}

header .btn {
    min-height: 40px;
    line-height: 40px;
    padding: 0 15px;
}

header .btn-lan {
    display: none;
    background: #414d60;
    color: #cccccc;
    margin: 0 10px;
    font-size: 14px;
}

header .btn-lan:hover {
    background: #343d4c;
    color: #cccccc;
}

header .btn-custom {
    display: inline-block;
    background: #c19b76;
    color: #FFFFFF;
    font-size: 12px;
    padding: 0 25px;
    width: 160px;
}

header .btn-custom:hover {
    background: #ad8c69;
}

.input_search {
    border-right: none;
    font-size: 14px;
    padding-left: 20px;
}

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

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

七、实训总结😊

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

八、更多干货🎁

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

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

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥!

💂【获取方式】

gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

web前端期末大作业——基于html+css+javascript+jquery+bootstarp响应式的出国旅游定制公司官网

一、网站题目👨‍🎓

二、网站描述✍️

三、网站介绍📖

四、网站效果🌐

五、网站代码制作部分 📕

HTML结构代码🧱

CSS样式代码🏡

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

七、实训总结😊

八、更多干货🎁

💂【获取方式】

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

web前端期末大作业——基于html+css+javascript+jquery+bootstarp响应式的出国旅游定制公司官网

一、网站题目👨‍🎓

二、网站描述✍️

三、网站介绍📖

四、网站效果🌐

五、网站代码制作部分 📕

HTML结构代码🧱

CSS样式代码🏡

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

七、实训总结😊

八、更多干货🎁

💂【获取方式】

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品