web前端网页设计与制作：HTML+CSS旅游网页设计——桂林旅游(3页) web前端旅游风景网页设计与制作 div静态网页设计

web学生网页设计

于 2024-06-11 14:36:04 发布

阅读量329

点赞数 3

分类专栏： web前端文章标签： css dreamweaver html html5期末作业

本文链接：https://blog.csdn.net/m0_73081085/article/details/127742801

版权

web前端专栏收录该内容

2220 篇文章 139 订阅

订阅专栏

👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,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 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">
    <link rel="stylesheet" href="basic.css">
    <link rel="stylesheet" href="style.css">
    <title>PC端网页布局</title>
</head>
<body>
    <header id="header">
        <div class="center">
            <h1 class="logo">桂林旅行社</h1>
            <nav class="link">
                <h1 class="none">网站导航</h1>
                <ul>
                    <li class="active"><a href="index.html">首页</li></a>
                    <li><a href="information.html">旅游资讯</li></a>
                    <li><a href="booking.html">机票订购</li></a>
                    <li><a href="#">风景欣赏</li></a>
                    <li><a href="#">公司简介</li></a>
                </ul>
            </nav>
        </div>
        
    </header>

    <div id="search">
        <div class="center"></div>
        <input type="text" class="search" placeholder="请输入景点或城市"></input>
        <button class="button">搜索</button>
    </div>
    <div id="tour">
        <section class="center">
            <h2>热门旅游</h2>
            <p>国内旅游、国外旅游各种旅游。。。</p>
        </section>
        <figure>
            <img src="./img/tour1.jpg" alt="">
            <figcaption><strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong>抱团特惠，超丰富景点，升级1晚国五，五自费更赠送600元/成人自费卷</figcaption>
            <div class="info">
                <em class="sat">满意度 77%</em>
                <span class="price">¥ <strong>2864元</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figure>
        <figure>
            <img src="./img/tour2.jpg" alt="">
            <figcaption><strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong>抱团特惠，超丰富景点，升级1晚国五，五自费更赠送600元/成人自费卷</figcaption>
            <div class="info">
                <em class="sat">满意度 77%</em>
                <span class="price">¥ <strong>2864元</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figure>
        <figure>
            <img src="./img/tour3.jpg" alt="">
            <figcaption><strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong>抱团特惠，超丰富景点，升级1晚国五，五自费更赠送600元/成人自费卷</figcaption>
            <div class="info">
                <em class="sat">满意度 77%</em>
                <span class="price">¥ <strong>2864元</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figure>
        <figure>
            <img src="./img/tour4.jpg" alt="">
            <figcaption><strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong>抱团特惠，超丰富景点，升级1晚国五，五自费更赠送600元/成人自费卷</figcaption>
            <div class="info">
                <em class="sat">满意度 77%</em>
                <span class="price">¥ <strong>2864元</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figure>
        <figure>
            <img src="./img/tour5.jpg" alt="">
            <figcaption><strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong>抱团特惠，超丰富景点，升级1晚国五，五自费更赠送600元/成人自费卷</figcaption>
            <div class="info">
                <em class="sat">满意度 77%</em>
                <span class="price">¥ <strong>2864元</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figure>
        <figure>
            <img src="./img/tour6.jpg" alt="">
            <figcaption><strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong>抱团特惠，超丰富景点，升级1晚国五，五自费更赠送600元/成人自费卷</figcaption>
            <div class="info">
                <em class="sat">满意度 77%</em>
                <span class="price">¥ <strong>2864元</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figure>
        <figure>
            <img src="./img/tour7.jpg" alt="">
            <figcaption><strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong>抱团特惠，超丰富景点，升级1晚国五，五自费更赠送600元/成人自费卷</figcaption>
            <div class="info">
                <em class="sat">满意度 77%</em>
                <span class="price">¥ <strong>2864元</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figure>
        <figure>
            <img src="./img/tour8.jpg" alt="">
            <figcaption><strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong>抱团特惠，超丰富景点，升级1晚国五，五自费更赠送600元/成人自费卷</figcaption>
            <div class="info">
                <em class="sat">满意度 77%</em>
                <span class="price">¥ <strong>2864元</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figure>
        <figure>
            <img src="./img/tour9.jpg" alt="">
            <figcaption><strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong>抱团特惠，超丰富景点，升级1晚国五，五自费更赠送600元/成人自费卷</figcaption>
            <div class="info">
                <em class="sat">满意度 77%</em>
                <span class="price">¥ <strong>2864元</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figure>
    </div>

    <footer id="footer">
        <div class="top">
            <div class="block left">
                <h2>合作伙伴</h2>
                <hr>
                <ul>
                    <li>途牛旅游网</li>
                    <li>驴妈妈旅游网</li>
                    <li>携程旅游</li>
                    <li>中国青年旅行社</li>
                </ul>
            </div>
            <div class="block center">
                <h2>旅游FAQ</h2>
                <hr>
                <ul>
                    <li>旅游合同签订有哪些？</li>
                    <li>儿童票有半价优惠吗？</li>
                </ul>
            </div>
            <div class="block right">
                <h2>联系方式</h2>
                <hr>
                <ul>
                    <li>微博: weibo.com/zzz</li>
                    <li>邮件: lhk2@163.com</li>
                    <li>地址: 广西桂林</li>
                </ul>
            </div>
        </div>
        <div class="bottom">Copyright © 桂林旅行社|桂ICP备19011111号|旅行社许可证:xxxxxxx</div>
    </footer>
</body>
</html>
<!-- https://gsnedders.html5.org/outliner/ 大纲算法验证网址 -->
<!-- body section nav 需要标题
div header 不需要标题 
nav 只放 ol ul元素
用display=none; 隐藏大纲文字，避免破坏网页布局
-->

CSS样式代码🏡

@charset "utf-8";

body,h1,h2,h3,ul,p,figure{
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
}

ul{
    list-style: none outside none ;
}

#header {
    width: 100%; /* 撑开整行 */
    min-width: 1263px;
    height: 70px;
    background-color: #333;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 999;
}

#header .center {
    width: 1263px;
    height: 70px;
    /* background-color: red; */
    margin: 0 auto;
}

#header .logo {
    width: 240px;
    height: 70px;
    /* background-color: white; */
    background-image: url('./img/logo.png');
    text-indent: -9999px;
    float: left; /* 图片在左 */
}

#header .link{
    /* background-color: red; */
    color: #eee;
    height: 70px;
    line-height: 70px; /* 设置height和line-height 文字垂直居中对齐 */
    float: right; /* 导航在右 */
    width: 650px;
}

#header .link li{
    width: 120px;
    text-align: center;
    float: left; /* 导航项在一行 */
}

#header  .link a{
    color: #eee;
    /* background-color: red; */
    display: block;
}

#header  .link a:hover,
#header  .active a{
    background-color: #000;
}

.none{
    display: none;
}


#footer{
    height: 360px;
    background-color: #222;
    /* 避免footer插入到containter下面 */
    clear: both;
    /* 设置成相对布局,在原位置的基础上用top向下偏移10像素 */
    position: relative;
    top: 20px;
}

#footer .top{
    width: 1263px;
    height: 280px;
    background-color: #222;
    margin: 0 auto;
    text-align: center;
}

#footer .block{
    width: 410px;
    height: 280px;
    /* background-color: blue; */
    display: inline-block;
    text-align: left;
    color: #ccc;
    vertical-align: top;
}

#footer h2{
    font-size: 24px;
    font-weight: normal;
    padding: 20px 0 0 20px;
}

#footer hr{
    width: 90%;
    border: 1px dashed #333;
}

#footer ul{
    font-size: 18px;
    color: #777;
    text-indent: 20px;
    line-height: 2;
}

/* #footer .left{
    width: 410px;
    height: 280px;
    background-color: blue;
    display: inline-block;
    text-align: left;
}

#footer .center{
    width: 410px;
    height: 280px;
    background-color: green;
    display: inline-block;
    text-align: left;
}

#footer .right{
    width: 410px;
    height: 280px;
    background-color: yellow;
    display: inline-block;
    text-align: left;
} */
footer .bottom{
    height: 80px;
    background-color: #000;
    height: 80;
    line-height: 80px;
    text-align: center;
    color: #777;
    border-top: 1px solid #444;
}

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

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

七、实训总结😊

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

八、更多干货🎁

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

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

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

web学生网页设计

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端网页设计与制作：HTML+CSS旅游网页设计——桂林旅游(3页) web前端旅游风景网页设计与制作 div静态网页设计

🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的
复制链接

扫一扫