• HTML+CSS大作业：旅游网页设计与实现——旅游风景网站6页HTML+CSS+JavaScript实训大作业 HTML+CSS大作业 HTML期末大作业

    👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。

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

    💝 【作者主页——🔥获取更多优质源码】
    💝 【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="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>旅游title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
        .ban{
            width: 1200px;
            margin: auto;
        }
        a{
            padding: 0 20px;
            color: #000;
            text-decoration: none;
        }
        .search {
            height: 100px;
            text-align: center;
        }
        .search-ipt input {
            width: 520px;
            height: 40px;
            padding-left: 16px;
            border: 1px solid #ffb923;
        }
        .search-btn {
            width: 80px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #FFF;
            background: #ffb923;
            display: inline-block;
        }
        .enume .active {
            color: #ffb923;
        }
        .tab{
            border-bottom:2px solid #ffb923;
            margin-bottom: 20px;
        }
        .content{
            height: 400px;
            margin-bottom: 40px;
        }
    style>
head>

<body>
    <div class="header">
        <b>旅游为你提供本地服务b>                                                                            
        <a class="item" href="">主页a>
        <a class="item" href="list.html">热门旅游地a>
        <a class="item" href="detail.html">详情a>
        <a class="item" href="share.html">旅游分享a>
        <a class="item" href="cart.html">我的收藏a>
        <a class="item" href="form.html">在线预定a>
        
    div>
    <div class="search">
        <div class="search-ipt">
            <input type="text" placeholder="请输入你想去的地方">
            <div class="search-btn">搜索div>
        div>
        <div class="enume">
            <span class="active">梅里雪山span>
            <span>洱海span>
            <span class="active">首尔span>
            <span>纽约span>
            <span>阿尔卑斯山span>
        div>
    div>
    <img width="100%" height="420" src="picture/ban2.jpeg" alt="">
    <div class="tab ban">
        <div style="width: 272px;display: inline-block;"><h2>目的地h2>div>
        <div style="width: 60px;padding:16px;background: #ffb923;color:#fff;display: inline-block;">欧洲div>
        <div style="width: 60px;padding:16px;display: inline-block;">亚洲div>
        <div style="width: 60px;padding:16px;display: inline-block;">北美洲div>
        <div style="width: 60px;padding:16px;display: inline-block;">非洲div>
    div>
    <div class="content ban">
        <div style="width:210px;padding:10px;border: 1px solid #ddd;float: left;" class="content-item">
            <h3>推荐目的地h3>
            <a style="display: inline-block; padding: 12px 20px;" href="#">法国a>
            <a style="display: inline-block; padding: 12px 20px;" href="#">英国a>
            <a style="display: inline-block; padding: 12px 20px;" href="#">比利时a>
            <a style="display: inline-block; padding: 12px 20px;" href="#">德国a>
            <a style="display: inline-block; padding: 12px 20px;" href="#">瑞士a>
            <a style="display: inline-block; padding: 12px 20px;" href="#">意大利a>
            <a style="display: inline-block; padding: 12px 20px;" href="#">爱尔兰a>
            <a style="display: inline-block; padding: 12px 20px;" href="#">西班牙a>
            <a style="display: inline-block; padding: 12px 20px;" href="#">梵蒂冈a>
            <a style="display: inline-block; padding: 12px 20px;" href="#">冰岛a>
            <a style="display: inline-block; padding: 12px 20px;" href="#">挪威a>
        div>
        <table width="940" style="float: right; text-align: center;">
            <tr height="190">
                <td width="310">
                    <img width="200" height="120" src="picture/egypt.jpg" alt="">
                    <p>纯玩 埃及8天神秘之旅p>
                    <p class="gray"><span class="price">6499span>起<p>
                p>td>
                <td width="310">
                    <img width="200" height="120" src="picture/x1.jpg" alt="">
                    <p>畅游东西欧 12晚15天p>
                    <p><span class="price">9999span>起p>
                td>
                <td width="310">
                    <img width="200" height="120" src="picture/s.jpg" alt="">
                    <p>舒享德法意瑞、五渔村
                    <p><span class="price">11999span>起p>
                td>
                <td width="310">
                    <img width="200" height="120" src="picture/t.jpg" alt="">
                    <p>土耳其10天蓝色浪漫之旅p>
                    <p><span class="price">7499span>起p>
                td>
            tr>
            <tr height="190">
                <td>
                    <img width="200" height="120" src="picture/x1.jpg" alt="">
                    <p>畅游东西欧 12晚15天p>
                    <p><span class="price">9999span>起p>
                td>
                <td>
                    <img width="200" height="120" src="picture/s.jpg" alt="">
                    <p>舒享德法意瑞、五渔村、比萨p>
                    <p><span class="price">11999span>起p>
                td>
                <td>
                    <img width="200" height="120" src="picture/t.jpg" alt="">
                    <p>土耳其10天蓝色浪漫之旅p>
                    <p><span class="price">7499span>起p>
                td>
                <td>
                    <img width="200" height="120" src="picture/img1.jpeg" alt="">
                    <p>法国南部蓝色海岸线蔚蓝风情p>
                    <p><span class="price">6519span>起p>
                td>
            tr>
        table>
    div>
   
    <div class="foot ban">
        <table>
            <tr>
                <td width="200">
                    <h3>新手指南h3>
                td>
                <td width="200">会员注册/登录td>
                <td width="200">会员章程td>
                <td width="200">隐私政策td>
                <td width="200">预订流程td>
                <td width="200">在线预订条款td>
            tr>
            <tr>
                <td>
                    <h3>签约及发票制度h3>
                td>
                <td>门市签约td>
                <td>线上签约td>
                <td>发票制度td>
                <td>td>
                <td>td>
            tr>
            <tr>
                <td>
                    <h3>支付方式h3>
                td>
                <td>在线支付td>
                <td>门市现付td>
                <td>银行汇款td>
                <td>td>
                <td>td>
            tr>
            <tr>
                <td>
                    <h3>售后服务h3>
                td>
                <td>退款方式td>
                <td>订单查询td>
                <td>订单变更及取消td>
                <td>td>
                <td>td>
            tr>
            <tr>
                <td>
                    <h3>旅资讯h3>
                td>
                <td>旅游贴士td>
                <td>旅官方微博td>
                <td>旅会员刊物td>
                <td>td>
                <td>td>
            tr>
        table>
        <div style="margin: 20px 0;text-align: center;">
            联系我们：service@cits.com.cn | 咨询热线：400-600-8888
        div>
    div>
body>

html>



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218

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

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

    七、实训总结😊

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

    八、更多干货🎁

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

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

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

  • 相关阅读:
    基于JAVA基于Web的社区商超系统的设计与实现计算机毕业设计源码+系统+mysql数据库+lw文档+部署
    心律守护 基于机器学习的心脏病预测
    tictoc 例子理解 13-15
    【BOOST C++ 13 并行编程】（5） Boost.Atomic
    Vue编程式路由导航
    「UG/NX」Block UI 指定坐标SpecifyCSYS
    tornado开发的页面跳转到微信小程序
    服务器带宽与家用带宽的区别
    十一、DS18B20温度传感器
    无人零售与传统便利店的竞争优势
  • 原文地址：https://blog.csdn.net/VX_WJ88950106/article/details/128143394