一个简单的WEB网页制作作业——黑色的山河旅行社网站(5个页面)HTML+CSS+JavaScript

最新推荐文章于 2023-04-16 11:26:06 发布
最新推荐文章于 2023-04-16 11:26:06 发布
阅读量503 收藏 9
点赞数 1
分类专栏： html5期末大作业 文章标签： web前端 web前端期末大作业 网页设计 网页作业
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wx_365392777/article/details/128478323
版权

👨‍🎓学生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>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>山河旅行社</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header id="header">

    <div class="center">
        <h1 class="logo">山河旅行社</h1>
        <nav class="link" >
            <h2 style="display:none;">网站导航</h2>
            <ul>
                <li class="active"><a href="###">首页</a></li>
                <li><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li>
                <li><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li>
                <li class="xs-hidden"><a href="scenery.html">风景欣赏</a></li>
                <li><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li>
            </ul>
        </nav>
    </div>
</header>
<div id="adver">
    <img src="picture/adver.jpg" alt="">
    <div class="center"></div>
    <div class="center copy">
        <input type="text" class="search" placeholder="请输入旅游景点或城市">
        <button class="button">搜索</button>
    </div>
</div>
<div id="tour">
    <section class="center ">
        <h2>热门旅游</h2>
        <p>国内旅游，国外旅游、自助旅游、自驾旅游、游轮签证、主题旅游等各种最新热门旅游推介</p>
    </section>
    <figure>
        <img src="picture/tour1.png" alt="">
        <figcaption>
            <div class="tour_title">
            <strong>&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
            </div>
            <div class="info">
                <em class="sat">满意度97%</em>
                <span class="price"> ￥<strong> 2864</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figcaption>

    </figure>
    <figure>
        <img src="picture/tour2.png" alt="">
        <figcaption>
            <div class="tour_title">
            <strong>&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
            </div>
                <div class="info">
                <em class="sat">满意度97%</em>
                <span class="price"> ￥<strong> 2864</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figcaption>
    </figure>
    <figure>
        <img src="picture/tour3.png" alt="">
        <figcaption>
            <div class="tour_title">
            <strong>&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
            </div>
                <div class="info">
                <em class="sat">满意度97%</em>
                <span class="price"> ￥<strong> 2864</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figcaption>
    </figure>
    <figure>
        <img src="picture/tour4.png" alt="">
        <figcaption>
            <div class="tour_title">
            <strong>&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
            </div>
            <div class="info">
                <em class="sat">满意度97%</em>
                <span class="price"> ￥<strong> 2864</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figcaption>

    </figure>
    <figure>
    <img src="picture/tour5.png" alt="">
    <figcaption>
        <div class="tour_title">
        <strong>&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
        </div>
            <div class="info">
            <em class="sat">满意度97%</em>
            <span class="price"> ￥<strong> 2864</strong> 起</span>
        </div>
        <div class="type">国内长线</div>
    </figcaption>
</figure>
    <figure>
        <img src="picture/tour6.png" alt="">
        <figcaption>
            <div class="tour_title">
            <strong>&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
            </div>
            <div class="info">
                <em class="sat">满意度97%</em>
                <span class="price"> ￥<strong> 2864</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figcaption>
    </figure>
    <figure>
        <img src="picture/tour7.png" alt="">
        <figcaption>
            <div class="tour_title">
            <strong>&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
            </div>
            <div class="info">
                <em class="sat">满意度97%</em>
                <span class="price"> ￥<strong> 2864</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figcaption>
    </figure>
    <figure>
        <img src="picture/tour8.png" alt="">
        <figcaption>
            <div class="tour_title">
            <strong>&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
            </div>
            <div class="info">
                <em class="sat">满意度97%</em>
                <span class="price"> ￥<strong> 2864</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figcaption>
    </figure>
    <figure>
        <img src="picture/tour9.png" alt="">
        <figcaption>
            <div class="tour_title">
            <strong>&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
            </div>
            <div class="info">
                <em class="sat">满意度97%</em>
                <span class="price"> ￥<strong> 2864</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figcaption>

    </figure>
</div>
<footer id="footer">
    <div class="top sm-hidden">
        <div class="block left">
            <h2>合作伙伴</h2>
            <hr>
            <ul class="ul">
                <li>途牛旅游网</li>
                <li>驴妈妈旅游网</li>
                <li>携程旅游</li>
                <li>中国青年旅社</li>
            </ul>
        </div>

        <div class="block center">
            <h2>旅游FAQ</h2>
            <hr>
            <ul class="ul">
                <li>旅游合同签订方式？</li>
                <li>儿童价是基于什么制定的？</li>
                <li>旅游的线路品质是怎么界定的？</li>
                <li>旅游保险有些什么种类？</li>
            </ul>
        </div>
        <div class="block right">
            <h2>联系方式</h2>
            <hr>
            <ul class="ul">
                <li>微博：weibo.com/maodo</li>
                <li>邮件：sh@maodou.com</li>
                <li>地址：西安市雁塔区123号</li>
            </ul>
        </div>
    </div>
    <div class="chearfix"></div>
    <div class="version sm-visible">
        客户端 | 触屏版 | 电脑版
    </div>
    <div class="bottom">Copyright © SHMD 山河旅行社| 陕ICP 备120110119 号<span class="sm-hidden">| 旅行社经营许可证：L-SH-BK12345</span></div>
</footer>

</body>
</html>

CSS样式代码🏡


@charset "utf-8";
body,h1,h2 ,h3,h4,ul,ol,p,form,fieldset,figure{
    margin:0;
    padding:0;
}
body{
    background-color: #fff;
    font-family: "Helvetica Neue",Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
}
img{
    display:block;
    max-width:100%;
}
ul,ol{
    list-style:outside none none;
}
a{
    text-decoration:none;
}
div,figure,img,input,button{
    box-sizing:border-box;
}
#headline img{
	width:100%;
}
.none {
    display: none;
}
.sm-visible{
    display:none;
}
.clearfix:after{
    content:'.';
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}
#header{
    width:100%;
    height:70px;
    background-color:#333;
    box-shadow: 0 1px 10px rgba(0 ,0 ,0,0.3);
    position:fixed;
    top:0;
    z-index:9999;
}
#header .center{
    max-width:1263px;
    height:70px;
    margin:0 auto;
}
#header .logo{
    width:30%;
    height:70px;
    background:url(../images/logo.png) no-repeat left center;
    text-indent:-9999px;
    float:left;
}
#header .link{
    width:55%;
    height:70px;
    line-height:70px;
    color:#aaaaaa;
    float:right;
}
#header .link li{
    width:20%;
    text-align:center;
    float:left;
}
#header .link  a {
    color:#eeeeee;
    display: block;
}
#header .link a:hover, #header .active a{
    background-color:#000;
}

#adver{
    padding:70px 0 0 0;
    max-width:1920px;
    margin:0 auto;
    position:relative;
}
#adver .center{
    width:40%;
    height:60px;
    background-color:#000000;
    position:absolute;
    top:50%;
    left:50%;
    margin:-10px 0 0 -20%;
    opacity:0.6;
    border-radius: 10px;
}

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

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

七、实训总结😊

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

八、更多干货🎁

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

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

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

dw静态网页设计
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
网页设计期末作业-导航小站
07-25
网页设计期末作业-导航小站，包含各种资源的导航，点击即可进去，包含设计文档，详细情况请看我的文章介绍。
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
热门推荐
HTML网页设计
10-03 21万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
Web入门(1)——制作简单的网页
WMX_0121的博客
03-04 1万+
Web开发基础知识学习笔记。
web程序设计（１）——制作个人静态网页
weixin_44164249的博客
01-10 1万+
实验要求 模仿 http://ccs.scu.edu.cn/jscc/201610/84.html创建一个个人主页，要求： 有照片； 有表格； 有列表； 有超级链接 实验目的 熟悉掌握html的标签使用（添加图片，表格，列表和超链接等）
使用HTML+CSS制作一个简单的网页
m0_57423785的博客
11-25 1万+
简单学习了一下HTML和CSS，制作了下面这个网页（第一次做还在学习中），里面包含一些基础的布局包括导航条、分页栏、悬浮列表等内容。
html旅游网站设计与实现——绿色古典旅游景区 HTML+CSS+JavaScript
HTML网页设计
07-29 3万+
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的...
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
HTML网页设计 专注大学生网页设计
09-18 5万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
HTML期末设计——代码篇
greengirl5的博客
06-22 12万+
事先声明 这个网页设计也就是用了我学到的知识做的一个中规中矩的网页，可以给以后的大一新生们做个参考，和商业网站的效果肯定是没得比的，期望太高的可以关掉了 引入页 效果图： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>欢迎来到香氛密语</title> <style>
网页制作基础学习——HTML+CSS常用代码
北辰的博客
02-01 3万+
HTML（HyperText Markup Language）,即超文本标记语言，是用于描述网页文档的一种描述标记语言。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
web期末大作业--网页设计 HTML+CSS+JS（附源码）
qq_63644501的博客
04-16 4万+
作品介绍：该作品是一个是一个关于影视作品的网页，一共有五个页面，主页，最新，排行，我的，联系我们。
一个简单的WEB网页制作作业——黑色的山河旅行社网站(5个页面)HTML+CSS+JavaScript.md.zip
01-12
一个简单的WEB网页制作作业——黑色的山河旅行社网站(5个页面)HTML+CSS+JavaScript.md.zip
HTML-响应式山河旅行社网站-网站网页H5源码.zip
03-03
这套HTML源代码文件为您呈现了一款多功能的网页模板，旨在满足各类网站开发需求。借助前沿的HTML5和CSS3技术，该模板不仅具备了响应式设计，以确保无缝适配各式设备，还内置了众多JavaScript插件，以实现高级的交互...
响应式山河旅行社网站-html项目源码
01-07
《响应式山河旅行社网站》是一份精心制作的旅行社网站模板，专为旅游行业设计。它采用了响应式布局，适应各种设备和屏幕尺寸，确保在电脑、平板和手机上都能获得良好的用户体验。 该网站的设计简洁大方，色彩搭配...
计科考查课——图形学大作业.zip
01-09
图形学大作业----内容 一、主菜单的菜单项 基本图形绘制、图形变换、自由曲线绘制、图形裁剪、图形填充 二、二级子菜单（基本图形绘制） 1.直线绘制： 1）Bresenham绘制直线 2）DDA绘制直线 3）改进的Bresenham绘制...
IEC 60364-7-722-2018 低压电气装置.第7-722部分：特殊装置或场所的要求.电动车辆的电源.pdf
05-06
IEC 60364-7-722-2018 低压电气装置.第7-722部分：特殊装置或场所的要求.电动车辆的电源.pdf
eNSP软件安装及拓扑结构搭建.docx
最新发布
05-06
、eNSP的安装 1．安装eNSP之前必须先安装以下三个插件： VirtualBox WinPcap Wireshack eNSP作为模拟器主体，需要对应版本的VirtualBox和WinPcap提供虚拟环境，Wireshack用于实验当中测试抓取数据包使用。 安装好这三个插件，只需要点下一步选择好对应的安装位置即可，然后就可以安装eNSP软件了。 eNSP的页面
vmware虚拟机安装教程
05-06
附件是vmware虚拟机安装教程，文件绿色安全，请大家放心下载，仅供交流学习使用，无任何商业目的！
大屏网站粒子效果实现方式
05-06
大屏网站粒子效果实现方式
旅行社网站设计html
11-21
旅行社网站设计HTML主要包括HTML、CSS和JavaScript三个部分。HTML负责网页的结构和内容，CSS负责网页的样式和布局，JavaScript负责网页的交互和动态效果。 一个基本的旅行社网站设计HTML包括以下几个页面： 1.首页...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值