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

    👨‍🎓学生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
    • 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
  • 相关阅读:
    IoT知识点补充
    每日一练 | 华为认证真题练习Day111
    MIUI13和MIUI12的录音存储位置
    关于一个图算法的应用
    Mac笔记本聚焦SpotLight占用内存太高的 解法
    温度响应性纳米水凝胶光子品体/纤维素修饰荧光水凝胶/载脂质体水凝胶的制备方法
    线程安全问题 --- 内存可见性问题
    spring boot 实现mock平台
    恒凯USB数据采集卡在国产麒麟操作系统下的应用（四）QT环境设置及数据采集实验
    CSS 样式简写
  • 原文地址：https://blog.csdn.net/QQ_____365392777/article/details/126194166