web前端网页设计期末课程大作业：旅游网页主题网站设计——三亚旅游网页设计(6个页面) HTML+CSS+JavaScript

👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

文章目录🌰

一、网站题目👨‍🎓
二、网站描述✍️
三、网站介绍📖
四、网站效果🌐
五、网站代码制作部分 📕
- HTML结构代码🧱
- CSS样式代码🏡
六、遇到问题及如何解决🔍
七、实训总结😊
八、更多干货🎁

一、网站题目👨‍🎓

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

二、网站描述✍️

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

三、网站介绍📖

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

网站程序方面：计划采用最新的网页编程语言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>
<head>
<title>旅游景点|境内旅游-旅游景点旅行社网站title>
<meta name="renderer" content="webkit">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="applicable-device" content="pc,mobile">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="description" content="" />
<meta name="keywords" content="旅游景点|境内旅游" />
<link rel='stylesheet' href='./static/css/style.css'>
head>
<body>

<div class="load-box">div>
<header>
  <div class="head-box">
    <div class="width-box">
      <div class="logo-box">
        <a href="" title="旅游景点旅行社网站">

      <img src="./static/image/1506052119.png" alt="旅游景点旅行社网站">

          <h2>旅游h2>

          <h4>400 000 0000h4>

        a>
      div> 

<div class="login-box">
  <a href="login.html">登录a>
  <a href="register.html">注册a>
div>

    div>
  div>
header>
<nav>
  <div class="nav-box">
    <div class="width-box">
      <div class="nav-cut">
        <ul class="nav-ul">

          <li class="nav-li "><a href="index.html" title="旅游景点旅行社网站">首页a>li>

          <li class="nav-li active navs margin-left-"><a href="you.html" title="跟团游" >跟团游a>li>

          <li class="nav-li  navs margin-left-"><a href="you.html" title="自助游" >自助游a>li>

          <li class="nav-li  navs margin-left-"><a href="you.html" title="自驾游" >自驾游a>li>

          <li class="nav-li  navs margin-left-"><a href="you.html" title="酒店" >酒店a>li>

          <li class="nav-li   margin-left-"><a href="you.html" title="景点" >景点a>li>

          <li class="nav-li   margin-left-"><a href="gonglue.html" title="攻略" >攻略a>li>

          <li class="nav-li   margin-left-"><a href="gonglue.html" title="交通" >交通a>li>

        ul>
      div>

      <div class="search-cut">
        <div class="search-button">div>
        <div class="search-box">

          <form method="get" action="gonglue.html">
        <input type="hidden" name="lang" value="cn">

      <input type="hidden" name="class1" value="10001">

            <input type="text" placeholder="请输入搜索关键词！" name="searchword" value="">
            <button type="submit">button>
          form>

        div>
      div>
    div>
  div>
nav>

<section>
  <div class="width-box">
  <div class="banner-box transform-box">
    <div class="met-banner banner-ny-h" data-height='' style=''>

    <div class="slick-slide">
        
      <img class="cover-image" data-size="1170_100" src="./static/image/1506069563.jpg" srcset='' sizes="(max-width: 767px) 767px" alt="">
   
        div>  

    <div class="slick-slide">
        
      <img class="cover-image" data-size="1170_100" data-lazy="./static/image/1506073462.jpg" srcset='' sizes="(max-width: 767px) 767px" alt="">
   
        div>  

      div>
    div>
  div>
section>

<section class="main">
  <div class="width-box">

    <div class="price-box">
      <div class="price-nav transform-box">
        <ol class="price-ul">
          <li class="price-li active"><a title="跟团游">热门推荐a>li>

          <li class="price-li"><a title="一日游">一日游a>li>

          <li class="price-li"><a title="二日游">二日游a>li>

          <li class="price-li"><a title="三日游">三日游a>li>

          <li class="price-li"><a title="四日游">四日游a>li>

          <li class="price-li"><a title="五日游">五日游a>li>

          <li class="price-li"><a title="六日游">六日游a>li>

          <li class="price-li"><a title="七日游">七日游a>li>

        ol>
      div>
      <div class="price-cut">
        <ul class="active">

          <li>
            <a href="youinfo.html" title="海口到三亚三天两晚品牌游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506322241.jpg' alt="海口到三亚三天两晚品牌游">
              <span>海口到三亚三天两晚品牌游span>
        <font>660.00元font>
            a>
          li>

          <li>
            <a href="youinfo.html" title="三亚-西沙三日游精华线" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506321574.jpg' alt="三亚-西沙三日游精华线">
              <span>三亚-西沙三日游精华线span>
        <font>1280.00元font>
            a>
          li>

          <li>
            <a href="youinfo.html" title="豪华游轮 西沙七日游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506321623.jpg' alt="豪华游轮 西沙七日游">
              <span>豪华游轮 西沙七日游span>
        <font>4999.00元font>
            a>
          li>

          <li>
            <a href="youinfo.html" title="海南三亚-西沙六日游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506321389.jpg' alt="海南三亚-西沙六日游">
              <span>海南三亚-西沙六日游span>
        <font>3880.00元font>
            a>
          li>

          <li>
            <a href="youinfo.html" title="三亚一地5天4晚“岛人行岛”豪华游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506321153.jpg' alt="三亚一地5天4晚“岛人行岛”豪华游">
              <span>三亚一地5天4晚“岛人行岛”豪华游span>
        <font>3680.00元font>
            a>
          li>

          <li>
            <a href="youinfo.html" title="天堂森林公园-亚龙湾沙滩1日游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506307339.jpg' alt="天堂森林公园-亚龙湾沙滩1日游">
              <span>天堂森林公园-亚龙湾沙滩1日游span>
        <font>145.00元font>
            a>
          li>

          <li>
            <a href="youinfo.html" title="【南海之梦号邮轮】西沙群岛4天3晚游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506319633.jpg' alt="【南海之梦号邮轮】西沙群岛4天3晚游">
              <span>【南海之梦号邮轮】西沙群岛4天3晚游span>
        <font>1680.00元font>
            a>
          li>

          <li>
            <a href="youinfo.html" title="（2天精品A线）绝美蜈支洲2日游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506310281.jpg' alt="（2天精品A线）绝美蜈支洲2日游">
              <span>（2天精品A线）绝美蜈支洲2日游span>
        <font>225.00元font>
            a>
          li>

        ul>

        <ul>

          <li>
            <a href="youinfo.html" title="天堂森林公园-亚龙湾沙滩1日游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506307339.jpg' alt="天堂森林公园-亚龙湾沙滩1日游">
              <span>天堂森林公园-亚龙湾沙滩1日游span>
        <font>145.00元font>
            a>
          li>

        ul>

        <ul>

          <li>
            <a href="youinfo.html" title="（2天精品A线）绝美蜈支洲2日游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506310281.jpg' alt="（2天精品A线）绝美蜈支洲2日游">
              <span>（2天精品A线）绝美蜈支洲2日游span>
        <font>225.00元font>
            a>
          li>

        ul>

        <ul>

          <li>
            <a href="youinfo.html" title="海口到三亚三天两晚品牌游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506322241.jpg' alt="海口到三亚三天两晚品牌游">
              <span>海口到三亚三天两晚品牌游span>
        <font>660.00元font>
            a>
          li>

          <li>
            <a href="youinfo.html" title="三亚-西沙三日游精华线" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506321574.jpg' alt="三亚-西沙三日游精华线">
              <span>三亚-西沙三日游精华线span>
        <font>1280.00元font>
            a>
          li>

        ul>

        <ul>

          <li>
            <a href="youinfo.html" title="【南海之梦号邮轮】西沙群岛4天3晚游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506319633.jpg' alt="【南海之梦号邮轮】西沙群岛4天3晚游">
              <span>【南海之梦号邮轮】西沙群岛4天3晚游span>
        <font>1680.00元font>
            a>
          li>

        ul>

        <ul>

          <li>
            <a href="youinfo.html" title="三亚一地5天4晚“岛人行岛”豪华游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506321153.jpg' alt="三亚一地5天4晚“岛人行岛”豪华游">
              <span>三亚一地5天4晚“岛人行岛”豪华游span>
        <font>3680.00元font>
            a>
          li>

        ul>

        <ul>

          <li>
            <a href="youinfo.html" title="海南三亚-西沙六日游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506321389.jpg' alt="海南三亚-西沙六日游">
              <span>海南三亚-西沙六日游span>
        <font>3880.00元font>
            a>
          li>

        ul>

        <ul>

          <li>
            <a href="youinfo.html" title="豪华游轮 西沙七日游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506321623.jpg' alt="豪华游轮 西沙七日游">
              <span>豪华游轮 西沙七日游span>
        <font>4999.00元font>
            a>
          li>

        ul>

      div>
    div>

  div>

  <div class="width-box">
  <div class="advert-box">
    <a href="http://www.baidu.com" title="旅游景点旅行社网站" target='_self'>
    <img class="lazyloads" data-size="1170_120" data-original="./static/image/1506075016.jpg" alt="旅游景点旅行社网站">
    a>
  div>
  div>

  <div class="width-box">
    <div class="main-left">

      <div class="notice-box"><h3>海南.三亚<em>旅游热线em> ——<em>400-000-0000em>h3><p>成立9年以来，组织和接待了来自世界各国、各地区的游客100万人次，积累了丰富的旅游接待经验，着<em>“宾客至上，信誉第一”em>的服务宗旨，严格规范的管理制度，高质量的服务，赢得中外游客的广泛赞誉。p>div>

      <div class="card-list">

        <div class="card-li">
          <div class="card-description">
            <a class="card-title" href="gonglueinfo.html" title="2017海南三亚旅游攻略实用版" target='_self'><h3>2017海南三亚旅游攻略实用版h3>a>
      <img class="card-image lazyloadx" data-original='./static/image/1506334085.jpg'>
            <p> 人的一生中至少要有两次冲动，一次为奋不顾身的爱情，一次为说走就走的旅行。旅行，一直是我的最爱，所以，我愿意“冒险”一次，约上闺蜜一起开始一段旅行。     这个春季，我选择三亚。（什么季节去海南最好呢，有人担心夏天会不会太热，其实夏天在海边凉风习习，水温正适合体质较弱的人群）。     ..p>
          div>
          <div class="card-operation">
            <div class="card-author">
              <img class="lazyloadx" data-original="./static/image/user.jpg">
              <font>adminfont>
            div>
            <div class="card-time">发布于 2017-09-26div>
            <div class="card-geek">
              <font class="eye">376font>
              <font class="share"> 
          <span>
           <a class="weibo" target="_blank" href="http://service.weibo.com/share/share.php?title=2017海南三亚旅游攻略实用版&url=http%3A%2F%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D54&pic=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506334085.jpg">a>
           <a class="weixin" data-href="http://breeze/muban/M1156012/359/strategy/shownews.php?lang=cn&id=54">a>
           <a class="qzone" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=2017海南三亚旅游攻略实用版&url=http%3A%2F%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D54&pics=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506334085.jpg">a>
        span>
        font>
            div>
          div>
        div>

        <div class="card-li">
          <div class="card-description">
            <a class="card-title" href="gonglueinfo.html" title="与海浪共舞，享垂钓乐趣！一起去三亚海钓！" target='_self'><h3>与海浪共舞，享垂钓乐趣！一起去三亚海钓！h3>a>
      <img class="card-image lazyloadx" data-original='./static/image/1506335872.jpg'>
            <p>作为中国最南部的一座滨海城市，三亚拥有得天独厚的旅游资源：阳光、沙滩、海风、椰林、新鲜空气……而这一切仿佛都在诉说着：到三亚不去海钓是一种遗憾。海钓在欧美发达国家已经有了上百年的历史，是一种既刺激有充满着无限乐趣的休闲玩乐方式，海钓爱好者们若是到了三亚，可以去哪些地方进行海钓活动呢?以下这..p>
          div>
          <div class="card-operation">
            <div class="card-author">
              <img class="lazyloadx" data-original="./static/image/user.jpg">
              <font>adminfont>
            div>
            <div class="card-time">发布于 2017-09-25div>
            <div class="card-geek">
              <font class="eye">46font>
              <font class="share"> 
          <span>
           <a class="weibo" target="_blank" href="http://service.weibo.com/share/share.php?title=与海浪共舞，享垂钓乐趣！一起去三亚海钓！&url=http%3A%2F%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D57&pic=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506335872.jpg">a>
           <a class="weixin" data-href="http://breeze/muban/M1156012/359/strategy/shownews.php?lang=cn&id=57">a>
           <a class="qzone" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=与海浪共舞，享垂钓乐趣！一起去三亚海钓！&url=http%3A%2F%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D57&pics=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506335872.jpg">a>
        span>
        font>
            div>
          div>
        div>

        <div class="card-li">
          <div class="card-description">
            <a class="card-title" href="gonglueinfo.html" title="海南旅游自由行攻略" target='_self'><h3>海南旅游自由行攻略h3>a>
      <img class="card-image lazyloadx" data-original='./static/image/1506335186.jpg'>
            <p>一、出发前的准备  到了三亚肯定是要下海的，泳衣、游泳眼镜、耳塞都要准备好。替换衣物、太阳伞、太阳帽、太阳眼镜、沙滩拖鞋也要带上。三亚的阳光狠，所以就得使用护肤品。防晒霜是必须配备的，晒后镇定修护露、保湿喷雾、白面膜等都可以带上。洗发液、护发素也是必备的。海水很伤头发的，酒店提供..p>
          div>
          <div class="card-operation">
            <div class="card-author">
              <img class="lazyloadx" data-original="./static/image/user.jpg">
              <font>adminfont>
            div>
            <div class="card-time">发布于 2017-09-25div>
            <div class="card-geek">
              <font class="eye">26font>
              <font class="share"> 
          <span>
           <a class="weibo" target="_blank" href="http://service.weibo.com/share/share.php?title=海南旅游自由行攻略&url=http%3A%2F%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D56&pic=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506335186.jpg">a>
           <a class="weixin" data-href="http://breeze/muban/M1156012/359/strategy/shownews.php?lang=cn&id=56">a>
           <a class="qzone" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=海南旅游自由行攻略&url=http%3A%2F%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D56&pics=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506335186.jpg">a>
        span>
        font>
            div>
          div>
        div>

        <div class="card-li">
          <div class="card-description">
            <a class="card-title" href="gonglueinfo.html" title="海南三亚旅游攻略实用版－五天四晚游" target='_self'><h3>海南三亚旅游攻略实用版－五天四晚游h3>a>
      <img class="card-image lazyloadx" data-original='./static/image/1506335126.jpg'>
            <p>7.27 厦门——三亚 20:55~23:05 首都航空 JD5736 白天可以上班不请假交通花费：520*2=1040RMB住宿花费：330RMB，住凤凰机场酒店，候机楼斜对面30 m。7.28 南山寺and大小洞天交通花费：8路到国光豪生酒店4 RMB；过马路转25/57路到南山寺10..p>
          div>
          <div class="card-operation">
            <div class="card-author">
              <img class="lazyloadx" data-original="./static/image/user.jpg">
              <font>adminfont>
            div>
            <div class="card-time">发布于 2017-09-25div>
            <div class="card-geek">
              <font class="eye">26font>
              <font class="share"> 
          <span>
           <a class="weibo" target="_blank" href="http://service.weibo.com/share/share.php?title=海南三亚旅游攻略实用版－五天四晚游&url=http%3A%2F%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D55&pic=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506335126.jpg">a>
           <a class="weixin" data-href="http://breeze/muban/M1156012/359/strategy/shownews.php?lang=cn&id=55">a>
           <a class="qzone" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=海南三亚旅游攻略实用版－五天四晚游&url=http%3A%2F%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D55&pics=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506335126.jpg">a>
        span>
        font>
            div>
          div>
        div>

      div>

    div>
    <div class="main-right">

      <div class="editor-button">
        <a href="" title="报名咨询" target='_self'>
      <img class="lazyloads" data-size="19_17" data-original="./static/image/geek_5.png">
      报名咨询
    a>
      div>

      <div class="card-tags">
        <h4>热搜标签h4>
        <ul>

          <li><a href="#" title="亚龙湾热带天堂森林公园" target='_self'>亚龙湾热带天堂森林公园a>li>

          <li><a href="#" title="西沙群岛" target='_self'>西沙群岛a>li>

          <li><a href="#" title="蜈支洲岛" target='_self'>蜈支洲岛a>li>

          <li><a href="#" title="三天两夜" target='_self'>三天两夜a>li>

          <li><a href="#" title="西沙群岛" target='_self'>西沙群岛a>li>

          <li><a href="#" title="西岛" target='_self'>西岛a>li>

        ul>
      div>

      <div class="card-active">
        <h4>推荐路线h4>
        <ul>

          <li>
            <a href="#" title="海南-三亚三天三夜自助游" target='_self'>
              <img class="lazyloads" data-original='./static/image/1506311787.jpg'>
              <span>海南-三亚三天三夜自助游span>
            a>
          li>

          <li>
            <a href="#" title="三亚一地5天4晚“岛人行岛”豪华游" target='_self'>
              <img class="lazyloads" data-original='./static/image/1506321153.jpg'>
              <span>三亚一地5天4晚“岛人行岛”豪华游span>
            a>
          li>

          <li>
            <a href="#" title="三亚到西沙群岛4天3晚自助游" target='_self'>
              <img class="lazyloads" data-original='./static/image/1506320253.jpg'>
              <span>三亚到西沙群岛4天3晚自助游span>
            a>
          li>

        ul>
      div>

      <div class="card-hots">
        <h4>热门排行h4>
        <ul>

      <li><a href="#" title="2017海南三亚旅游攻略实用版" target='_self'>2017海南三亚旅游攻略实用版a>li>

      <li><a href="#" title="与海浪共舞，享垂钓乐趣！一起去三亚海钓！" target='_self'>与海浪共舞，享垂钓乐趣！一起去三亚海钓！a>li>

      <li><a href="#" title="海南旅游自由行攻略" target='_self'>海南旅游自由行攻略a>li>

      <li><a href="#" title="海南三亚旅游攻略实用版－五天四晚游" target='_self'>海南三亚旅游攻略实用版－五天四晚游a>li>
 
    ul>
      div>
 
    div>

  div>
section>
<footer>
  <div class="foot-box">
    <div class="width-box">
      <div class="foot-left">

<div class="met-links">
  <ol class="breadcrumb">
    <li>友情链接 :li>

    <li>
      <a href="http://www.baidu.com/" title="" target="_blank">

        去哪儿网

      a>
    li>

    <li>
      <a href="http://www.baidu.com/" title="" target="_blank">

        旅游网

      a>
    li>

    <li>
      <a href="http://www.baidu.com/" title="" target="_blank">

        海南旅游网

      a>
    li>

    <li>
      <a href="http://www.baidu.com/" title="" target="_blank">

        三亚旅游

      a>
    li>

  ol>
div>

      <p>企业网站管理系统p>

    div>
      <div class="foot-right">
        <div class="foot-lang">

      div>
      <div class="powered_by_metinfo">Powered by <a href="http://www.breeze.cn/#copyright" target="_blank" title="企业网站管理系统">breezea> div>
    div>
    div>
  div>
footer>

<div class="weixin-box">
  <b><em>Xem>分享到微信朋友圈b>
  <i>i>
  <p>打开微信，使用“扫一扫”，点击右上角“分享到朋友圈”。p>
div>

<button type="button" class="btn btn-icon btn-primary btn-squared met-scroll-top hide"><i class="icon wb-chevron-up" aria-hidden="true">i>button>



<script src="./static/js/shop_lang_cn.js">script>

<script src="./static/js/style.js">script>



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
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571

CSS样式代码🏡


body {
  padding-top: 0px;
}
.site-menubar {
  position: fixed;
  top: 66px;
  z-index: 1400;
  height: 100%;
  height: -webkit-calc(100% - 66px);
  height:         calc(100% - 66px);
  font-family: "Roboto", sans-serif;
  color: rgba(163, 175, 183, .9);
  background: #263238;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
          box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}
.site-menubar-body {
  height: 100%;
  height: -webkit-calc(100% - 76px);
  height:         calc(100% - 76px);
}
.site-menubar ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.site-menubar a {
  outline: none;
}
.site-menubar a:hover,
.site-menubar a:focus {
  text-decoration: none;
}
.site-menubar.site-menubar-light {
  background: #fff;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
          box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}
.site-menubar.site-menubar-light .scrollable-inverse.scrollable .scrollable-bar-handle {
  background: rgba(163, 175, 183, .6);
}
.site-menubar-section {
  padding: 0 30px;
  margin-top: 50px;
  margin-bottom: 50px;
}
.site-menubar-section > h4,
.site-menubar-section > h5 {
  color: #76838f;
}
.site-menubar-section .progress:last-child {
  margin-bottom: 0;
}
.site-menubar-footer {
  position: fixed;
  bottom: 0;
  z-index: 1400;
  display: block;
}

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

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

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

七、实训总结😊

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

八、更多干货🎁

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

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

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥

相关阅读:
web大作业静态网页(地下城与勇士 10页带视频)
【问题】MobaXterm Sftp 超时自动退出
 Spring的循环依赖
 C++算法 —— 分治（2）归并
 在centos7下docker 制作 java8镜像，上传到阿里云镜像仓库
 CSS Modules
HTML前端面试基础（一）
制作一个简单HTML抗疫逆行者网页作业（HTML+CSS）
利用kubernetes中的leader选举机制来完成自己的HA应用
 【08】FISCOBCOS一键部署【07+08即可完成一键部署，默认生成两个节点的链】
原文地址：https://blog.csdn.net/qq_38517811/article/details/127781479