HTML班级网站实例（笔记1）
班级网页笔记
- 简介
-
- 导航页
- 首页
- 关于布局的总结
简介
你好！ 这是我第一次使用 Markdown编辑器 展示的博客。记录一下我在学校做的一次实训作业。因为是第一次写这么多网页，里面有诸多问题，我也有诸多收获。
因为是期末的实训作业，所以就想着酷炫一点。所以我从B站和CSDN论坛得到了很多参考知识。有一些代码是我从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><a href="班级成就.html">班级成就a>li>
<li><a href="班级相册.html">班级相册a>li>
<li><a href="新闻中心.html">新闻中心a>li>
<li><a href="关于我们.html">关于我们a>li>
<li><a href="#">班级活动a>
<ul>
<li><a href="军训.html">军训a>li>
<li><a href="校运会.html">欢乐校运会a>li>
<li><a href="篮球比赛.html">篮球比赛a>li>
<li><a href="拔河比赛.html">拔河比赛a>li>
ul>
li>
ul>
div>
css代码
.topnav {
width: 1350px;
height: 50px;
background: #333;
margin-top: 10px;
}
.topnav ul {
list-style: none;
margin-left: 50px;
}
.topnav ul li {
float: left;
width: 150px;
height: 50px;
background: #222;
margin-right: 1px;
font-size: 14px;
}
.topnav ul li:hover {
color: #fff;
background: rgba(238, 82, 83, 1);
animation: changeColor 1s infinite;
animation-delay: 3s;
}
.topnav ul li a {
text-decoration: none;
color: #fff;
display: block;
text-align: center;
line-height: 50px;
font-weight: bold;
text-transform: uppercase;
}
.topnav ul li ul {
margin-left: 0px;
}
.topnav ul li ul li {
display: none;
weight: 220px;
height: 50px;
float: initial;
background: rgba(1, 163, 162, 1);
font-size: 10px;
transition: 0.3s;
}
.topnav ul li:hover ul li {
display: block;
border-top: 1px solid rgba(72, 219, 251, 0.5);
}
代码分析：
在一对ul里建立另一对ul,然后使用li:hover与动画animation可以改变颜色与下拉列表。
下拉列表：
首先第二对li 的css写display:none,表示隐藏列表不显示在网页上
然后在.topnav ul li:hover ul li写display:block,表示鼠标在一级列表之上，显示二级列表。还有就是使用 line-height: 50px;改变一下位置。
改变颜色：
animation: changeColor 1s infinite;
animation-delay: 3s;（动画的延迟）
表示改变颜色的动画
问：颜色变化还是有点没弄懂
2. 登录框
HTML代码
<div class="card3">
<div class="formtext">
<h2>Loginh2>
<form>
<div class="inputBox">
<input type="text" name="" required="">
<label>登录名label>
div>
<div class="inputBox">
<input type="password" name="" required="">
<label>密码label>
div>
<input type="submit" value="登录">
form>
div>
div>
css代码
.formtext {
margin: 30px;
width: 400px;
height: 40px;
}
.formtext h2 {
margin-left: -30px;
color: #fff;
}
.inputBox {
position: relative;
margin-top: 20px;
}
.formtext .inputBox input {
width: 85%;
fony-size: 16px;
padding: 10px 0;
height: 20px;
color: #fff;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background-color: transparent;
}
.formtext .inputBox label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
color: #fff;
pointer-events: none;
transition: .5s;
}
.formtext .inputBox input:focus ~ label, .formtext .inputBox input:valid ~ label {
top: -30px;
left: 0;
color: #00008B;
font-size: 12px;
}
.formtext input[type="submit"] {
background-color: transparent;
border: none;
outline: none;
color: #fff;
background: #00008B;
padding: 10px 20px;
margin-top: 20px;
cursor: pointer;
border-radius: 5px;
}
这一段是从B站的一个视频借鉴【狗头】过来的。分析有点难QWQ
为了效果，我再添加两个图片
未动前
效果图
因为很明显，HTML的内容我就不写了。
css部分解析：
I. 文本框只显示一条线
border: none;
border-bottom: 1px solid #fff;
先去掉边框，再定义底边框
II.输入时，名称（登录名，密码）会上移且改变字体样式
.formtext .inputBox input:focus ~ label, .formtext .inputBox input:valid ~ label {
top: -30px;
left: 0;
color: #00008B;
font-size: 12px;
}
重点：
focus ~ label
valid ~ label
解析：
focus ~ label表示focus选择器选择label
valid ~ label我有个猜测
当输入无效信息点登录时，边框会变为红色。应该是这样吧。
- 内容框
关于这个我只写一个border-radius: 30px;
表示圆角，当值为50%和100%时则变为圆。
关于布局的总结
1.想要两个div并排显示：给他们用一个大div包起来，然后设定大div的宽高（比两个div的宽的和多一丢丢），给两个小div添加float：left；只要宽度合适，就会自动排列。
2.最好不要对div使用padding这个属性。
3.我最常使用margin属性进行div之间的距离布局。
这是第一个部分，剩下的会持续更新，拜拜。第一次写博客，如果有错误请多多矫正，谢谢。还有点赞支持一下哦。