简介

你好！这是我第一次使用 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>Login</h2><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之间的距离布局。

这是第一个部分，剩下的会持续更新，拜拜。第一次写博客，如果有错误请多多矫正，谢谢。还有点赞支持一下哦。

HTML班级网站实例（笔记1）相关推荐

关于C/C++读写64位内存的实例笔记
关于C/C++读写64位内存的实例笔记前言 1.引入库 2.定义变量 3.实际读写操作最后前言 ReadProcessMemory和WriteProcessMemory这两个函数几乎是所有跨进程 ...
jQuery开发经验实例笔记
jQuery开发经验实例笔记 jQuery获取文件选择输入框的扩展名 var file=$("input[name='file']").val() var filename=fil ...
vue.js创建网站实例1
搭建项目环境网上的教程很多,随便搜一个,参考: https://blog.csdn.net/weixin_43844158/article/details/89788002 1)下载并安装node. ...
软件工程-团队项目-班级网站软件需求规格说明书
目录一. 引言... 2 1.1 定位与目标... 2 1.2 对象... 2 1.3 软件需求分析理论... 2 1.4 软件需求分析目标... 3 二. 需求概述... 4 2.1 项目背景.. ...
基恩士PLC③--配方实例笔记
基恩士PLC③--配方实例笔记一般工作站有时候都会要求兼容多个产品,所以需要写多个配方以方便切换,这次说说基恩士PLC配方怎么写 1. 配方切换以及上下限如下图,02跟03程序段是按下递加或递减程 ...
vue实战入门基础篇五：从零开始仿门户网站实例-关于我们实现
上一篇:vue实战入门基础篇四:从零开始仿门户网站实例-网站首页实现https://blog.csdn.net/m0_37631110/article/details/123045334 一.目录第 ...
node.js创建网站实例3
node.js访问mysql数据库并把查询结果返回给前端 1.cmd中运行:npm install mysql -s 2.修改api.js的代码 // 1.先引入express模块,express是一 ...
scrapy+招聘网站爬虫笔记
scrapy+招聘网站爬虫笔记先看看要爬的网站:https://sou.zhaopin.com/?jl=719&kw=%E8%8D%AF%E7%89%A9 目的:获取每个城市的时间.区域.城 ...
网站搭建笔记精简版---廖雪峰WebApp实战-Day1:搭建开发环境笔记
网站搭建笔记精简版-廖雪峰教程学习@[三川水祭] 仅作学习交流使用,将来的你会感谢现在拼命努力的自己!!! 目录 win7安装配置git github赋予本机权限新建github项目本地搭建网页框 ...
栈溢出实例--笔记三（ret2libc）
栈溢出实例--笔记三(ret2libc) 1.栈溢出含义及栈结构 2.ret2libc基本思路 3.实战 3.1.二进制程序如下 3.2.查看栈结构 3.3.第一次栈溢出 3.4.第二次栈溢出 1.栈 ...

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

班级网页笔记

简介

导航页

首页

关于布局的总结

HTML班级网站实例（笔记1）相关推荐

最新文章

热门文章