HTML/CSS【记录】

HTML

• 转义字符 语法：&开头;结尾
  • 空格：中间加nbsp
  • 空格：加emsp
  • 大于号：gt
  • 小于号：lt
  • 版权号：copy

- 粗体<strong>
- 斜体<em>
- 横线<hr />
- 无序列表<ul><li>
- 有序列表<ol><li>
- 图片<img src="..." alt...title />
- 超链接<a href="...">
- 表格<table> <tr> <td> <colspan> <rowspan>

• input中required属性：表示必填，记得要写在form表单里

CSS

• ul去圆点：list-style: none
• a去下划线：text-decoration: none
• 加圆角：border-radius: 4px
• overflow: hidden;//当img在div中超出，对div加这个超出部分就不会被点击到了
• background-size: contain/cover;//contain保持整体，cover会放大，填满
• border-bottom: 6px solid;
• border-image: linear-gradient(to left, #C6D52F 0%, #35792A 100%) 30 30;

导入本地下载的字体样式

@font-face {
    font-family: 'Montserrat';
    src: url('../resources/fonts/Montserrat-Bold-3.otf'), ...;
    font-weight: bold;
    ...
}
src逗号后面应该是替代的意思，就是前面的不顶用了就用后面的替代

absolute下如何垂直居中

top: 50%
你会发现根本没居中, 其实还需要一步操作
设置一个margin-top: -24px
margin-top要为负数, 具体的值为这个东西的高度的一半

如果是水平居中的话，可以设置width: 100%; text-align: center;

padding挺好的, 一般一个div中就需要一个padding让整体看起来更好看一些

@media (max-width: 996px)

a标签加渐变色/scss/屏幕大小
@media (max-width: 996px) {
    h1 {
        &.title-hello {
            font-size: 32px;
            line-height: 32px;
            & a{
                background: linear-gradient(.613turn,#35292b,#036c1e);
                -webkit-background-clip: text;
                color: transparent;
                display: inline-block;
            }

        }
    }
...

video 全屏的时候层级是很高的,如果你想写一个button显示在全屏上,必须得和该video标签至少是同级的,子类应该也行
父类肯定会被video覆盖,看不到button,即便设置了z-index也不行,不知道该如何解决

实现一行平均分三列

    .container {
        display: grid;
        grid-template-columns: repeat(3, 33.33%);
    
        a {
            overflow-wrap: break-word;// 下面的a标签加了这句换行

虽然grid很好用,但是被师傅拒绝了,因为多种浏览器的兼容性太差了

CSS Grid 网格布局教程