HTML班级网站实例（笔记1） |
您所在的位置：网站首页 › 怎么制作班级相册 › HTML班级网站实例（笔记1） |
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%的页面轮播 首页
|
因为一些问题，页面溢出总是解决不了。我将分析响应式导航条，一个登录框和一个内容框【本文地址】
今日新闻 |
推荐新闻 |