2022/7/28-29项目遇到的问题及总结-CSDN博客

本文链接：https://blog.csdn.net/m0_63498249/article/details/126091585

一、iframe

当一个项目中多个页面头部和尾部一样时可以同时使用一个单独的HTML文件

添加这串代码进行引入：

head.html为文件位置和名称。

引入后显示不正常，如：

这时需要添加宽和高(注：高度要和引入的一样)。

若之后发现iframe超链接跳转不正常时

需要在引入文件中的head标签中设置一个base标签：<base target="_top">

二、background-position

display: flex;

justify-content: space-around; //两端对齐

设置背景图位置：

background-position: center 7px; //CSS属性为每一个背景图片设置初始位置

三、text-index属性能定义一个块元素首行文本内容之前的缩进量

text-indent: 0; text-indent: 30%;

四、动画效果

transition-duration: 10s; //过度持续时长

&:hover{

transform: translateX(-1200px); //X轴方向平移及距离

transform: translateX(-2400px);

transform: translateX(-3600px);

}

animation-name: li; //animation-name属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列

animation-duration: 2s; //animation-duration属性指定一个动画周期的时长

animation-direction: alternate; //属性指示动画是否反向播放，它通常在简写属性中设定

@keyframes li{

0%{

// filter: blur(3px); // 模糊滤镜

transform: scale(1); // 起到放到放大或缩小的效果

}

35%{

transform: scale(1.1);

}

70%{

transform: scale(0.8);

}

100%{

// filter: none;

transform: scale(1);

}

}

五、网格布局

display: grid;        // 网格布局

grid-template-columns: 420px 550px; // 从左到右

grid-template-rows: 60px 420px 80px; // 从上到下

grid-template-columns: repeat(4,230px);        // 4列，230px宽度

grid-template-rows: repeat(4,320px);        // 4行，320px宽度

column-gap: 20px;        // 列间距

row-gap: 20px;        // 行间距

grid-column-start: 1; // 开始

grid-column-end: 3; // 结束

justify-content: space-between; // 两端对齐

flex-direction: column; //css属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。

// hr虚线效果

hr{

border:none;

border-top:1px dashed #BCA7B7; //若设置border：1px的话效果为2px

}

六、头部二维码隐藏及显示

li{

        display: inline-block; //同行显示
}

img{

        position: absolute;

display: none; //隐藏，于项目中起到隐藏图片

}

// 给li标签添加一个鼠标悬停效果目的是让二维码显示出来

&:hover img{

        display: block; //多余显示

}