CSS3 笔记

最新推荐文章于 2023-01-18 22:01:39 发布

PinkandWhite

最新推荐文章于 2023-01-18 22:01:39 发布

阅读量194

点赞数 1

分类专栏： # 笔记 JavaWeb 笔记文章标签： html css web css3 java

本文链接：https://blog.csdn.net/SwaeLeeUknow/article/details/114570567

版权

笔记同时被 2 个专栏收录

33 篇文章 3 订阅

订阅专栏

笔记 JavaWeb

9 篇文章 0 订阅

订阅专栏

CSS

1.什么是CSS？

如何学习

CSS是什么
CSS怎么用（快速入门）
CSS 选择器（重点 + 难点）
美化网页（文字，阴影，超链接，列表，渐变…）
盒子模型
浮动
定位
网页动画（特效）
菜鸟教程、W3C

1.1、什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动
在这里插入图片描述

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;
            声明3;
        }

    -->
    <style>
        h1{
            color: red;
        }
    </style>

</head>
<body>

<h1>我是标题</h1>


</body>
</html>

建议使用这种样式：
在这里插入图片描述

css的优势：

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

1.4、CSS的3种导入方式

优先级：就近原则

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

    <!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>
</head>
<body>



<!--
行内样式：在标签元素中，编写一个style属性，编写样式即可
优先级：就近原则
-->

<h1 style="color: red"> 我是标题</h1>
<h1> 我是标题2</h1>

</body>
</html>

拓展：外部样式两种写法

链接式：
html

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

导入式：
@import 是CSS 2.1特有

 <style>
        @import url("css/style.css");
    </style>

2、选择器

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

2.1、基本选择器

id : #开头
class ： .开头

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

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

    <style>
        /*标签选择器，会选择页面上所有的这个标签的元素*/
        h1{
            color : #588029;
            background: deepskyblue;
            border-radius: 10px;
        }
        p{
            font-size: 30px;
        }
    </style>

</head>
<body>

<h1>学Java</h1>
<h1>学Java</h1>
<p>SwaeLee</p>

</body>
</html>

类选择器 class：选择所有class属性一致的标签，跨标签，可复用！ .类名{}

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

    <style>
        /*类选择器的格式 .class的名称{}
        好处，可以多个标签归类，是同一个class，可以复用。

        */
        .biaoti1{
            color: aquamarine;
        }
        .biaoti2{
            color: red;

        }.biaoti3{
            color: aqua;
                 }
    </style>

</head>
<body>

    <h1 class="biaoti1">标题1</h1>
    <h1 CLASS="biaoti2">标题2</h1>
    <h1 CLASS="biaoti3">标题3</h1>

<p class="biaoti3">Wa$$up</p>
</body>
</html>

Id 选择器：全局唯一！ #id名{}

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

    <style>
        /*  id 选择器  : id必须保证全局唯一！不能复用！精准定位
            #id名称{}

            优先级：不遵循就近原则
            id选择器 > class选择器 > 标签选择器
        */
        #i1{
            color: deepskyblue;
        }
        #i2{
            color: yellow;
        }
        .id2{
            color: bisque;
        }
        .id3{
            color: red;
        }
        h1{
            color: blue;
        }
    </style>

</head>
<body>

<h1 id="i1">Id 选择器1</h1>
<h1 id="i2" class="id2">Id 选择器2</h1>
<h1 id="i3" class="id3">Id 选择器3</h1>

</body>
</html>

优先级：id>class>标签

2.2、层次选择器

后代选择器：在某个元素的后面祖爷爷->爷爷爸爸你 ’ ’

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

子选择器,一代，儿子 ‘>’

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

相邻兄弟选择器同辈 ‘+’

 /*相邻兄弟选择器: 只有一个，而且向下*/
        .active + p{
            background: bisque;
        }
    </style>

通用选择器 ‘~’

/*通用兄弟选择器: 当前选中元素的向下所有兄弟元素*/
        .active~p{
            background: aquamarine;
        }

2.3、结构伪类选择器

伪类：条件

	<style>
	    /*选中ul的第一个子元素*/
        ul li:first-child{
            background: bisque;
        }
        /*选中ul的最后一个子元素*/
        ul li:last-child{
            background: bisque;
        }
        /*选中p1: 定位到父元素，选择当前第一个元素
        选中当前p元素的父级元素，选中父级元素的第一个,并且是当前元素才生效！
        */
        /*p:nth-child(2){
            background: purple;
        }*/

        /*选择父元素第二个类型为P的元素*/
        p:nth-of-type(1){
            background: aquamarine;
        }
	</style>

选中变色
a:hover{
            background: yellow;
        }

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: bisque;
            text-align: center;
            color: green;
            text-decoration: none;
            margin-right: 25px;
            font: bold 20px/50px Arial;
        }

        /*属性名，属性名 = 属性值（正则）*/
        /*存在id属性的元素
        a[]{}   选中a标签，带有id属性
        */
        /*a[id=first]{
            !*background: grey;
        }*/



        /*class 中有 links的元素
          =  绝对等于
         *=  包含等于
         ^=  以这个开头
         $=  以这个结尾
         */
        /*a[class*="links"]{
            background: aqua;
        }*/



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


        a[class$=item]{
            background: yellowgreen;
        }

        /*
        =  绝对等于
        *=  包含等于
        ^=  以这个开头
        $=  以这个结尾
        */


    </style>

</head>
<body>

<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links active" target="_blank" title="2test2" id="second">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="http://www.blog.com" 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>

  	=  绝对等于
    *=  包含等于
    ^=  以这个开头
    $=  以这个结尾

3、网页美化

3.1为什么要美化网页

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

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

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

    <style>
        #javaTitle{
            font-size: 50px;
        }
    </style>

</head>
<body>


欢迎学习<span id="javaTitle">Java</span>



</body>
</html>

3.2、字体样式

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

    <!--
    font-family : 字体
    font-size : 字体大小
    color : 字体颜色

    -->

    <style>
        body{
            font-family: "Arial Black",楷体;
            color: brown;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bolder;
        }
    </style>

</head>
<body>

<h1>故事介绍</h1>

    <p class="p1">我绝不承认两颗真心的结合，会有任何障碍；爱算不得真爱， 若是一看见人家改变便转舵，
        或者一看见人家转弯便离开。</p>
    <p class="p2">12312313123123131231313123213123啊啊啊啊阿啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊阿啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊阿啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊阿啊
    啊啊啊啊阿啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊1231312313123123131231312</p>
    <p>
        Love's not Time's fool, though rosy lips and cheeksWithin his bending sickle's compass come:Love alters not with his brief hours and weeks,But bears it out even to the edge of doom.
        If this be error and upon me proved, I never writ, nor no man ever loved.
    </p>


</body>
</html>

3.3、文本样式

颜色 color rgb rgba 0-F
2. 文本对齐的方式 text-align = center
3. 首行缩进 text-indent：2em
行高 line-height：单行文字上下居中
装饰 text-decoration
文本图片水平对齐：

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

    <!--
    水平对齐需要有参照物 a-b
    -->

    <style>
        img,span{
            vertical-align: middle;
        }
    </style>



</head>
<body>



<p>
    <img src="images/scott.JPG" height="300" width="300">
    <span>Welcome to the Scotts</span>
</p>


</body>
</html>

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


    <!--
      1.颜色：
          单词
          RGB 0~F
          都是F白色
          都是0黑色
          2.text-align: 排版，居中
          3.text-indent: 2em; 段落首行进行缩进

          4.行高和块

  -->

    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }

        .p1{
            text-indent: 2em;
        }

        .p3{
            background: purple;
            height: 300px;
            line-height: 300px;

        }

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

</head>
<body>


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


<h1>故事介绍</h1>

<p class="p1">我绝不承认两颗真心的结合，会有任何障碍；爱算不得真爱， 若是一看见人家改变便转舵，
    或者一看见人家转弯便离开。</p>
<p class="p2">12312313123123131231313123213123啊啊啊啊阿啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊阿啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊阿啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊阿啊
    啊啊啊啊阿啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊1231312313123123131231312</p>
<p class="p3">
    Love's not Time's fool, though rosy lips and cheeksWithin his bending sickle's compass come:Love alters not with his brief hours and weeks,But bears it out even to the edge of doom.
    If this be error and upon me proved, I never writ, nor no man ever loved.
</p>
</body>
</html>

3.4、阴影

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

    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: darkblue;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: orangered;
            font-size: 50px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: yellowgreen;
        }
        /*text-shadow : 阴影颜色，水平偏移，垂直偏移，阴影半径 允许为负值*/
        .price{
           text-shadow: red 1px 0px 10px;
        }
    </style>

</head>
<body>

<a href="#">
    <img src="images/Ky.JPG" height="300" width="300">
</a>

<p>
    <a href="#">Jesus Is King</a>
</p>
<p>
    <a href="#">Artist:KANYE WEST</a>
</p>

<p class="price">
    $:99
</p>
</body>
</html>

3.5超链接伪类

正常情况下 a:hover

/*鼠标悬浮的状态*/
        a:hover{
            color: orangered;
            font-size: 50px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: yellowgreen;
        }

3.6、列表

/*标题红色
不要 小黑点，不要 下划线。
*/
#nav{
    width: 350px;
    background: lightgrey;
}
.title{
    color: black;
    font-size: 35px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
/*ul li
list-style : none 去掉原点
circle 空心圆
decimal 有序数字
square  正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;

}

a{
    text-decoration: none;
    font-size: 16px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

3.7背景

背景颜色

背景图片

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

    <style>
        div{
            width: 1400px;
            height: 1400px;
            border: 1px solid lightgray;/*大小 实线 颜色*/
            background-image: url("images/Travis Scott2.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、渐变

  background-color: #8EC5FC;
            background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);

4、盒子模型

4.1、什么是盒子

在这里插入图片描述

margin：外边距
padding：内边距
border：边框

4.2、边框

边框的粗细
边框的样式
边框的颜色

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

    <style>
        /*总有一个默认的外边距margin是0,常见操作*/
        body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        /*border: 粗细，样式，颜色*/
        #login{
            width: 300px;
            border:1px solid red;
        }

        h2{
            font-size: 35px;
            background-color: deepskyblue;
            line-height: 100px;
            margin: 0;
        }

        form{
            background: lightskyblue;
        }

        div:nth-of-type(1) input{
             border: 2px solid lightgray;
         }
        div:nth-of-type(2) input{
            border: 2px solid lightgray;
        }
    </style>

</head>
<body>

<div id="login">
    <h2>京东会员</h2>
    <form action="#">
        <div>
            <span>用户名: </span>
            <input type="text">
        </div>
        <div>
            <span>密码: </span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

4.2、内外边距

盒子的计算方式：你这个元素到底多大？
在这里插入图片描述
margin + border + padding + 内容宽度

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

    <style>
        /*总有一个默认的外边距margin是0,常见操作*/
        body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        /*border: 粗细，样式，颜色*/

        /*外边距的妙用：===居中===
        margin: 0 auto;
        */
        #login{
            width: 300px;
            border:1px solid red;
            margin: 0 auto;

        }
        /*
        margin:0
        margin:0 auto
        margin:0 1px 2px 3px
        */
        h2{
            font-size: 20px;
            background-color: deepskyblue;
            line-height: 80px;
            margin: 0;
            margin-bottom: 15px;
            margin-top: 0;
            color: whitesmoke;
        }

        form{
            background: lightskyblue;
            height: 50px;
        }
        input{
            border: 1px solid black;
            height: 15px;
        }

    </style>

</head>
<body>

<div id="login">
    <h2>京东会员</h2>
    <form action="#">
        <div>
            <span>用户名: </span>
            <input type="text">
        </div>
        <div>
            <span>密码: </span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

4.4、圆角边框

4个角

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

    <style>

        div{
            width: 100px;
            height: 100px;
            border:  solid yellowgreen;
            border-radius: 20px 20px 60px 60px;
        }
        .gang{
            margin: 25px;
            width: 50px;
            height: 100px;
            border:  solid yellowgreen;
            border-radius: 50px 0 0 50px;

        }
        img{
            width: 200px;
            height: 200px;
            border-radius: 50px;
            margin: 50px auto 500px auto;
        }

    </style>

</head>
<body>

<div></div>
<div class="gang"></div>

    <img src="../../images/The%20Scotts.JPG">



</body>
</html>

4.5、阴影

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

    <style>
        /*div{
            width: 100px;
            height: 100px;
            border:10px solid grey;
            box-shadow: 10px 10px 1px greenyellow;
        }*/

        /*margin: 0 auto居中
        要求：块元素，块元素有固定的宽度
        */
        img{
            width: 500px;
            height: 500px;
            border-radius: 50px;
            box-shadow: 10px 10px 100px yellowgreen;
        }




    </style>

</head>
<body>

    <div style="display:block;text-align: center">
        <div>
            <img src="../../images/The%20Scotts.JPG" alt="">
        </div>
    </div>


</body>
</html>

5、浮动

5.1、标准文档流

在这里插入图片描述

块级元素：独占一行

h1~h6	p	div	ul列表...

行内元素：不独占一行

span  a  img  strong...

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

5.2、display

display:none
display:inline-block

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

5.3、float

左右浮动 float

    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}
.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
    float: right;
}
.layer02{
    border: 1px #F00 dashed;
    display: inline-block;
    float: right;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
    float: right;
}
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;
    clear: both;
}

5.4、父级边框塌陷的问题

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

解决方案：

增加父级元素的高度

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

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

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

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

overflow


在父级元素中增加一个 overflow：hidden、scroll

父类添加一个伪类：after ( 目前市面上认可 )

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

小结：

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

5.5、对比

这两个元素都能让元素排成一列

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

6、定位

6.1、相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>

    <!--

    相对定位
    相对于自己原来的位置进行偏移

    -->

    <style>
        body{
            padding: 50px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
        }
        #st{
            background-color: darkgreen;
            border: 1px dashed green;
            position: relative;/*相对定位:上下左右.这里移动指->距离那边移动多少px*/
            top:-20px;
            left: 10px;
        }
        #nd{
            background-color: lightskyblue;
            border: 1px dashed blue;
            position: relative;
            bottom: -20px;
            right: 10px;
        }
        #rd{
            background-color: yellowgreen;
            border: 1px dashed yellow;
            position: relative;
            top: 30px;
            left: 20px;
        }
    </style>

</head>
<body>


<div id="father">
    <div id="st">第一个盒子</div>
    <div id="nd">第二个盒子</div>
    <div id="rd">第三个盒子</div>
</div>

</body>
</html>

相对定位：position：relative；
相对于原来的位置，距离那边移动多少px。它仍然在标准文档流中。原来的位置会被保留。

top、bottom、left、right

练习题：

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

    <style>
        body{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;

        }
        .a{
            background-color: hotpink;
            width: 100px;
            height: 100px;
            text-decoration: none;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: lightskyblue;
        }
        .b{
            background-color: hotpink;
            width: 100px;
            height: 100px;
            position: relative;
            line-height: 100px;
            text-align: center;
            text-decoration: none;
            color: white;
            display: block;
            top: -100px;
            left: 200px;
        }
        .c{
            background-color: hotpink;
            width: 100px;
            height: 100px;
            position: relative;
            line-height: 100px;
            text-align: center;
            text-decoration: none;
            color: white;
            display: block;
        }
        .d{
            background-color: hotpink;
            width: 100px;
            height: 100px;
            position: relative;
            bottom: 100px;
            right: -200px;
            line-height: 100px;
            text-align: center;
            text-decoration: none;
            color: white;
            display: block;
        }
        .e{
            background-color: hotpink;
            width: 100px;
            height: 100px;
            position: relative;
            top: -300px;
            left: 100px;
            text-align: center;
            text-decoration: none;
            line-height: 100px;
            color: white;
            display: block;
        }
    </style>

</head>
<body>

<div id="box">

        <a class="a" href="#">链接1</a>
        <a class="b" href="#">链接2</a>
        <a class="c" href=#">链接3</a>
        <a class="d" href="#">链接4</a>
        <a class="e" href="#">链接5</a>
    </div>
</div>

</body>
</html>

6.2、绝对定位

定位：基于xxx定位，上下左右

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对于父级元素进行偏移
在父级元素范围内移动

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>

    <!--

    相对定位
    相对于自己原来的位置进行偏移

    -->

    <style>
        body{
            padding: 50px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            height: 150px;
            width: 900px;
            position: relative;
        }
        #st{
            background-color: darkgreen;
            border: 1px dashed green;
            position: relative;/*相对定位:上下左右.这里移动指->距离那边移动多少px*/

        }
        #nd{
            background-color: lightskyblue;
            border: 1px dashed blue;
            position: absolute;
        }
        #rd{
            background-color: yellowgreen;
            border: 1px dashed yellow;
            position: relative;

        }
    </style>

</head>
<body>


<div id="father">
    <div id="st">第一个盒子</div>
    <div id="nd">第二个盒子</div>
    <div id="rd">第三个盒子</div>
</div>

</body>
</html>

6.3、固定定位 fixed

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

    <style>
        body{
            height: 1000px;
            width: 1000px;
        }
        div:nth-of-type(1){/*绝对定位:相对于浏览器*/
            width: 100px;
            height: 100px;
            background: #8EC5FC;
            position: absolute;
            right: 0px;
            bottom: 0px;
        }
        div:nth-of-type(2){/*固定定位*/
            width: 50px;
            height: 50px;
            background: yellowgreen;
            position: fixed;
            right: 0px;
            bottom: 0px;
        }
    </style>

</head>
<body>

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

</body>
</html>

6.4、z-index

在这里插入图片描述

图层~
z-index：默认是0，最高无限-999

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

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

</head>
<body>

    <div id="content">
        <ul>
            <li><img src="images/HIGHEST%20IN%20THE%20ROOM.JPG" alt=""></li>
            <li class="tipText">Highest In the Room</li>
            <li class="tipBackground"></li>
            <li>时间:2021,3,13</li>
            <li>地点:Utopia</li>
        </ul>
    </div>

</body>
</html>

opacity: 0.1; 背景透明度

#content{
    width: 300px;
    height: 300px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 3px solid saddlebrown;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBackground{
    position: absolute;
    width: 300px;
    height: 25px;
    top: 100px;
}
.tipBackground{
    background: yellowgreen;
    opacity: 0.1; /*背景过滤色*/
    /*filter: alpha(opacity=1); 历史*/
}
.tipText{
    color: white;
    z-index: 1;
}

7、动画

PinkandWhite

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 笔记

CSS文章目录CSS1.什么是CSS？1.1、什么是CSS1.2、发展史1.3、快速入门1.什么是CSS？如何学习CSS是什么CSS怎么用（快速入门）CSS 选择器（重点 + 难点）美化网页（文字，阴影，超链接，列表，渐变…）盒子模型浮动定位网页动画（特效）菜鸟教程、W3C1.1、什么是CSSCascading Style Sheet 层叠级联样式表CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动1.2、发展史CSS1.0CSS
复制链接

扫一扫