HTML班级网站实例（笔记1）

最新推荐文章于 2025-01-16 10:36:06 发布

Dr_空山

最新推荐文章于 2025-01-16 10:36:06 发布

阅读量1.6w

点赞数 40

CC 4.0 BY-SA版权

文章标签： html css

本文链接：https://blog.youkuaiyun.com/weixin_50759039/article/details/108549047

本文记录了一位学生在实训中创建HTML班级网站的过程，包括导航页的渐变颜色实现、响应式导航条、登录框和内容框的设计。文章详细分析了CSS代码，探讨了布局和动画效果，并分享了布局的实用总结。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

班级网页笔记

简介

简介

你好！这是我第一次使用 Markdown编辑器 展示的博客。记录一下我在学校做的一次实训作业。因为是第一次写这么多网页，里面有诸多问题，我也有诸多收获。
因为是期末的实训作业，所以就想着酷炫一点。所以我从B站和优快云论坛得到了很多参考知识。有一些代码是我从B站是看视频抄的，因为JavaScript还没学，可能JS部分写了很少。我是一名学生，如果有什么侵权的事情请立刻跟我说，多谢。

导航页

网站导航页

这个页面是导航页，可能叫别的，反正我觉得从文件夹里一个一个找首页好麻烦，所以就弄了个“导航页”链接首页。
现在我列出几个特点和笔记：

渐变的颜色

body{
  margin: 0;
  padding: 0;
  font-family: "montserrat";
  background-image: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
  background-size: 400%;
  animation: bganimation 15s infinite;
}
@keyframes bganimation {
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

这是导航页面的css代码分析：

background-image: linear-gradient
是表示颜色渐变的线性梯度，就是弄出一个渐变效果，而不是颜色直接拼接在一起。125deg代表角度，然后是渐变的顺序。
animation: bganimation 15s infinite;
animation可以设置动画的六个属性：
I. animation-name 规定需要绑定到选择器的 keyframe 名称
II. animation-duration 规定完成动画所花费的时间，以秒或毫秒计
III. animation-timing-function 规定动画的速度曲线
IIII. animation-delay 规定在动画开始之前的延迟
V. animation-iteration-count 规定动画应该播放的次数
VI. animation-direction 规定是否应该轮流反向播放动画

代码分析：
bganimation是动画的命名
15s代表动画的时间
infinite表示无限循环动画

问：background-size：400%是什么意思？
猜测：每个页面代表一个颜色，然后在100%的页面轮播

首页

因为一些问题，页面溢出总是解决不了。我将分析响应式导航条，一个登录框和一个内容框

导航条
HTML代码

<div class="topnav">
    <ul>
      <li><a href="首页.html">首页</a></li>
      <li><a href="班级成员.html">班级成员</a>
        <ul>
          <li><a href="成员简介.html">成员简介</a></li>
          <li><a href="教师简介.html">教师简介</a></li>
        </ul>
      </li>
      <li><a href="班级特色.html">班级特色</a></li>
      <li