CSS入门（全）

最新推荐文章于 2024-02-17 15:00:00 发布

今天我敲代码了吗

最新推荐文章于 2024-02-17 15:00:00 发布

阅读量1.5k

点赞数 7

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43476880/article/details/106003989

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文学习链接由此处

1、什么是CSS

如何学习

1、CSS是什么

2、CSS怎么用

3、CSS选择器

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

5、盒子模型

6、浮动

7、定位

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

1.1什么是CSS

CSS 指层叠样式表 (Cascading Style Sheets)
CSS:表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…

1.2CSS发展史

CSS1.0
CSS2.0 DIV（块）+CSS,HTML与CSS结构分离思想，网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画…浏览器兼容性~~~

1.3快速入门

命名规范

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    规范
    语法:
        选择器｛
        声明1；
        声明2；
        声明3；
        ｝
    -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>

<h1>我是1号标题</h1>

</body>
</html>

单独CSS文件

   /*规范*/
   /*     语法:*/
   /*     选择器｛*/
   /*     声明1；*/
   /*     声明2；*/
   /*     声明3；*/
   /*｝*/

h1{
    color: red;
}


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

    <link rel="stylesheet" href="style.css">
</head>
<body>

<h1>我是1号标题</h1>

</body>
</html>

CSS的优势

1、内容和表现分离
2、网页结构表现统一、可以实现复用
3、样式十分的丰富
4、建议使用独立于html的css文件
5、利用SEO，容易被搜索引擎收录

1.4四种CSS导入方式(就近原则)

行内样式、内嵌样式、链接样式、导入样式

1、行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--行内样式:在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: blueviolet">这是行内样式</h1>
</body>
</html>

2、写在html的标签，内部样式表

h1{
    color: red;
}


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

    <link rel="stylesheet" href="style.css">
</head>
<body>

<h1>我是1号标题</h1>

</body>
</html>

3、单独一个style.css文件，外部样式表

   /*规范*/
   /*     语法:*/
   /*     选择器｛*/
   /*     声明1；*/
   /*     声明2；*/
   /*     声明3；*/
   /*｝*/

h1{
    color: red;
}


<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="style.css">
</head>

4、导入式(2.1特有的)

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="style.css">
    
    <style>
        @import "style.css";
    </style>
</head>

2、选择器

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

2.1 、 3个基本选择器(精准度)

id选择器>class选择器>标签选择器

1、标签选择器

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

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

    <style>
        /*标签选择器会选择到页面上所有的这个标签*/
        h1{
            color: blueviolet;
            background: aqua;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>

<h1>学JAVA</h1>
<h1>学JAVA_2</h1>
<P>狂神说</P>
</body>
</html>

2、类选择器

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

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

    <style>
        /*类选择器的格式*/
        .first{
            color: aquamarine;
        }
        .second{
            color: blueviolet;
        }
    </style>
</head>
<body>

<h1 class="first">这是测试类选择器1</h1>
<h1 class="second">这是测试类选择器2</h1>
<h1>这是测试类选择器3</h1>

</body>
</html>

3、Id选择器

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

    <style>
        /*#id名称｛｝  id保证全局唯一*/
        #first{
            color: red;
        }
        #second{
            color: blueviolet;
        }
    </style>
</head>
<body>


<h1 id="first">这是测试ID选择器1</h1>
<h1 id="second">这是测试ID选择器2</h1>
<h1>这是测试ID选择器3</h1>

</body>
</html>

2.2、层次选择器

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rp1ipKbp-1588935547364)()]

/*后代选择器*/
body p{
    color: aqua;
}

2、子选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WteJRgmZ-1588935547368)()]

/*子选择器*/
body >p{
    color: blueviolet;
}

3、相邻兄弟选择器(向下)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V1qAfZx3-1588935547372)()]

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

<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>

4、通用选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CQx5xrSj-1588935547376)()]

/*通用选择器，向下所有兄弟*/
.active~p{
color: blue;
}

<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NTlpSsMH-1588935547378)()]

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>

2.3、结构伪类选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WycoXqER-1588935547380)()]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    避免使用.class、id选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: red;
        }
        /*ul的第最后一个个子元素*/
        ul li:last-child{
            color: blue;
        }
        /*选中p1:定位到父元素，选择当前的第一个元素*/
        /*选择当前p元素的父级元素，选中父级元素的第一个*/
        p:nth-child(1){
            background: blueviolet;
        }
        /*选中父元素下的p元素的第二个*/
        p:nth-of-type(2){
            background: yellow;
        }

        /*ul的第2个子元素*/

    </style>
</head>
<body>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

2.4属性选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U43p7LaA-1588935547382)()]

<!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: aquamarine;
            text-align: center;
            color: chartreuse;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

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

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

        /*id=one的属性*/
        /*a[id = one]{*/
        /*    background: aqua;*/
        /*}*/

        /*class中有links的元素*/
        /*a[class *=links]{*/
        /*    color: red;*/
        /*}*/

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

        /*a[href$=doc]{*/
        /*    background: blueviolet;*/
        /*}*/
    </style>


</head>
<body>

<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="one">1</a>
    <a href="http://www.mxlamm.cn" class="links item active" target="_blank">2</a>
    <a href="images/123.html" class="links item ">3</a>
    <a href="images/123.png" class="links item ">4</a>
    <a href="images/123.png" 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.doc" class="links item ">8</a>
    <a href="abac.doc" class="links item ">9</a>
    <a href="mxlamm.cn" class="links item last">10</a>

</p>

</body>
</html>

3、美化网页

3.1为什么要美化网页

1、有效传递页面信息
2、美化网页、页面漂亮，才能吸引用户
3、凸显页面的主题
4、提高用户的1体验

Span标签，重点突出的字，使用Span套起来

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5BPwkgkw-1588935547386)()]

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

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

欢迎学习<span class="" id="title1">CSS</span>
</body>
</html>

3.2字体样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3DaZoJms-1588935547388)()]

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

<!--    font-family  字体-->
<!--    font-size  字体大小-->
    <style>
        body{
            font-family: 楷体;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
        #last{
            color: chartreuse;
        }
    </style>
</head>
<body>
<h1>故事介绍</h1>

<p class="p1">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>

<p id="last">
    在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>

</body>
</html>

3.3 文本样式

1、颜色 color rgb rgba
2、文本对齐方式 text-align=center
3、首行缩进 text-index:2em
4、行高 line-height
5、装饰 text-decoration

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

<!--    颜色：
              单词
               RGB，0-F
               RGBA（透明度A:0~1）
-->
    <style>
        /*h1{*/
        /*    color: red;*/
        /*}*/

        /*h1{*/
        /*    color: rgba(0,255,255,0.2);*/
        /*}*/

        /*文本居中，text-align排版居中*/
        /*h1{*/
        /*    text-align: center;*/
        /*}*/

        /*段落首行缩进*/
        /*.p1{*/
        /*    text-indent: 2em;*/
        /*}*/

        /*行高*/
        /*.p2{*/
        /*    background: #7b62ff;*/
        /*    height: 50px;*/
        /*    !*line-height: 50px;*!*/
        /*}*/

        /*!*下划线*!*/
        /*.l1{*/
        /*    text-decoration: underline;*/
        /*}*/
        /*!*中划线*!*/
        /*.l2{*/
        /*    text-decoration: line-through;*/
        /*}*/
        /*!*上划线*!*/
        /*.l3{*/
        /*    text-decoration: overline;*/
        /*}*/


    </style>
</head>
<body>
<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>

<h1>故事介绍</h1>

<p class="p1">
    平静安详的元泱境界，每隔333年，各地热血勇士的终极目标。。。。
</p>

<p class="p2" id="last">
    在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼。。。。
</p>

</body>
</html>

3.4阴影

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-br6odvPJ-1588935547390)()]

<style>
#price{
    text-shadow: #7FFF00 10px 10px 2px;
}
</style>

<p id="price">99￥</p>

3.5超链接伪类

正常情况下: a,a:hover

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-boTywftx-1588935547392)()]

    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬停的效果状态*/
        a:hover{
            color: aqua;
            font-size: 50px;
        }
        /*鼠标按住未释放状态*/
        a:active{
            color: yellow;
        }
        /*未访问链接*/
        a:link{
            color: blue;
        }
        /*已经访问的链接*/
        a:visited{
            color: red;
        }
    </style>

3.6列表

#nav{
    width: 280px;
    background: #a0a0a0;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 34px;
    background: red;
    text-align: center;
    background: red url("d.png") 200px no-repeat;

}
/*
    ul li
    list-style:
    none 去掉
    circle 空心圆
    decimol数字
    square 正方形
*/
ul{
    background: #a0a0a0;
}

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("r.png");
    background-repeat: no-repeat;
    background-position: 150px 2px;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #000000;
}
a:hover{
    color: orange;
}

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

3.7背景

背景颜色

背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("uu.jpg");
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

3.8渐变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4QsFC8WS-1588935547395)()]

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

    <style>
        body{
            background-color: #00DBDE;
            background-image: linear-gradient(135deg, #00DBDE 0%, #FC00FF 100%);
        }
    </style>
</head>
<body>
</body>
</html>

4、盒子模型

4.1什么是盒子模型

margin:外边距

padding:内边距

border:边框

4.2 边框

1、边框的粗细
2、边框的样式
3、边框的颜色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EmuiQ0YS-1588935547396)()]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*body总有一个默认外边距*/
        body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        h2{
            font-size: 16px;
            background-color: #fffbaf;
            line-height: 30px;
            color: #00DBDE;
        }
        /*border:粗细，样式，颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
        }
        form{
            background: #FC00FF;
        }
        div:nth-of-type(1) input{
            border: 2px solid aqua;
        }
    </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-wKOqYGpo-1588935547399)()]

/*border:粗细，样式，颜色*/
#box{
    width: 300px;
    border: 1px solid red;
    margin:  0 auto;
}

4.3圆角边框

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

    <!--
    左上 右上 右下 左下
    圆圈 ： 圆角 = 半径！
    -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 0px 50px 0px 50px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

5、浮动

5.1介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0TeQTBih-1588935547401)()]

块级元素
- 独占一行
- h1-h6 p div 列表…
行内元素
- 可以被包含在块级元素中，反之则不可以
- 不独占一行
- span a img strong…

5.2、display

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ar1KVtOt-1588935547414)()]

5.3、float

35547401)]

块级元素
- 独占一行
- h1-h6 p div 列表…
行内元素
- 可以被包含在块级元素中，反之则不可以
- 不独占一行
- span a img strong…

5.4父级元素坍塌

clear

clear:right;右侧不允许浮动元素
clear:left;左侧不允许浮动元素
clear:both;两侧不允许浮动元素
clear：none;

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

#father {
    border: 1px #000 solid;
    height: 800px;
}

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

<div class='clear'></div>

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

3、overflow

在父类元素种增加一个 overflow:hidden;

4、父类添加伪类:after

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BI0ZQGsM-1589001438378)()]

#father:after{
    content:'';
    displap:block;
    clear:both;
}

小结：1、浮动元素后面增加空div，简单，代码中尽量避免空div

2、设置父元素的高度，简单，元素假设没有了固定高度，就会被限制

3、overflow,简单，下拉的一写场景避免使用

4、父类添加一个伪类:after,写法稍微复杂，但是没副作用，推荐使用

5.5display与float

display
- 方向不可以控制
float
- 浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷问题

6、定位

6.1相对定位

position:relative
相对于原来的位置，进行偏移,相对定位的话，仍然在标准文档流中，原来位置被保留

            position: relative;
            bottom: 20px;
            right: 20px;

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

<!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 #666;
        }
        #first{
            background-color: #649;
            border: 1px solid #649;
            position: relative;
            top: -20px;
            left: 20px;
        }
        #secondly{
            background-color: #886a12;
            border: 1px solid #886a12;

            position: relative;
            bottom: 20px;
            right: 20px;
        }
        #third{
            background-color: #99c944;
            border: 1px solid #99c944;

            position: relative;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="secondly">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UmWJPjgT-1589001438387)()]

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

    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: #FC00FF;
            line-height: 100;
            text-align: center;
            color: #000000;
            display: block;
        }
        a:hover{
            background: blue;
        }
        .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绝对定位

1、没有父级元素定位前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常相对于父级元素进行偏移
3、在父级元素范围内移动
4、相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不存在标准文档流中，原来的位置不会被保留

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OY8Pscd6-1589001438390)()]

        #secondly{
            background-color: #886a12;
            border: 1px solid #886a12;
            position: absolute;
        }

6.3固定定位(返回顶部)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s8Thu873-1589001438392)()]

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

    <style>
        body{
            height: 100px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 1000px;
            background: red;
            position: absolute;
            right: 0;
            left: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            left: 0;
        }
    </style>
</head>
<body>

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

6.4层级，z-index

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eiY61hfL-1589001438397)()]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EpQMmwnC-1589001438400)()]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-htxNOfY1-1589001438402)()]

7、动画

今天我敲代码了吗

关注

7
点赞
踩
40

收藏

觉得还不错? 一键收藏
0
评论
CSS入门（全）

1、什么是CSS如何学习1、CSS是什么2、CSS怎么用3、CSS选择器4、美化网页（文字、阴影、超链接、渐变…）5、盒子模型6、浮动7、定位8、网页动画（特效效果）1.1什么是CSSCSS 指层叠样式表 (Cascading Style Sheets)CSS:表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…1.2CSS发展史CSS1.0CSS2.0 DIV（块）+CSS,HTML与CSS结构分离思想，网页变得简单，SEO
复制链接

扫一扫