游戏网页1

网站站点搭建笔记：
2019-3-19
一个项目开始之初，首先新建derictory站点文件夹。！！！思考布局。
1.标题图标更改：
查看大网站源代码，查找ico路径，把favicon.ico放网站主链末端回车，找到图片，图片都在根目录。
引入ico的格式：

2.normalize基础css
方便使用的css，修复了各浏览器的一些bug，没有把基础样式全部去掉，而是保留了一部分有用的样式。
引入外部css样式，注意逻辑使用顺序，和js引用一样，需要先加载的放上面，自己的css在最下面。

3.创建些方便使用的样式，例如左浮右浮清除浮动等：

.fl{
    float: left;
}
.fr{
    float: right;
}
.clearfix::after{
    /*设置添加的子元素的内容为空*/
    content: "";
    /*设置添加的子元素为块级元素*/
    display: block;
    /*设置添加的子元素的高度为0*/
    height: 0;
    /*设置添加的子元素看不见*/
    visibility: hidden;
    /*给添加的子元素设置clear: both;*/
    clear: both;
}
.clearfix{
    /*兼容IE6*/
    *zoom:1;
}

---

2019-3-20
1.video样式中poster可添加未加载视频是图片链接，video标签中加source设置不同浏览器兼容性。

video的css样式，

object-fit:cover;

等比拉伸填满元素。

---

1.相同的nav可以用li，有链接的可以用a标签。
2.ui设计图5：30
3.线性渐变

background: linear-gradient(to bottom,#46018c,#0200a1);

样式分析：li设置一个渐变，li里的a也设置一个透明图片。
4.宽高绝对定位，居中

position: absolute;
left: 50%;
transform: translate(-50%);

5.logo可放h1中

---

1.父元素绝对定位影响了子元素，只需父元素css加上

z-index:999;

2.添加了border-bottom需要再加个box-sizing: border-box;避免扩大盒子。

border-bottom: 2px solid rgba(255,255,255,0.4);
box-sizing: border-box;

移上图片显示下划线思路：a设置底边框透明border-bottom：2px solid transparent；
a:hover设置边框颜色

a标签中可设置动画，使hover边框颜色变化动画时间为0.5s。

transition: border-color 0.5s;

--------
六、