html与css基础

最新推荐文章于 2023-10-09 11:12:55 发布

V________

最新推荐文章于 2023-10-09 11:12:55 发布

阅读量113

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/V________/article/details/108522723

版权

web前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

8.17总结
1.重置文件：让相同标签在不同浏览器中显示相同样式
2.判断主流浏览器，内核是不是自主研发
3．主流浏览器

4.开发思路-----垂直化
1.用户群体
A.渐进增强：先搭结构，根据用户，添加功能
B.优雅降级：先开发所有功能。根据用户，进行删减
5. doc.documentElement.style.fontSize = (winWidth / 1080) * 100 + ‘px’;
rem
fontSize：设置文件字体大小， winWidth：获取当前屏幕宽度，1080为设计稿尺寸，
6.引入js：，之后尽量放置在上一行
7.移动端设置雪碧图：！！！！多加background-size：整个雪碧图大小！！！！！

8.19总结
1.Bootstrap栅格布局（响应式）：可以根据浏览器不同的宽度进行布局
书写格式：先有一个容器（祖先元素，类名必须为container），在里面添加row，再在里面添加设置的内容
2.工程化
建scss文件，在其中任意加代码，自动生成css，在html中引用css文件，scss与css不同在于scss只要有错误就停止编译
在scss中，创建变量 $变量名称：具体样式值，可以在当前css批量修改
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots; li { color:$ lt;
}

此时如果写color：blue则无效！！！
可以嵌套使用css，并且background书写可以改变成如下
background: {
color: greenyellow;
clip: content-box;
}

4.创建混合器
//创建混合器
//书写格式：
// @mixin 混合器名称 {CSS代码块}
@mixin F74 {
display: flex;
justify-content: space-between;
align-items: center;
}

//使用混合器
//书写格式：@include 混合器名称；
@include F74;

5.创建带参混合器
//创建带参混合器
//书写格式：@mixin 混合器名称（参1，参数2，参数3…参数N）
//{属性名：参数1，属性名：参数2… 属性名：参数N}
@mixin F73($zhangxu1, $zhangxu2, $zhangxu3, $zhangxu4, $zhangxu5, $zhangxu6, $zhangxu7:123) {
color: $zhangxu5;
border: $zhangxu1 $zhangxu2 $zhangxu3;
background-color: $zhangxu4;
font-size: $zhangxu7;
}

//使用混合器
//书写格式：@include 混合器名称（值1，值2，值3…值n);
header {
// border: $F71 red;
@include F73(1px, solid, red, rgba(0, 255, 0, .5), red, 20px, 30px);
padding: 20px;
@include F74(red);
nav {
// border: $F71 skyblue;
@include F73(1px, dashed, skyblue, rgba(255, 255, 0, .5), skyblue, 20px);
padding: 10px;
ul {
@include F73(1px, dotted, yellowgreen, rgba(255, 0, 0, .5), yellowgreen, 20px);
6.选中a标签出现下划线从左到右显示的效果
a {
color: red;
text-decoration: none;
// text-decoration: underline;
position: relative;
// text-decoration: line-through;
&::before {
transition: all linear 0.5s;
position: absolute;
bottom: 0;
width: 0;
content: “”;
border-bottom: 1px solid red;
}
&:hover::before {
width: 100%;
}
}
&:hover>a {
color: yellowgreen;
}

8.17总结
1.重置文件：让相同标签在不同浏览器中显示相同样式
2.判断主流浏览器，内核是不是自主研发
3．主流浏览器
 
 
 

4.开发思路-----垂直化
1.用户群体
A.渐进增强：先搭结构，根据用户，添加功能
B.优雅降级：先开发所有功能。根据用户，进行删减
5. doc.documentElement.style.fontSize = (winWidth / 1080) * 100 + 'px';
rem
fontSize：设置文件字体大小， winWidth：获取当前屏幕宽度，1080为设计稿尺寸，
6.引入js：    <script src=""></script>，之后尽量放置在</body>上一行
7.移动端设置雪碧图：！！！！多加background-size：整个雪碧图大小！！！！！

8.19总结
1.Bootstrap栅格布局（响应式）：可以根据浏览器不同的宽度进行布局
书写格式：先有一个容器（祖先元素，类名必须为container），在里面添加row，再在里面添加设置的内容
2.工程化
建scss文件，在其中任意加代码，自动生成css，在html中引用css文件，scss与css不同在于scss只要有错误就停止编译
在scss中，创建变量     $变量名称：具体样式值，可以在当前css批量修改
$lt:blue;
li {
  color:$lt;
}

此时如果写color：blue则无效！！！
可以嵌套使用css，并且background书写可以改变成如下
            background: {
                 color: greenyellow;
                clip: content-box;
            }

4.创建混合器
//创建混合器
//书写格式：
//  @mixin 混合器名称 {CSS代码块}
@mixin F74 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

//使用混合器
//书写格式：@include 混合器名称；
      @include F74;

5.创建带参混合器
//创建带参混合器
//书写格式：@mixin 混合器名称（参1，参数2，参数3...参数N）
//{属性名：参数1，属性名：参数2...  属性名：参数N}
@mixin F73($zhangxu1, $zhangxu2, $zhangxu3, $zhangxu4, $zhangxu5, $zhangxu6, $zhangxu7:123) {
    color: $zhangxu5;
    border: $zhangxu1 $zhangxu2 $zhangxu3;
    background-color: $zhangxu4;
    font-size: $zhangxu7;
}

//使用混合器
//书写格式：@include 混合器名称（值1，值2，值3...值n);
header {
    // border: $F71 red;
    @include F73(1px, solid, red, rgba(0, 255, 0, .5), red, 20px, 30px);
    padding: 20px;
    @include F74(red);
    nav {
        // border: $F71 skyblue;
        @include F73(1px, dashed, skyblue, rgba(255, 255, 0, .5), skyblue, 20px);
        padding: 10px;
        ul {
            @include F73(1px, dotted, yellowgreen, rgba(255, 0, 0, .5), yellowgreen, 20px);
6.选中a标签出现下划线从左到右显示的效果
                a {
                    color: red;
                    text-decoration: none;
                    // text-decoration: underline;
                    position: relative;
                    // text-decoration: line-through;
                    &::before {
                        transition: all linear 0.5s;
                        position: absolute;
                        bottom: 0;
                        width: 0;
                        content: "";
                        border-bottom: 1px solid red;
                               }
                    &:hover::before {
                        width: 100%;
                    }
                }
                &:hover>a {
                    color: yellowgreen;
                }