CSS样式

最新推荐文章于 2022-05-06 17:49:04 发布

小尹^_^

最新推荐文章于 2022-05-06 17:49:04 发布

阅读量241

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_52093131/article/details/117404751

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML + CSS + JavaScript

结构 + 表现（美颜） + 交换（动作）

1、什么是css

如何学习

1.CSS是什么

2.CSS怎么用（快速入门）

3.CSS选择器（重点+难点）

4.美化网页（文字、阴影、超链接、列表、渐变）

5.盒子模型

6.浮动

7.定位

8.网页动画（特效）

推荐网站：

W3C

菜鸟教程

1.1、什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

字体，颜色，边距、高度、宽度、背景图片、网页定位、网页浮动…

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sGnRFiE7-1622377130004)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20210422161453344.png)]$

1.2、发展史

css1.0 ：只能美化一些基本样式（HTML）

css2.0 DIV(块)+CSS ，提出了HTML与CSS结构分离的思想，网页变得简单，利于SEO（搜索引擎优化）

css2.1 浮动、定位

css3.0 圆角边框、阴影、动画…浏览器兼容性~

练习格式：

1.3、快速入门

style：所有的样式用style展现的

基本入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    规范，<style>可以编写css的代码，没一个声明，最好使用分号结尾
        语法：
            选择器{
                声明1；
                声明2；
                声明3；
                }
        -->
    <style>
        h1{
            color: red;
        }
    </style>

</head>
<body>
<h1>我的标题</h1>

<h1></h1>
</body>
</html>

建议使用这种规范

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZfptYf78-1622377088905)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20210422170441737.png)]$

css的优势：

1、内容和表现分离

2、网页结构表现统一，可以实现复用

3、样式十分的丰富

4、建议使用独立于HTML的css文件

5、利用SEO，容易被搜索引擎收录！

Vue：不利于被搜索引擎收录！

1.4、CSS的3种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


<!-- 第二种
        内部样式-->
    <style>
        h1{
            color: aquamarine;
        }
    </style>
		<!-- 外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>


<!--优先级：行内样式>内部样式>外部样式
            就近原则!-->

<!--最简单的-->
<!--第一种-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可
一般不建议这样写，偶尔写-->
<h1 style="color: red">标题</h1>
</body>
</html>

扩展：外部样式两种写法

连接式：link
是HTML标签

<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">

导入式： style
@import是CSS2.1特有的！

<!--    导入式
         外部样式
         弊端:先展现结构,在渲染-->
    <style>
        @import url(css/style.css);
    </style>

2.选择器

作用：选择页面上的某一个或者某一个类元素

2.1、基本选择器

1、标签选择器：选择一类标签标签 {}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
            color:#a13d30;
            background: aquamarine;
            border-radius: 24px;
        }
        p{
            color: aliceblue;
        }
    </style>
</head>
<body>


<h1>学习java</h1>
<h1>学习java</h1>
<h1>学习java</h1>
<p>尹</p>
</body>
</html>

2、类选择器 class ：选择所有class属性一致的标签，跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 类签选择器 .class的名称{}
        好处，可以多个标签归类，是同一个class，可以复用
        */
        .xiao{
            color: red;
        }.xiao2{
            color: antiquewhite;
        }
    </style>
</head>
<body>


<h1 class="xiao">学习java</h1>
<h1 class="xiao2">学习java</h1>
<h1 class="xiao">学习java</h1>
<p>尹</p>
</body>
</html>

3、id选择器：全局唯一！ # id {}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* id 选择器  ：id必须保证全局唯一
            #id 名称{}
            优先级：
            不遵循就近原则，固定的
            id选择器>class 选择器>标签选择器
        */
        #xiaoming{
            color:#a13d30;
            background: aquamarine;
            border-radius: 24px;
        }
        .xiao{
            color: red;
        }
        p{
            color: aliceblue;
        }
    </style>
</head>
<body>


<h1 id="xiaoming">学习java</h1>
<h1 class="xiao">学习java</h1>
<h1>学习java</h1>
<p>尹</p>
</body>
</html>

优先级：id > class > 标签

2.2、层次选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N55DjAiJ-1622377088906)(C:/Users/Lenovo/AppData/Roaming/Typora/typora-user-images/image-20210530110054270.png)]

1、后代选择器：在某个元素的后面祖爷爷爷爷爸爸你

  /*    后代选择器*/
        body p{
            background: antiquewhite;
        }

2、子选择器, 只有一代，儿子


    /*    } !*    子选择器*!*/
        body > p{
            background: antiquewhite;
        }

3、相邻兄弟选择器同辈,对下不对上。

/*    兄弟选择器*/
    .alert +p {
        background: red;
    }

/* 通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/

        .alert ~p {
            background: red;
        }

2.3、结构伪类选择器

伪类：条件，：


/*<!--       ul第一个子元素 */

           ul li:first-child{
              background: red;
               color: aqua;
/*}
            /* ul最后一个子元素*/
            ul li:last-child{
                background: red;
                color: aqua;
            }

            /*选中1：定位到父元素，选中当前的第一个元素
            选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！  顺序
            */
            p:nth-child(2){
                background: aqua;
            }

            /*选中父元素，下标p的第二个元素，类型*/
            p:nth-of-type(1){
                background: black;
            }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cSt27kv6-1622377088907)(C:/Users/Lenovo/AppData/Roaming/Typora/typora-user-images/image-20210530110101486.png)]

2.4、属性选择器

id + class 结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*          后代选择器*/
        .demo a{

            float: left;    /*浮动*/
            display: block; /*块级元素*/
            height: 50px ; /*高度元素*/
            width: 50px ;/*宽度元素*/
             border-radius: 10px;       /*    圆角边框*/
            background: blueviolet; /*背景颜色*/
            text-align: center;/*文本对齐方式：居中*/
            color: aqua;  /*文字颜色*/
             text-decoration: none ; /*    去下划线*/
             margin-right: 5px ;/*    盒子模型，外边距， 向右偏移5px*/
            font: bold 20px/50px Arial/*    文本居中  bold:粗体 字体大小  行高  Arial*/
        }

     /*  属性名，属性名=属性值（正则）
        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾
        */

    /*        存在id属性的元素     a[]{}
            */
            a[id]{
                background: blue;
            }
/*        id=first的元素*/
            a[id=first]{
                background: red;
            }

    /*        class 中有 links的元素*/
            a[class*="links"]{
                background: antiquewhite;
            }

    /*      选中href中以http开头的元素  */
            a[href^=http]{
                background: cornflowerblue;
            }
    /*     $= 以这个结尾*/
            a[href$=pdf]{
                background: darkseagreen;
            }




    </style>
</head>
<body>
        <p class="demo">

            <a href="http" class="links item first "id="first">1</a>
<!--                                                        target="_blank"在新页面打开
            title="test" 悬浮    -->
            <a href="http"class="links item cative" target="_blank" title="test">2</a>
            <a href="images/123.html" class="links item cative">3</a>
            <a href="images/123.png" class="links item">4</a>
            <a href="images/123.jpg" class="links item">5</a>
            <a href="abc" class="links item">6</a>
            <a href="/a.pdf" class="links item">7</a>
            <a href="/abc.pdf" class="links item">8</a>
            <a href="abc.doc" class="links item">9</a>
            <a href="abcd.doc" class="links item last">10</a>
        </p>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SfF3vIUY-1622377088909)(C:/Users/Lenovo/AppData/Roaming/Typora/typora-user-images/image-20210530115501346.png)]

总结

 正则表达式的通配符：
= 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾

选择器的重要性：使用区域：CSS、JS、JQuery、vue

3、美化网页元素

3.1、为什么要美化网页

1、有效的传递页面信息

2、美化网页，页面漂亮，才能吸引用户

3、凸显页面的主题

4、提高用户体验

span 标签：重点要凸出的字，使用span标签套起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #title1{
            font-size: 20px;
        }
    </style>
</head>
<body>

欢迎学习 <span id="title1"> java</span>

</body>
</html>

3.2、字体样式


<!--   font-family:  字体
        font-size:字体大小
         font-weight: 字体粗细
          color: 字体颜色
          px:像素
          em:缩进
-->
    <style>

   body{
                font-family: "Axure Handwriting", 楷体;
                color: cornflowerblue;
            }
            h1{
                font-size: 50px;
            }
            .p1{
                font-weight: bold;
            }
    </style>

3.3、文本样式

1、颜色 color rgb rgba

2、文本对齐方式 text-align = center

3、首行缩进 text-indent:2em;

4、行高 line-height：单行文字上下居中！ line-height = height

5、装饰 text - decoration

6、文本图片水平对齐：vertical - align : middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    颜色：
    单词
    RGB：红绿蓝 0~f
    RGBA :可以加透明度

    text-align:排版
    文本居中：text-align: center
    右边：text-align: right
    左边：text-align: left

      text-indent: 2em;:段落首行缩进

       height: 100px;
            line-height:300px ;
      行高，和 块 的高度一致，就可以上下居中



    -->
    <style>
        h1{
            /*color: red;*/
            color:rgba(0,255,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: cornflowerblue;
            height: 300px;
            line-height:300px ;
        }
        .l1{
            /*下划线*/
            text-decoration: underline;
        }
        .l2{
            /*中划线*/
            text-decoration:line-through;
        }
        .l3{
            /*上划线*/
            text-decoration:overline;
        }
        a{
            /*a标签或超连接，去除下划线*/
            text-decoration:none;
        }

        <!--

        /*水平对齐~ 参照物，a ,b
        -->*/
        img,span{
            vertical-align: middle;
        }

    </style>

</head>
<body>

<p class="l1">12345</p>
<p class="l2">12345</p>
<p class="l3">12345</p>
<a href="">12312</a>



<h1>
    Java （计算机编程语言）
</h1>
<p class="p1">
    Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程 [1]  。
</p>

<p>
    Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点 [2]  。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等 [3]  。

</p>
<p class="p3">
    Remember when life's path is steep to keep your mind even.记住：当人生很苦逼的时候，你要保持淡定。
</p>

<p>
    <img src="images/钱学森.png" alt="">
    <span>12342141321</span>
</p>


</body>
</html>

3.4、阴影

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kfe6WEBY-1622377088910)(C:/Users/Lenovo/AppData/Roaming/Typora/typora-user-images/image-20210530155038756.png)]

/*阴影*/
        /*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #price{
            text-shadow: aquamarine 10px 0px 2px;
        }

3.5、超链接伪类

正常情况下，a，a:hover

/*去除下划线*/
       /* 默认的颜色*/
        a{
            text-decoration: none;
            color:#000000;

        }
        /*鼠标悬浮的效果*/
        a:hover{
            color: cornflowerblue;
        }

3.6、列表

/*ul li */
/*
list-style:
    none 去掉原点
    circle 空心圆
    decimal 数字
    square 正方形
*/

ul{
    background: cornflowerblue;
}

ul li {
    /*行高*/
    height: 30px;
    /*前面的丶去掉*/
    list-style: none;
    /*缩进*/
    text-indent: 1em;
}

3.7、背景

背景颜色

background:red；

背景图片

  div{
            width: 1000px;
            height: 700px;
            /*边框 粗细、样式、颜色*/
            border: 1px solid red;
            background: url("images/img.png");
            /*默认是全部平铺的 repeat*/
        }
        .div1{
            /*水平*/
            background-repeat: repeat-x ;
        }.div2{
            /*垂直*/
            background-repeat: repeat-y ;
        }.div3{
            /*不平铺*/
            background-repeat:no-repeat ;
        }/*.div3{
            !*图片大小动了*!
            background-repeat: round ;
        }*/

练习：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zjQtDvuG-1622377088910)(C:/Users/Lenovo/AppData/Roaming/Typora/typora-user-images/image-20210530181303529.png)]

2.8、渐变

推荐网站：https://www.grabient.com/

background-color: #4158D0;
background-image: linear-gradient(225deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

4、盒子模型

4.1、什么是盒子

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6wPIxmJ3-1622377088911)(C:/Users/Lenovo/AppData/Roaming/Typora/typora-user-images/image-20210530183621167.png)]

margin：外边距

padding：内边距

border：边框

4.2、边框

1、边框的粗细

2、边框的样式

3、边框的颜色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jJBe4Mvh-1622377088912)(C:/Users/Lenovo/AppData/Roaming/Typora/typora-user-images/image-20210530193123832.png)]

4.3、内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    外边距的妙用：居中元素-->
    <style>
        /*body总有一个默认的外边距，常见操作*/
        h1,ul,li,a, body{
            /*外边距*/
            margin:0;
            /*内边距*/
            padding: 0;
            /*去除下划线*/
            text-decoration: none;



        }
        #box{
            width: 300px;
            /*border：粗细、样式、颜色*/
            border: 1px solid red;
            /*auto：默认自动对齐*/
            margin: 0 auto;
        }
        /*
        顺时针旋转
        margin:0    上下左右
        margin:0 1px    上下  左右
        margin:0 1px 2px  上  左右 下
        margin:0 1px 2px 3px 上 右 下 左
        */
        h2{
            font-size: 16px;
            background-color: red;
            /*行高*/
            line-height: 30px;
            margin :0;

        }
        form{
            background: #4158D0;
        }
        input{
            border: 1px solid black;
        }
        /*div:父级*/
        div:nth-of-type(1){
            padding: 10px;
        }

    </style>
</head>
<body>

<div id="box">
    <h2>会员登录</h2>
<!--    form：表单-->
    <form action="#">
        <div>
            <span>用户名：</span>
<!--            输入框-->
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <!--            输入框-->
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <!--            输入框-->
            <input type="text">
        </div>

    </form>

</div>

</body>
</html>

盒子的计算方式：你的这个元素有多大？美工 +　前端

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CikivZmM-1622377088912)(C:/Users/Lenovo/AppData/Roaming/Typora/typora-user-images/image-20210530195937484.png)]

元素的最终大小＝margin（外边距） + border(边框粗细) +　padding(内边距) + 内容宽度

4.4、圆角边框border-radius:

<!--
    左上 右上 右下 左下 ，顺时针方向
    -->
<!--
     圆圈：    圆角 = 半径！
-->
    <style>
        div{
            width: 100px;
            height: 100px;
            /*边框*/
            border: 10px solid red;
            /*圆角边框*/
            border-radius: 50px;
        }
    </style>

4.5、盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*div{*/
    /*  width: 100px;*/
    /*  height: 100px;*/
    /*  !*边框*!*/
    /*  border: 10px solid red;*/
    /*  !*盒子阴影*!*/
    /*  box-shadow: 10px 10px 100px yellow;*/
    /*}*/


    /*margin:居中
    要求：外边是块元素，块元素有固定的宽度
    */
    img{
      width: 300px;
      height: 300px;
      /*居中*/
      margin: 0 auto;
      /*边框*/
      border-radius: 150px;
      /*盒子阴影*/
      box-shadow: 10px 10px 100px red;
    }
  </style>
</head>
<body>
<!--                居中-->
<div style="width: 1500px;display: block;text-align:center ">
  <img src="images/img.png" alt="">
</div>

</body>
</html>

 /*居中*/
    div{
        width: 100px;
        border: 1px solid black;
    }
    img{
        margin: 0 auto;
        width: 50px;
        height: 50px;
        display: block;
    }

5、浮动

5.1、标准文档流

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qzhCl35B-1622678567509)(css.assets/%E6%B5%AE%E5%8A%A8.png)]

块级元素：独占一行

h1~h6  p  div  ul li 列表……

行内元素：不独占一行

span  a img  strong ……

行内元素可以被包含在块级元素中，反之，不可以

5.2、display

行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


  <!--
    display:
    block; 块元素
    inline; 行内元素
    inline-block; 是块元素 但是可以内联 在一行！
    none 消失


  -->
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid royalblue;
      display: inline;
    }
    span{
      width: 100px;
      height: 100px;
      border: 1px solid royalblue;
      display: block;/*块*/
    }
  </style>
</head>
<body>

<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

这个也是一种实现行内元素排列的方式，但是我们很多情况都使用float

5.3、float

1、左右浮动 float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="father">
        <div class="layer01"><img src="images/img.png" alt=""></div>
        <div class="layer02"><img src="images/箭头.png" alt=""></div>
      <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，知道它的外边缘碰到包含框或另一个浮动盒子为止。
      </div>
    </div>
</body>
</html>

div{
    margin: 10px;
    padding: 5px;
}
#father{
    /*边框 ：*/
    border: 1px #000 solid ;
}
.layer01{
    border: 1px red dashed ;
    display: inline-block;
    float: left;

}
.layer02{
    border: 1px blue dashed ;
    display: inline-block;
    float: right;
}
.layer04{
    border: 1px coral dashed ;
    display: inline-block;
/*    清除浮动*/
    /*既有浮动的效果，又有块元素的效果*/
    clear: both;

}
img {

    width: 100px;
    height: 100px;
    border-radius: 525px;
}

5.4、父级边框塌陷的问题

clear

/*    clear：清除浮动
      clear: rigth; 右侧不允许有浮动元素
      clear: left; 左侧不允许有浮动元素
      clear: both; 两侧不允许有浮动元素
      clear: none; 没有
*/

解决方案：

1、增加父级元素的高度~

#father{
    /*边框 ：*/
    border: 1px #000 solid ;
    height: 1000px;
}

2、增加一个空的div标签，清除浮动

<div id="clear"></div>

#clear{
    clear: both;
}

3、overflow

在父级元素中增加一个 overflow:hidden;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    #content{
        width: 200px;
        height: 150px;
        /*多余地方隐藏*/
        /*overflow: hidden; 大多时候用 hidden，虽然内容被修剪，但其他内容是可见的*/
        /*滚动条*/
        /*overflow: scroll;*/
        /*滚动条*/
        overflow: auto;

    }
    </style>
</head>
<body>
<!--content :内容-->
<div id="content">
    <img src="images/img.png" alt="">
    <p>
        《码出高效：Java 开发手册》源于影响了全球250万名开发工程师的《阿里巴巴Java开发手册》，作者静心沉淀，对Java规约的来龙去脉进行了全面而彻底的内容梳理。《码出高效：Java 开发手册》以实战为中心，以新颖的角度全面阐述面向对象理论，逐步深入地探索怎样成为一位优秀开发工程师。比如：如何驾轻就熟地使用各类集合框架；如何得心应手地处理高并发多线程问题；如何顺其自然地写出可读性强、可维护性好的优雅代码。
    </p>
</div>
</body>
</html>

4、在父类添加一个伪类

#father :after{/*在father后面执行一些操作*/
    /*1、加一个空内容*/
    content: '';/*相当于一个空的div很小*/
    /*2、让这个文本变成正常的元素块，有宽度和高度了*/
    display: block;
    /*3.把这个元素clear: both; 两侧不允许有浮动元素*/
    clear: both;
}

小结：

浮动元素后面增加空div
1. 简单，代码中尽量避免空div
设置父元素的高度
1. 简单，元素假设有了固定的高度，就会被限制
overflow
1. 简单，下拉的一些场景避免使用
父类添加一个伪类：after（推荐）
1. 写法稍微复杂一点，但是没有副作用，推荐使用！

笔试题必考！

5.5、对比

display

方向不可控制
float

浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

6、定位 position

6.1、相对定位 relative

  position: relative;/*相对定位*/

```html



```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--相对定位
    相对于自己原来的位置进行偏移~
    -->

  <style>
      body{
          padding: 20px;
      }
    div{
      /*外边距*/
      margin: 10px;
      /*内边距*/
      padding: 5px;
      /*字体大小*/
      font-size: 12px;
      /*字体行高*/
      line-height: 25px;
    }
    #father{
      border: 1px solid #4158D0;
      padding: 0;

    }
    #first{
      border: 1px dashed #122312;
      background: #C850C0;
      position: relative;/*相对定位*/
      top: -20px;/*距离上边有-20个位置*/
      left: 20px;/*距离左边有20个位置*/

    }
    #second{
      border: 1px dashed salmon;
      background:wheat;
    }
    #third{
      border: 1px dashed seagreen;
      background: aquamarine;
        position: relative;/*相对定位*/
        bottom: -10px;/*距离下边有-10个位置*/
        right: 20px;/*距离右边有20个位置*/
    }
  </style>
</head>
<body>

<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>

</body>
</html>

相对定位：position: relative;

相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留

  position: relative;/*相对定位*/
    top: -20px;/*距离上边有-20个位置*/
	bottom: -10px;/*距离下边有-10个位置*/
    right: 20px;/*距离右边有20个位置*/
    left: 20px;/*距离左边有20个位置*/

练习

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RIplmxtm-1622678567511)(css.assets/image-20210602171937342-1622677433331.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #box{
      width: 300px;
      height: 300px;
      border: 2px solid red;
      padding: 10px;
    }
    a{
      width: 100px;
      height: 100px;
      /*去掉下划线*/
      text-decoration: none;
      background: bisque;
      /*高度*/
      line-height: 100px;
    /*  文字居中*/
      text-align: center;
      /*文字颜色*/
      color: crimson;
      /*变成块级元素*/
      display: block;
    }
    /*鼠标悬浮的效果*/
    a:hover{
      background: #4158D0;
    }
    .a2,.a4{
      position: relative;
      left: 200px;
      top:-100px;
    }
    .a5{
      position: relative;
      left: 100px;
      top:-300px;
    }
  </style>
</head>
<body>

<div id="box">
  <a class="a1" href="#">链接1</a>
  <a class="a2" href="#">链接2</a>
  <a class="a3" href="#">链接3</a>
  <a class="a4" href="#">链接4</a>
  <a class="a5" href="#">链接5</a>

</div>

</body>
</html>

6.2、绝对定位 absolute

/*绝对定位*/
        position: absolute;

定位：居于XXX位置，上下左右

1、没有父级元素定位的前提下、相对于浏览器定位

2、假设父级元素存在相对定位，通常会相对于父级元素偏移

3、在父级元素范围内移动

相对于父级或浏览器的位置，进行指定的偏移，相对定位的话，它不在标准文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    div{
      /*外边距*/
      margin: 10px;
      /*内边距*/
      padding: 5px;
      /*字体大小*/
      font-size: 12px;
      /*字体行高*/
      line-height: 25px;
    }
    #father{
      border: 1px solid #4158D0;
      padding: 0;
        position: relative;

    }
    #first{
      border: 1px dashed #122312;
      background: #C850C0;
    }
    #second{
      border: 1px dashed salmon;
      background:wheat;
        /*绝对定位*/
        position: absolute;
        right: 40px;
    }
    #third{
      border: 1px dashed seagreen;
      background: aquamarine;
    }
  </style>
</head>
<body>

<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>

</body>
</html>

6.3、固定定位 fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      height: 1000px;
    }
    /*选择div下面的第几个*/
    div:nth-of-type(1){/*绝对定位：相对于浏览器*/
      width: 100px;
      height: 100px;
      background: #4158D0;
      position: absolute;
      right: 0;
      bottom: 0;
    }
    div:nth-of-type(2){/*fixed 固定定位：*/
      width: 50px;
      height: 50px;
      background: coral;
      position: fixed;
      right: 0;
      bottom: 0;
    }
  </style>
</head>
<body>

<div>div1</div>
<div>div2</div>
</body>
</html>

6.4、z-index

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GCY35W5t-1622678567512)(css.assets/image-20210602185007127.png)]

图层

z-index ：默认0 最高999

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="content">
  <ul>
    <li><img src="images/1.jpg" alt=""></li>
    <li class="text">学习</li>
    <li class="bj"></li>
    <li>时间：2021-01-01</li>
    <li>地点：月球</li>
  </ul>
</div>
</body>
</html>

 /*背景透明度*/
    opacity: 0.5;/*透明度*/

content{
    width: 380px;
    padding: 0;
    margin: 0;
    /*超出了，隐藏*/
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 2px red solid;
}
ul ,li{
    /*原点在padding里面*/
    padding: 0;
    margin: 0;
    /*去除原点*/
    list-style: none;
}
/*父级元素相对定位*/
#content ul {
    position: relative;
}
.text,.bj{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 110px;
    left: 20px;
}
.text{
    color: #FFCC70;
    z-index: 999;
}
.bj{
    background: blue;
    /*变成透明*/
    opacity: 0.5;/*透明度*/
    /*过滤器*/
    filter: alpha(opacity=50);
}

7、动画

菜鸟教程

css动画

canvas动画

卡巴斯基：https://cybermap.kaspersky.com/cn

源码之家告白网站

HTML5 浪漫告白

模板之家

扩展

前端用 less 写css

用写代码的思想写，运行结果是css

练习

QQ会员页面导航

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ会员</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="wrap">
<!--      头部-->
      <header class="nav-header">
          <div class="head-contain">
            <a href="" class="top-logo"><img src="img" alt="" width="145" height="90"></a>
            <nav class="top-nav">
              <ul>
                <li><a href="">功能特权</a></li>
                <li><a href="">游戏特权</a></li>
                <li><a href="">生活特权</a></li>
                <li><a href="">会员活动</a></li>
                <li><a href="">成长体系</a></li>
                <li><a href="">年费专区</a></li>
                <li><a href="">超级会员</a></li>
              </ul>
            </nav>
            <div class="top-right">
              <a href="">登录</a>
              <a href="">开通超级会员</a>
            </div>
          </div>
      </header>
    </div>
</body>
</html>

css

*{
    /*内外边距*/
    /*内边距*/
    padding: 0;
    /*外边距*/
    margin: 0;
}

a{
    /*    去下划线*/
    text-decoration: none;
}
.nav-header{
    /*高度*/
    height: 90px;
    /*宽度*/
    width: 100%;
    /*RGBA :可以加透明度*/
    background: rgba(0,0,0,.6);
}
.head-contain{
    /*宽度*/
    width: 1180px;
    /*高度*/
    height: 90px;
    /*auto：默认自动对齐*/
    margin: 0 auto;
    /*文本对齐方式：居中*/
    text-align: center;
}
.top-logo,.top-nav li ,.top-right{
    /*高度*/
    height: 90px;
    /*inline-block; 是块元素 但是可以内联 在一行！*/
    display: inline-block;
    /*文本图片水平对齐：vertical - align : middle
    top：顶部
    */
    vertical-align: top;
}
.top-nav{
    /*外边距*/
    margin: 0 48px;
}
.top-nav li {
    /*行高*/
    line-height: 90px;
    /*宽度*/
    width: 90px;
}
.top-nav li a{
    /*块级元素*/
    display: block;
    /*文本对齐方式：居中*/
    text-align: center;
    /*文字大小*/
    font-size: 16px;
    /*颜色*/
    color: #4158D0;
}
.top-nav li a:hover{
    /*颜色 */
    color: blue;
}
.top-right a{
    /* inline-block; 是块元素 但是可以内联 在一行！*/
    display: inline-block;

    /*字体大小*/
    font-size: 16px;
    /*盒子模型*/
    margin-top:25px ;
    /*    圆角边框*/
    border-radius: 35px;
}
.top-right a:first-of-type{
    width: 93px;
    height: 38px;
    /*行高*/
    line-height: 38px;
    color: #FFCC70;

    /*边框
    border：粗细、样式、颜色
    */
    border: 1px #FFCC70 solid;
}
.top-right a:first-of-type:hover{
    /*颜色*/
    color: coral;
    /*背景颜色*/
    background: coral;
}
.top-right a:last-of-type:hover{
    /*背景颜色*/
    background: #FFCC70;
}