CSS速成指南-优快云博客

本文链接：https://blog.youkuaiyun.com/uxiang_blog/article/details/105518700

前言：此笔记根据狂神哔哩哔哩视频所写，转载请自觉注明出处
点击跳转狂神哔哩哔哩

1、什么是CSS

如何学习

1.CSS是什么

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

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

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

5.盒子模型

6.浮动

7.定位

8.网页动画（特效效果）

1.1、什么是CSS

Cascading Style Sheet 层叠级联式样表

CSS ：表现（美化网页）

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pbpuzQRt-1586861713862)(upload\image-20200406085902090.png)]

1.2、发展史

CSS1.0

CSS2.0 DIV(块) + CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画… 浏览器兼容性~

1.3、快速入门

style

基本入门：

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

    <!--规范<style> 可以编写css的代码,每一个声明，最好用分号结尾
    语法：
         选择器{
             声明1;
             声明2;
         }
    -->

    <style>
        h1{
            color: crimson;
        }
    </style>
</head>
<body>

<h1>我是标题</h1>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AT2SRucX-1586861713863)(upload\image-20200407110052982.png)]

css的优势：

1、内容与表现分离

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

3、样式十分丰富

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

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

1.4、CSS食物·3种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
            color: lawngreen;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
<!--优先级：就近原则-->

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>
</body>
</html>

扩展：外部样式两种写法

链接式:

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

导入式:

@import是CSS2.1特有的！

<!--导入样式-->
    <style>
        @import url(style.css);
    </style>

2、选择器

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

2.1、基本选择器

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

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

    <!---->
    <style>
        h1{

        }
    </style>

</head>
<body>

<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>

    <!--类选择器的格式 .class的名称{}
    好处，可以多个标签归类，是同一个class，可以复用
    -->
    <style>
        .uxiang{
            color: rgba(136, 255, 161, 0.95);
        }
        .oxiang{
            color: #675aff;
        }
        .feiyu{
            color: #f54eff;
        }

    </style>
</head>
<body>

<h1 class="uxiang">标题1</h1>
<h1 class="feiyu">标题2</h1>
<h1 class="oxiang">标题3</h1>
<p class="oxiang">P1标签</p>

</body>
</html>

3、id选择器

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

    <style>
        /*id选择器 ：id必须保证全局唯一！
        #id名称{}
        优先级：
        不遵循就近原则，固定的
        Id选择器>类选择器>标签选择器
        */
        #uu{
            color: #2252ff;
        }
        .oxiang{
            color: #0cff1b;
        }
        h1{
            color: #d538ff;
        }

    </style>
</head>
<body>

<h1 class="uxiang" id="uu">标题1</h1>
<h1 class="oxiang">标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>

</body>
</html>

2.2、层次选择器

1、后代选择器

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

2、子选择器

/*子选择器*/
body>p{
    background:#3cbda6;
}

3、相邻兄弟选择器

/*相邻选择器：只有一个，相邻（向下）*/
.active + p{
    background:#a13d30;
}

4、通用选择器

/*通用兄弟选择器*/
.active~p{
    background:#02ff00;
}

层选择器练习

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

    <style>
        /*后代选择器
        body p{
            background: red;//全覆盖
        }*/
        /*子代选择器
        body>p{
            background: chartreuse;//仅grandpa
        }*/
        /*相邻兄弟选择器 同辈，仅有一个（向下）
        .active+p{
            background: cornflowerblue;//grandpa2
        }*/
        /*通用选择器
        .active~p{
            background: cornsilk;//grandpa2 grandpa3
        }*/
    </style>
</head>
<body>

<p class="active">grandpa1</p>
<p>grandpa2</p>
<p>grandpa3</p>
<ul>
    <li>
        <p>father1</p>
    </li>
    <li>
        <p>father2</p>
    </li>
    <li>
        <p>father3</p>
    </li>
</ul>

</body>
</html>

2.3、机构伪类选择器

伪类：条件

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

    <!--避免使用.class id选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: chartreuse;
        }

        /*ul的最后一个子元素*/
        ul li:last-child{
            background: cyan;
        }

        /*选中p1 : 定位到父元素，选择当前的第一个元素
        选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效*/
        p:nth-child(1){
            background:#d538ff;
        }
        /*选中父元素 下的p元素的第二个，类型*/
        p:nth-of-type(2){
            background: #16e3e8;
        }

        /*a:hover{
            background: #2252ff;
        }*/

    </style>
</head>
<body>

   <!-- <a href="">我来自未来</a>-->
    <p>力扣</p>
    <p>阿里</p>
    <p>博客</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vyN5uvzW-1586861713868)(upload\image-20200408173917700.png)]

2.4、属性选择器(常用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 60px;
            width: 40px;
            borger-radius:10px;
            background: chartreuse;
            text-align: center;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性名，属性名 = 属性值（正则）
        = 绝对等于
        *= 包含这个元素
        ^= 包含这个元素开头的
        $=  以这个元素结尾的
        */

        /*存在id属性的元素 a[]{} */
        /*a[id]{
            background: #62fcff;
        }*/

        /*id=first的元素*/
        /*a[id=first]{
            background: crimson;
        }*/

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

        /*选中href中以http开头的元素*/
        /*a[href^=http]{
            background: yellow;
        }*/

        /*选中href中以doc结尾的元素*/
        a[href$=doc]{
            background: yellow;

        }



    </style>
</head>
<body>

<p class="demo">

    <a href="http://www.baidu.com" class="links item first" id="first">h1</a>
    <a href="images/123.html" class="links check-menu-item">h2</a>
    <a href="images/123.png" class="choice-box">h3</a>
    <a href="images/123.jpg" class="links color-input-field">h4</a>
    <a href="abc" class="color-input-field" >h5</a>
    <a href="/a.pdf" class="links color-input-field">h6</a>
    <a href="abc.pdf" class="color-input-field">h7</a>
    <a href="abc.pdf" class="color-input-field">h8</a>
    <a href="a.doc" class="color-input-field">h9</a>
    <a href="abc.doc" class="color-input-field">h10</a>

</p>

</body>
</html>

=
*=
^=
$=

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZsF4C5Sn-1586861713871)(upload\image-20200409222224785.png)]

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: 50px;
        }
    </style>
</head>
<body>

我要学 <span id="title1">Java</span>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RXVB3VAp-1586861713873)(upload\image-20200409223857452.png)]

3.2、字体样式

<!--
font-family:字体
font-size：字体大小
font-weight：字体粗细
color ：字体颜色
-->
<style>
    body{
        font-family: Consolas,楷体;
    }
    h1{
        font-size: 30px;
    }
    .p1{
        font-width: bolder;
    }
</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>
    <!--
    颜色：
    red   单词
    #000000
    RGB 0~F （红绿蓝）
    RGBA  0~F 0~1(红绿蓝 透明度)
    text-align:排版，居中
    text-indent: 2em;首行缩进
    height:300px: 块高
    line-height: 300px;  行高
    -->
    <style>
        h1 {
            color:rgb(0,255,255);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: rgba(0,255,255,0.1);
            height: 300px;
            line-height: 300px;
        }
        /*上划线*/
        .l1{
            text-decoration: overline ;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*下划线*/
        .l3{
            text-decoration: underline;
        }
        /*超链接取消划线*/
        a{
             text-decoration: none;
         }
        /*水平对齐~ 参照物，a，b
          */
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>

<p>
    <img src="images/p.jpg" alt="">
    <span>sdfiogadgjigrikgrujgg</span>
<a href="">123</a>

<p class="l1">l1</p>
<p class="l2" >l2</p>
<p class="l3">l3</p>

<h1>二、活动目的及意义</h1>
<p calss="p1">
    为弘扬校园文化，加强当代大学生的文化修养和审美情趣，陶冶高尚的艺术情操，营造良好的艺术氛围，提高文化素养，传承和发扬中国翰墨精神，推广书法文化，促进书协发展。
</p>

<p class="p3">
    一般来说，小楷并不太适合入门学习，因为点画变化只在毫厘之间，新手一般很难把控写得精美，所以通常要中楷熟习之后，才开始写小楷。
    但如果你非常想写小楷，也有办法，就是把小楷放大来写，这个临帖就是写得比原字写得大一倍，这样点画细节比较容易把控，熟练之后，可以越写越小。
</p>

</body>
</html>

3.4、阴影

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-562cZR86-1586861713878)(upload\image-20200410090154668.png)]

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

3.5、超链接伪类

/*默认的颜色*/
a{
    text-decoration: none;
    color: #000000;
}
/*鼠标悬浮的状态（只需要 :hover）*/
a:hover{
    color: cyan;
    font-size: 30px;
}

3.6、列表

/*ul li*/
/*
list-style:
    none 去掉原点
    circle 空心圆
    disc  实心圆
    decimal 数字
    square  正方形
*/
ul li{
    height: 30px;
    list-style:none;
    text-indent: 1em;
}

练习：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式列表</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音响</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a>&nbsp;&nbsp;<a href="#">图书</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">个人化妆</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">保健品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a></li>
    </ul>
</div>

</body>
</html>

css

#nav{
    width: 300px;
    background: cyan;
}
.title{
    font-family: 楷体;
    font-size: 26px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
}

/*ul li*/
/*
list-style:
    none 去掉原点
    circle 空心圆
    disc  实心圆
    decimal 数字
    square  正方形
*/
ul li{
    height: 30px;
    list-style:none;
    text-indent: 1em;
}
h2{
    background: #ff4424;
}
ul{
    background: cyan;
}
a{
    color: #000000;
    text-decoration: none;

}
a:hover{
    color: coral;
    font-size: 30px;
}

效果测试图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H58CwPjO-1586861713879)(upload\image-20200410134919445.png)]

3.7、背景

背景颜色

背景图片

<style>
    /*border: 1px solid red;
    边框 ： 边框线框 线类型（实线） 颜色
    */
    div{
        width: 1000px;
        height: 800px;
        border: 1px solid red;
        background-image: url("images/ss.png");
    }

    /*默认全部平铺 repeat*/
    .div1{
        background-repeat:repeat-x ;
    }
    .div2{
        background-repeat:repeat-y;
    }
    .div3{
        background-repeat:no-repeat;
    }

</style>

练习

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B7WXzRXm-1586861713881)(upload\image-20200410141051648.png)]

3.8、渐变（网页 Grabient）

background-color: cyan;
background-image: linear-gradient(19deg,#21D4FD 0%, #5830ff 100%);
}

4、盒子模型

4.1、什么是盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xDnNiCGC-1586861713882)(upload\image-20200410143031559.png)]

margin ：外边框

border：边框

padding：内边框

4.2、边框

#box{
    width: 300px;
    border:1px solid #fcffb0;
    margin:0;
}
h2{
    font-family: 楷体;
    font-size: 22px;
    background: #ff86fa;
    margin:0;
}
form{
    background: #fffad3;
}

div:nth-of-type(1) input{
    border: 1px solid #ff4ddd;
}
div:nth-of-type(2) input{
    border: 1px solid #36ff95;
}
div:nth-of-type(3) input{
    border: 1px solid #4bbeff;
}

1、边框的粗细

2、边框的样式

3、边框的颜色

4.3、内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框学习</title>

    <style>
        /*
        顺时针旋转
        margin：0;   上下左右边距均为0
        margin：0 1px;  上下边距为0 左右边距为1px
        margin：0 1px 0 1px;  上 左 下 右
        */

        #box{
            width: 300px;
            border:1px solid #fcffb0;
            margin:0;
        }
        h2{
            font-family: 楷体;
            font-size: 22px;
            background: #ff86fa;
            color: white;
            margin:0;

        }
        form{
            background: #fffad3;
        }

        div:nth-of-type(1) input{
            border: 1px solid #ff4ddd;
        }
        div:nth-of-type(2) input{
            border: 1px solid #36ff95;
        }
        div:nth-of-type(3) input{
            border: 1px solid #4bbeff;
        }
    </style>
</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <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-zLZCoW2p-1586861713882)(upload\image-20200410161724499.png)]

margin + border +padding +内容宽度

练习效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YFyWsYBv-1586861713884)(upload\image-20200410174134751.png)]

4.4、圆角边框

四个角 border-radius: 100px 50px 25px 5px;

<style>
    div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        border-radius: 100px 50px 25px 5px;
    }
</style>

4.5、盒子阴影

box-shadow:10px 10px 1px blue;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影练习</title>

    <!--
    box-shadow:10px 10px 1px blue;
    盒子阴影： x    y   模糊半径   颜色
    margin:0 auto;  居中
    -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            box-shadow: 10px 10px 100px blue;

        }
    </style>
</head>
<body>

<div></div>

</body>
</html>

练习效果

盒子居中 margin:0 auto; 居中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jaWbNnoF-1586861713885)(upload\image-20200410185446695.png)]

图片居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发光头像学习</title>

    <!--圆角
    border-radius:圆角
    margin: 0 auto;居中
    要求：块元素，块元素有固定的的宽度

    style="display:block;text-align:center"
    图片居中display:block和text-align:center同时使用
    -->
    <style>
        img{
            margin: 100px 0 100px 0;
            border-radius: 50px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>

<div style="display:block;text-align:center">
    <img src="../images/ss.png" alt="">
</div>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RoViNH1B-1586861713887)(upload\image-20200410195040359.png)]

推荐网站（源码之家）

5、浮动

5.1、标准文档流

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tGc8WmcC-1586861713887)(upload\image-20200410212557282.png)]

块级元素：独占一行

h1~h5 p div 列表...

行内元素：不独占一行

span a  img  strong...

5.2、display

<!--
 block 块元素
 inline  行内元素
 inline-block 是块元素，但是可以内联，在一行！
 none
-->
<style>
    div{
        width: 100px;
        height: 100px;
        border:1px solid red;
        display: block;
    }
    span{
        width: 100px;
        height: 100px;
        border:1px solid red;
        display: inline;
    }
    }
</style>

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

5.3、float

1.左右浮动 float

div{
    marfin:10px;
    padding:5px;
}
#father{
    border:1px #000000 solid;
}
.layer01{
    border:1px #F00 dashed;
    display:inline-block;
    float:right;
}
.layer02{
    border:1px #F00 dashed;
    display:inline-block;
    float:right;
}
.layer03{
    border:1px #F00 dashed;
    display:inline-block;
    float:right;
}

5.4、父级边框塌陷的问题

clear

/*
clear: right;右侧不允许有浮动元素
clear: left;做侧不允许有浮动元素
clear: both;两侧不允许有浮动元素
clear: none;
*/

解决方案：

1、增加父级元素高度~

#father{
    border:1px #000000 solid;
    height: 400px;
}

2、增加一个空的div标签，清除塌陷

<div class="clear"></div>

.clear{
            clear: both;
            margin: 0;
            padding: 0;
        }

3、overflow

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

4、在父类添加一个伪类：after

#father:after{
    content:'';
    display: back;
    clear:both;
}

小结：

1、浮动元素后面增加空div

简单，代码中尽量避免空div

2、设置父元素的高度

简单，元素假设有了固定高度，就会被限制

3、overflow

简单下拉的一些场景避免使用

4、父类添加一个伪类：after（推荐）

写法稍微复杂一点，但没有副作用，推荐使用

5.5、对比

display

方向不可控制
float

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

6、定位

6.1、相对定位

<!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 #000000;
            padding: 0;
        }
        #first{
            border:1px dashed #ff4567;
            background-color: #faff90;
            position: relative;/*相对定位：上下左右*/
            top: -20px ;
            right: -20px;

        }
        #second{
            border:1px dashed #59ff5c;
            background-color: #c1fcff;
        }
        #third{
            border:1px dashed #5b64ff;
            background-color: #ff9ff8;
            position: relative;
            left: -20px;
            bottom: -20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

相对定位：position: relative;

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

top: -20px ;  距离上有多少
right: -20px;
left: -20px;
bottom: -20px;

代码练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;/*去掉下划线*/
            background: violet;
            line-height: 100px;
            text-align: center;/*文字居中*/
            color: white;
            display: block;
        }
        a:hover{
            background: #388dff;
        }
        .a2,.a4{
            position: relative;
            top: -100px;
            right: -200px;
        }
        .a5{
            position: relative;
            top: -300px;
            right: -100px;
            background: #4da8ee;
        }

    </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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SSwwUOKL-1586861713890)(upload\image-20200411183434015.png)]

6.2、绝对定位

定位：基于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 #000000;
            position: relative;
        }
        #first{
            border:1px dashed #ff4567;
            background-color: #faff90;
        }
        #second{
            border:1px dashed #59ff5c;
            background-color: #c1fcff;
            position: absolute;/*绝对定位，上下左右*/
            left: -18px
        }
        #third{
            border:1px dashed #5b64ff;
            background-color: #ff9ff8;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html></html>

6.3、固定定位 fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){/*绝对定位，相对于浏览器*/
            width: 100px;
            height: 100px;
            background: lightgreen;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){/*固定定位*/
            width: 50px;
            height: 50px;
            background: lightblue;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yOgj1aSh-1586861713892)(upload\image-20200411191249115.png)]

6.4、z-index

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hEPWLkMm-1586861713892)(upload\image-20200411193820530.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/bg.png" alt="#"></li>
        <li class="tipText">学习微服务，找狂神</li>
        <li class="tipBg"></li>
        <li>时间: 2099-01-01</li>
        <li>地点: 月球一号基地</li>
    </ul>
</div>

</body>
</html>

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

#content{
    width: 160px;
    height: 156px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 2px solid #000000;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipBg,.tipText{
    position: absolute;
    width: 160px;
    height: 25px;
    top: 80px;
}
.tipText{
    color: #c1fcff;
    z-index: 99;
}
.tipBg{
    background: #040105;
    opacity: 0.5;/*背景透明度*/
}

7、动画

css动画点击跳转W3school

canvas动画点击跳转

卡巴斯基全球网络攻击实时图点击跳转卡巴斯基全球网络攻击实时图

html 浪漫告白点击跳转17素材网

8、总结

right: 0;
bottom: 0;
}

div1

div2

```

[外链图片转存中…(img-yOgj1aSh-1586861713892)]

6.4、z-index

[外链图片转存中…(img-hEPWLkMm-1586861713892)]

图层~

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/bg.png" alt="#"></li>
        <li class="tipText">学习微服务，找狂神</li>
        <li class="tipBg"></li>
        <li>时间: 2099-01-01</li>
        <li>地点: 月球一号基地</li>
    </ul>
</div>

</body>
</html>

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

#content{
    width: 160px;
    height: 156px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 2px solid #000000;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipBg,.tipText{
    position: absolute;
    width: 160px;
    height: 25px;
    top: 80px;
}
.tipText{
    color: #c1fcff;
    z-index: 99;
}
.tipBg{
    background: #040105;
    opacity: 0.5;/*背景透明度*/
}