web前端期末大作业——HTML+CSS简单的旅游网页设计与实现

❤ 【作者主页——获取更多优质源码】

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

❤

文章目录

一、网站题目‍

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

二、网站描述✍️

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

三、网站介绍

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

网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：、、Vscode 、Sublime 、、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 http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考试title>
head>
<style>
    * {
        margin: 0px;
        padding: 0px;
        list-style: none;
    }
    
    .bigbox {
        width: 1200px;
        margin: 0 auto;
        margin-bottom: 100px;
    }
    
    h2 {
        text-align: center;
        margin-top: 50px;
        font-weight: 300;
    }
    
    h4 {
        text-align: center;
        color: #787F87;
        font-weight: 500;
        font-size: 14PX;
    }
    
    h5 {
        margin-top: 10px;
        color: #929090;
        text-align: center;
    }
    
    .heard {
        margin-top: 40px;
        height: 30px;
        width: 100%;
    }
    
    .heard ul {
        display: flex;
        width: 500px;
        margin: 0 auto;
    }
    
    .heard ul li {
        border: 1px solid #7194BF;
        color: #7194BF;
        width: 80px;
        margin-left: 10px;
        margin-right: 10px;
        text-align: center;
        height: 24px;
        margin-top: 3px;
        line-height: 24px;
    }
    
    .heard ul li:first-child {
        color: #fff;

        background-color: #7194BF;
    }
    
    .img1 {
        position: relative;
        display: flex;
    }
    
    .img1 img {
        width: 400px;
    }
    
    .dier {
        display: flex;
    }
    
    .dier img {
        width: 570px;
        margin-right: 30px;
    }
    
    .left {
        width: 600px;
        height: 322px;
        background-color: #fff;
    }
    
    .left ul li {
        display: flex;
        width: 100%;
        height: 90px;
    }
    
    .left ul li:not(:first-child) {
        margin-top: 26px;
        background-color: #E0E9F0;
    }
    
    .left ul li {}
    
    .one {
        display: inline-block;
        height: 100%;
        width: 60px;
        font-size: 25px;
        text-align: center;
        line-height: 90px;
        font-weight: 900;
        color: #80858B;
    }
    
    .two {
        width: 450px;
    }
    
    .two P:first-child {
        font-size: 16px;
        font-weight: 500;
        margin-top: 23px;
        color: #000000;
    }
    
    .two P:last-child {
        font-size: 14px;
        color: #A7AEB2;
    }
    
    .three {
        width: 90px;
        text-align: center;
    }
    
    .three p:first-child {
        margin-top: 23px;
        font-size: 16px;
        font-weight: 500;
        color: #80858B;
    }
    
    .three p:last-child {
        font-size: 14px;
        color: #80858B;
    }
style>
<body>
    <div class="bigbox">
        <h2>旅行目的地h2>
        <h4>TRAVEL DESTINATIONh4>
        <h5>————当季热门————h5>
        <div class="heard">
            <ul>
                <li>美洲li>
                <li>欧洲li>
                <li>亚洲li>
                <li>海岛li>
                <li>美洲li>
            ul>
        div>
        <div style="height: 50px;">
        div>
        <div class="img1">
            <img src="picture/con1_img1.jpg" alt="">
            <img src="picture/con1_img2.jpg" alt="">
            <img src="picture/con1_img3.jpg" alt="">
        div>
        <div class="img1">
            <img src="picture/con1_img4.jpg" alt="">
            <img src="picture/con1_img5.jpg" alt="">
            <img src="picture/con1_img6.jpg" alt="">
        div>
        <h2>旅游资讯h2>
        <h4>NEWS CENTERh4>
        <h5>————当季热门————h5>
        <div style="height: 50px;">
        div>
        <div class="dier">
            <img src="picture/con2_img1.jpg" alt="">
            <div class="left">
                <ul>
                    <li style="background-color: #364352;">
                        <p class="one" style="color: #EBECED;">
                            01
                        p>
                        <div class="two">
                            <p style="color: #EBECED;">

                                旅游嘉年华，走进华夏，叫醒耳朵
                            p>
                            <p>
                                因为因为临夏离兰州很近，地理位置优越，是兰州1小时经济圈重要的...
                            p>
                        div>
                        <div class="three">
                            <p style="color: #EBECED;">19p>
                            <p style="color: #EBECED;">2017-5p>
                        div>
                    li>
                    <li>
                        <p class="one">
                            02
                        p>
                        <div class="two">
                            <p>
                                全景观世界之达沃潜水旅游之行
                            p>
                            <p>
                                因为因为临夏离兰州很近，地理位置优越，是兰州1小时经济圈重要的...
                            p>
                        div>
                        <div class="three">
                            <p>05p>
                            <p>2017-5p>
                        div>
                    li>
                    <li style="background-color: #DBE4EF;">
                        <p class="one">
                            03
                        p>
                        <div class="two">
                            <p>
                                玩转美国十大历史小镇 小城也有精彩大故事
                            p>
                            <p>
                                因为因为临夏离兰州很近，地理位置优越，是兰州1小时经济圈重要的...
                            p>
                        div>
                        <div class="three">
                            <p>01p>
                            <p>2017-5p>
                        div>
                    li>
                ul>
            div>
        div>
    div>
body>
html>

六、遇到问题及如何解决

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

七、实训总结

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

在线咨询

上一篇：文件同步工具 v12.5中文免费版
下一篇：重磅！中国交出一份漂亮成绩单！GDP总量首超80万亿元

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

web前端期末大作业——HTML+CSS简单的旅游网页设计与实现

您的项目需求