菜单 搜索
首页 前端知识 web前端期末大作业——基于html css javascript jquery bootstarp响应式的出国旅游定制公司官网 (17页)

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

2024-02-13 10:02:24 前端知识 前端哥 885 302 我要收藏

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

🏀 精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【作者主页——🔥获取更多优质源码】

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

❤ 【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.

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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/1958.html
标签
课程设计dreamweaver
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

python用requests的post提交data数据以及json和字典的转换

2024-08-12 10:08:46

如何设置vscode编辑器代码格式化(settings.json)

2024-08-12 10:08:43

AE、Lottie、JSON简单介绍

2024-08-12 10:08:42

VSCode配置settings.json

2024-08-12 10:08:42

通过node脚本读取app.json路径对应的页面标题记录

2024-08-12 10:08:42

MySQL JSON_TABLE 功能详解与实战应用【含代码示例】

2024-08-12 10:08:41

JSON 格式说明

2024-08-12 10:08:34

2024年最全数据中快速查找和提取的强大工具 JSON_提取json数据里的值,性能，软件测试开发应该了解的Binder原理

2024-08-12 10:08:32

UNI-APP_getLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json

2024-08-12 10:08:28

npm‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。

2024-08-12 10:08:28

大家推荐的文章
1

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
2

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
3

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
4

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
5

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
6

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
7

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
8

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
9

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
10

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！