项目的易错点

页面引入 iframe   宽设置百分百 高设置头部header 高度 

跳转无法平铺给  header 加:   <base target="_top">

1.在HTML中target目标的四个参数的用法：
1、target=”_self”表示：将链接的画面内容，显示在目前的视窗中。(内定值) 。 即：同窗口打开。
2、target=”_parent”表示：将链接的画面内容，当成文件的上一个画面。即：当前窗口打开。
3、target=”_top”表示：将框架中链接的画面内容，显示在没有框架的视窗中（即除去了框架)。即：顶端打开窗口。
4、target=”_blank”表示：将链接的画面内容，在新的浏览视窗中打开。即：打开新窗口

---

 display：grid  网格布局

grid-template-columns： 列宽

grid-template-rows： 行高

grid-gap：列间距 加到最大也不会撑出盒子的大小，但会压缩外边距知道外边距0

grid-columns:行间距

grid-column-start: 1   列从哪个开始

grid-column-end: 3   列到哪个结束

简写：grid-column:1/3  横跨几列

简写：grid-row：1/3     横跨几行

---

创建动画

@keyframes identifier {

        from{
        开始要什么

        }

        to{

        结束的状态

        }

}

transform的属性 

transform: translateX(-100px);   x轴向左移动

transform: translatey(-100px);   y轴向下移动

transform：scale（1.5）；放大1.5倍

Transform：rotateX/rotateY/rotateZ；/*rotate（旋转）*/

            /* 动画名称 */
            /*   animation-name: move; */

            /* 持续时间 */
            /*  animation-duration: 2s; */

            /* 运动曲线 */
            /*  animation-timing-function: ease; */

            /* 何时开始 */
            /*  animation-delay: 0.5s; */

            /* 重复次数 iteration 重复的    count 次数    infinite 无限 */
            /*   animation-iteration-count: infinite; */

            /*    是否反方向播放   默认的是 normal  如果想要反方向 则 alternate*/
            /*   animation-direction: alternate; */

            /* 动画结束后的状态 默认的是backwa回到起始状态 我们可以让它停留在结束状态forwards */
            /* animation-fill-mode: forwards; */

            /*  animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: move 2s linear 0s infinite alternate forwards;
            /*  linear是匀速的意思 */

---

出现相同样式属性不同时 使用 @mixin 时

@mixin input($url, $x, $y) {     // 要先定义$url ,$x,$y

    background: url($url) $x $y;  //在 引用url的时候要记得给 $url加括号 如$(url)             

    background-position: no-repeat;  //背景是否平铺建议单独列出

}

引用 ：@include input ("../img/head/search_icon.png", 0px, -44px);  "超链接需要加双引号括抱起来"  与x y值用逗号隔开

出现相同样式 和相同的属性时 

单独使用类选择器  放到一起 再通过 @extend .name; 来引用 

---

伪类选择器和相邻兄弟选择器 和兄弟选择器

:focus"选择器用于选取获得焦点的元素"

:focus+a 相邻兄弟选择器 

 

~a 是兄弟选择器

---

个人见解：

做头部和尾部的时候要设置一个合理的宽高 使其后面可以很好的兼容后面的页面

先布局画好模块，在进行填内容 一个要规定一个固定的版心 并居中 所有的页面尽量都使用一个宽度的版心

每个图片 和需要点击的文字，都要考虑是不是需要添加超链接 点击 

使用scss 来写伪类选择器时 一定要记得 在伪类选择器 面前加&符

加精灵图 ：先设置一个span 使其变成 行内块元素 display:inline-black 在设置宽高 然后在加背景图片再通过 精灵图定位去定图片
整体的宽高需要一定 设置一定的margin padding  或使用position 定位来定 

定位：在绝对定位 和相对定位 时

相对定位：会依照父元素设置的宽高

绝对定位：会依照整个页面来设置自己的位置  或 父元素的定位的范围（每一个绝对定位建议都在他的父元素设置一个相对定位来规定 绝对定位的大概位置）