HTML+CSS大作业：我的家乡/旅游城市介绍网页（5页）

奥利奥ala

于 2024-09-05 18:52:48 发布

阅读量192

点赞数 8

分类专栏： html基础网页制作文章标签： html css 课程设计

本文链接：https://blog.csdn.net/weixin_53453950/article/details/141937762

版权

html基础网页制作专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html作业基础水平制作，适用于初学者，页面排版干净，固定导航栏加上轮播图，包含了表单，视频音频表格超链接等基础知识，采用了html+css来实现布局，在登录界面用了一小段js来作为输入框的判断，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

难度系数：★★☆☆☆

一、网站题目

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

二、网站描述

本网站是以成都为主题制作的一个家乡介绍/旅游城市介绍的网站，网站内容分为四个板块，分别是主页，小吃，关于，登录这四个页面，画面布局风格统一，最可见的就是导航栏和轮播图，这里的轮播图可以作为banner图，通过修改内容也可以作为其他城市介绍的一个模版，网站较为基础，适合初学者或知识面掌握不多的同学使用。

三、网站介绍

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的布局结构。多采用div+css来实现布局

网站程序方面：采用html+css+js技术来实现网站，并且兼容市面主流浏览器，打开不会错位不会乱码。

网站素材方面：通过网络社交网站等搜集图片和文字，运用适当的处理方法来对素材进行处理。

网站文件方面：网站系统文件种类包含：css文件夹、js文件夹、images文件夹；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

四、网站效果

这里对网站所有页面进行了截图展示，附上网站运行视频。

chengdu

五、部分代码制作

每个页面的css文件是分开的，文件太多了，所以就展示一个页面，在测试时需要替换掉里面的图片位置为本地位置，需要在swiper3官网引入swiper文件，如果本地有下载可以直接在本地引用路径。

about.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">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/about.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <title>关于成都</title>
</head>
<body>
    <div class="nav">
        <div><a href="./index.html">主页</a></div>
        <div><a href="./food.html">美食/风景</a></div>
        <div class="active"><a href="./about.html">关于成都</a></div>
        <div><a href="./login.html">登录</a></div>
    </div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./img/s1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="./img/s2.jpg" alt=""></div>
        <div class="swiper-slide"><img src="./img/s3.jpg" alt=""></div>
        <div class="swiper-slide"><img src="./img/s4.jpg" alt=""></div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
      <!-- Add Arrows -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
    <h1>关于成都</h1>
    <table>
        <tr>
          <th>名称</th>
          <th>简介</th>
          <th>人口</th>
        </tr>
        <tr>
          <td>天府广场</td>
          <td>成都市中心的主要广场</td>
          <td>约1,500万</td>
        </tr>
        <tr>
          <td>宽窄巷子</td>
          <td>具有悠久历史的古街区</td>
          <td>约80万</td>
        </tr>
        <tr>
          <td>锦里</td>
          <td>集民俗风情、商业、娱乐于一体的历史文化名街</td>
          <td>约70万</td>
        </tr>
        <tr>
          <td>都江堰</td>
          <td>世界上最古老的灌溉工程之一</td>
          <td>约100万</td>
        </tr>
      </table>

      <div class="container">
        <ul class="list">
          <li>文化</li>
          <li>美食</li>
          <li>旅游景点</li>
          <li>历史</li>
        </ul>
        <div class="video">
          <video src="./video/video.mp4" controls width="100%"></video>
        </div>
      </div>
    



</body>
</html>
<script src="./js/swiper.min.js"></script>
<script src="./js/swiper.js"></script>

about.css

h1{
    text-align: center;
}

table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  /* th {
    background-color: #f2f2f2;
  } */

  tr:nth-child(even) {
    background-color: #f9f9f9;
  }

  .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  
  .list {
    width: 20%;
    background-color: #f2f2f2; /* 列表背景色 */
    padding: 20px;
    list-style-type: none;
  }
  
  .list li {
    margin-bottom: 10px;
  }
  
  .video {
    width: 70%;
    padding: 20px;
  }

六、制作心得

在制作过程中还会遇到很多问题，例如网站的配色，图片的比例，图片的文案等等，通过这个网站的制作可以更加牢固的掌握html和css排版的内容

奥利奥ala

关注

8
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS大作业：我的家乡/旅游城市介绍网页（5页）

html作业基础水平制作，适用于初学者，页面排版干净，固定导航栏加上轮播图，包含了表单，视频音频表格超链接等基础知识，采用了html+css来实现布局，在登录界面用了一小段js来作为输入框的判断，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
复制链接

扫一扫