首页 > 网页设计 > html旅游网页制作-HTML+CSS大作业:旅游网页设计与实现——6页旅游风光网站HTML+CSS+
2023
09-22

html旅游网页制作-HTML+CSS大作业:旅游网页设计与实现——6页旅游风光网站HTML+CSS+

【Web前端期末作业-毕业设计精品实践案例(1000套)】

文章目录

1. 网站标题‍

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

2. 网站说明✍️

旅游景点介绍,旅游景点简介、行政区划、地理环境、自然环境、教育、体育、旅游景点、城市荣誉等。网站主要展示当地风土人情,通过增加游客的互动体验访客留言。 同时,当地旅游网站各网页均采用统一的设计风格,增强城市整体面貌的统一宣传效果。 最重要的是要为旅游网站打造独特的风格来吸引浏览者的注意力。

3.网站介绍

网站布局:拟采用目前主流的浮动网页布局结构吉祥物,兼容各大主流浏览器,显示效果稳定。

网站编程:拟采用最新的网页编程语言HTML5+CSS3+JS编程语言来完成网站的功能设计。 并保证网站代码兼容目前市面上所有主流浏览器,这样打开后就能立即看到网站。

网站素材方面:计划是从各大平台收集好看的图片素材,精心挑选适合网页风格的图片,然后用PS制作出适合网页尺寸的图片。

网站文件:网站系统文件类型包括:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

网页编辑:网页工作的代码简单html旅游网页制作,可以使用任何HTML编辑软件(如Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等HTML编辑软件)运行、修改和编辑。

在:

(1)html文件包含:index.html为首页,其他html为副页;

(2)css文件包含:css所有页面样式、文字滚动、图片放大等;

(3)js文件包括:实现动态轮播效果、点击事件等的js(个别网页使用js代码)。

4、网站效果

网站设计制作的重点是网页整体设计的布局和网页整体内容的主题选择。

网站设计:策划实现简洁大方的网页设计效果。

网站功能方面:计划实现各页面之间的链接跳转功能、鼠标悬停在文字上时变色功能、首页简单的动态图片切换功能、简单的表单提交功能。

5.网站代码制作部分

(1)网站首页的布局决定了各个版块的内容html旅游网页制作ip形象,采用DIV+CSS布局。 另外,首页用到的知识主要有图片插入、动态图片切换、导航栏、使用CSS固定字体、文字大小、文字颜色、背景颜色等。

(2)页面采用DIV+CSS布局,用到的知识主要有图片插入、导航栏、使用CSS固定字体、文字大小、文字颜色、背景颜色。

(3)表单页面采用DIV+CSS布局。 用到的知识主要包括使用表单表单、输入文本框和输入提交按钮来完成表单信息的收集。 使用CSS设置输入提交按钮的文本大小和颜色。

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>                                                                         

最后编辑:
作者:nuanquewen
吉祥物设计/卡通ip设计/卡通人物设计/卡通形象设计/表情包设计