HTML+CSS实现一个简单的作品介绍网页

Tiantianciiii

已于 2023-04-18 10:47:19 修改

阅读量3.8k

点赞数 14

分类专栏： JavaWeb 文章标签： css html 前端

于 2023-04-18 10:40:04 首次发布

本文链接：https://blog.csdn.net/weixin_52357829/article/details/130215581

版权

昨天帮同学做了一个简单的作品介绍网页，用来应付期中作业，在这里把源码分享给大家。
适合刚接触HTML和CSS的同学练练手。

开发工具

VS code

项目简介

这个网页是一个校园奶爸主题的静态网站，包括两个页面：scene.html和people.html。其中，scene.html主要介绍了校园奶爸的简介，people.html则是人物简介，两个页面共用同一个导航条和底部。

在布局上，两个页面都有相似的结构，有导航栏、banner和底部区域，其中people.html还新增了两行横向排列的图片及文字介绍。两个页面的样式都定义在对应的.css文件中，其中main.css主要定义主页的样式，people.css则定义了人物页面的排版。通过CSS的灵活运用，使得整个网站看起来简洁美观且易于维护和修改。

项目结构

在这里插入图片描述

项目源码

scene.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>校园奶爸 - 校园奶爸简介</title>
  <link rel="stylesheet" href="css\main.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav>
      <a href="scene.html">网站首页</a>
      <a href="scene.html">校园奶爸简介</a>
      <a href="people.html">情景介绍</a>
      <a href="people.html">人物简介</a>
    </nav>
    
    <!-- 主要区域 -->
    <div id="main">
        <div id="banner">
            <div class="banner-container">
              <div class="img-container1">
                <img src="image/5.jpg" alt="banner">
              </div>
              <div class="text-container1">
                <h1>校园奶爸简介</h1>
              </div>
              <div class="image-text-container">
                <img src="image/6.jpg" alt="校园奶爸">
                <p>双亲因飞机失事而去世的龙一&虎太郎兄弟。收养了这两人的是，同样因事故而失去儿子儿媳的森之宫学园理事长。但条件是，龙一必须在学园内设置的保育室负责照顾小孩！为了做母亲的老师而在学园内设置的保育室。为了补足那里的人手不足而创设的“育儿部”，龙一成为了部员第一号……！？</p>
              </div>
              </div>
            </div>
          </div>
    </div>
  
    <!-- 底部 -->
    <footer>
      &copy; 2023 校园奶爸-Author