【css 基础】

已于 2022-05-14 14:19:30 修改
阅读量397 收藏
点赞数 5
分类专栏： css 基础 文章标签： css css3 html
于 2022-05-08 13:52:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rita_zf/article/details/124647230
版权

目录


css 是指层叠样式表（Cascading Style Sheets）

  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 中
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 css 文件中
  • 多个样式定义可层叠为一
  • html 在一个网页中负责的事情是一个页面的结构
  • css（层叠样式表）在一个网页中主要负责了页面的数据样式。

css样式

行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css</title>
</head>
<body>
	<!--style 样式-->
    <h3 style="color: green;">星期日</h3>
    <h3 style="color: green;">星期日</h3>
    <h3 style="color: green;">星期日</h3>
</body>
</html>

在这里插入图片描述

内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css</title>
    <style type="text/css">
        /* 内部样式 */
        h3{
            color: green;
        }
    </style>
</head>
<body>
    <h3>星期日</h3>
    <h3>星期日</h3>
    <h3>星期日</h3>
</body>
</html>

在这里插入图片描述

外部样式

新建文件夹命名为css然后新建文件命名为文件名.css直接输入内容即可

h3{
    color: green;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css</title>
    <!-- 引入外部css样式 -->
    <link rel="stylesheet"  href="./css/03.css">
</head>
<body>
    <h3>星期日</h3>
    <h3>星期日</h3>
    <h3>星期日</h3>
</body>
</html>

在这里插入图片描述

css选择器

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>桃李不言</p>
    <p>下自成蹊</p>
</body>
</html>

在这里插入图片描述

类选择器

css类选择器是可以叠加使用的 .查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css类选择器</title>
	<style>
		.a{
			font-size: 1.857rem;
			color: #00FF00;
		}
        .ha{
            border: width 0.0625em;
            border-style:solid ;
            border-color: blueviolet;

        }
	</style>
</head>
<body>
    <p class="a ha" >桃李不言</p>
    <p class="a ha">下自成蹊</p>
</body>
</html>

在这里插入图片描述

ID选择器

ID选择器是唯一的 #查找

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cssID选择器</title>
	<style>
        #tlby{
            font-size: 3rem;
        }
	</style>
</head>
<body>
    <p class="a ha" id="tlby">桃李不言</p>
    <p class="a ha" id="xzcx">下自成蹊</p>
</body>
</html>

在这里插入图片描述

子选择器与后代选择器

后代选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
    <style type="text/css">
        ul a{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <a href="">00</a>
    <ul>
        <a href="">11</a>
        <a href="">22</a>
        <li><span><a href="">33</a></span></li>
        <li><span><a href="">44</a></span></li>
    </ul>
    <a href="">55</a>
</body>
</html>

在这里插入图片描述

子选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子选择器</title>
    <style type="text/css">
        ul > a{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <a href="">00</a>
    <ul>
        <a href="">11</a>
        <li><span><a href="">33</a></span></li>
        <li><span><a href="">44</a></span></li>
        <a href="">22</a>
    </ul>
    <a href="">55</a>
</body>
</html>

在这里插入图片描述

直接相邻选择器与间接相邻选择器

直接相邻选择器查找使用+号加相邻标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>直接相邻选择器</title>
    <style type="text/css">
        #two+p{
            color: rgb(241, 15, 15);
            background-color: aqua;
            font-size: 1.875rem;
            font-weight: 100;
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>
<body>
    <span>
        <p>星期一</p>
        <p id="two">星期二</p>
        <p>星期三</p>
        <p>星期四</p>
        <p>星期五</p>
    </span>
    <p>星期六</p>
</body>
</html>

在这里插入图片描述

间接相邻选择器查找使用~符号加相邻标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>间接相邻选择器</title>
    <style type="text/css">
        #two~p{
            color: rgb(241, 15, 15);
            background-color: aqua;
            font-size: 1.875rem;
            font-weight: 100;
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>
<body>
    <span>
        <p>星期一</p>
        <p id="two">星期二</p>
        <p>星期三</p>
        <p>星期四</p>
        <p>星期五</p>
    </span>
    <p>星期六</p>
</body>
</html>

在这里插入图片描述

属性选择器

属性选择器查找属性使用标签[ 属性 ]

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style type="text/css">
        input[type=text]{
            width: 30rem;
            height: 18rem;
        }
    </style>
</head>
<body>
    <input type="text"  name="" id="" value="" placeholder="请输入账号" >
    <input type="password" name="" id="" value="" placeholder="请输入密码">
</body>
</html>

在这里插入图片描述

公共选择器

属性之间用逗号隔开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公共选择器</title>
    <style type="text/css">
        input[type=text],
        input[type=password]{
            width: 30rem;
            height: 18rem;
        }
        input[type=text]{
            border: 0.0625rem solid #5B5BEB;
        }
        input[type=password]{
            border: 0.0625rem solid #00FF00;
        }
    </style>
</head>
<body>
    <input type="text"  name="" id="" value="" placeholder="请输入账号" >
    <input type="password" name="" id="" value="" placeholder="请输入密码">
</body>
</html>

在这里插入图片描述

通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
    <style type="text/css">
        *{
            color: rgb(241, 62, 200);
            background-color: blue;
            font-size: 1.875rem;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="">超链接</a>
        </li>
    </ul>
    <p>桃李不言</p>
    <span>下自成蹊</span>
</body>
</html>

在这里插入图片描述

伪类符选择器

伪类:伪类用于定义元素的特殊状态。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style type="text/css">
        /*
            什么是伪类？
            伪类用于定义元素的特殊状态。
            a: 锚选择器
        */
        a{
            text-decoration: none;
            font-size: 1.875rem;
        }
        /* 未访问的链接 */
        a:link{
            color: #FF0000;
        }
        /* 已访问的链接 */
        a:visited{
            color: #00FF00;
        }
        /* 鼠标悬停链接 */
        a:hover{
            color: #FF00FF;
        }
        /* 已选择的链接 */
        a:active{
            color: #0000FF;
        }
        img:hover{
            width: 600px;
            cursor: pointer;
            box-shadow: 0px 0px 150px 150px #0000FF inset;
        }
        /* 边框 */
        img:active{
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <a href="https://cn.bing.com/search">csdn</a>
    <img src="../html/demo04.html" alt="" width="500px" title="点击查看原图">
</body>
</html>

在这里插入图片描述

伪对象选择器

伪对象选择器

  • 伪对象也叫伪元素，在过去，伪类和伪元素都被书写成前面只加一个冒号，实际上伪对象应该用两个冒号老定义。

伪类和伪对象（元素）的区别

  • 伪类一般反映无法在css中轻松或者可靠检测到的某个元素的状态或者属性；
  • 伪元素表示DOM 外部的某种文档结构

常用伪元素

  • 1.E:before/E::before
  • 2.E:after/E::after

伪元素是在元素内容和的前面或后面定义的，必须要添加content：“”这个属性，不然伪元素无法定义成功。
p::after{content："在P 标签元素内容前面加了内容“；color：red}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪对象选择器</title>
    <style>
        input:checked+span{
            background-color: chartreuse;
        }
        input:checked+span::after{
            background-color: rgb(255, 98, 0);
            content: 'color';
        }
    </style>
</head>
<body>
    <form action="" method="post">
        <fieldset>
        <legend>颜色</legend>
        <ul>
            <li><label><input type="radio" name="colour-group"><span>蓝色</span></label></li>
            <li><label><input type="radio" name="colour-group"><span>红色</span></label></li>
            <li><label><input type="radio" name="colour-group"><span>绿色</span></label></li>
        </ul>
        </fieldset>
    </form>
</body>
</html>

在这里插入图片描述

div盒子模型

常用css-背景色
使用ID选择器添加底色和边框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div盒子模型</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            font-size: 3.75rem;
        }
        #container{
            border: 0.625rem solid #000ff0;
            background-color: rgb(237, 147, 12);
        }
    </style>
</head>
<body>
    <div id="container">星期日</div>
</body>
</html>

在这里插入图片描述

div文字水平垂直居中

line-height 垂直居中（通常文字居中）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div盒子模型</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            margin: 30px;
            padding: 0px;
            width: 150px;
            height: 150px;
            border: 0.0625rem solid #000ff0;
            text-align: center;
            line-height: 150px;
            /*vertical-align: middle;*/
            /*display: table-cell;*/
        }
    </style>
</head>
<body>
    <div id="box01">1</div>
    <div id="box02">2</div>
    <div id="box03">3</div>
</body>
</html>

在这里插入图片描述

div图片水平垂直居中

以表格形式改变内容的垂直居中 同时也改变了div的结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div盒子模型</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            margin: 30px;
            padding: 0px;
            width: 150px;
            height: 150px;
            border: 0.0625rem solid #000ff0;
            text-align: center;
            /*line-height: 150px;*/
            vertical-align: middle;
            display: table-cell;
        }
    </style>
</head>
<body>
    <div id="box01"><img src="../img/c++.jpg" width="50px" height="50px"></div>
    <div id="box01"><img src="../img/java.jpg" width="50px" height="50px"></div>
    <div id="box01"><img src="../img/python.jpg" width="50px" height="50px"></div>
</body>
</html>

在这里插入图片描述

背景图

图片平铺 ：background-image: url(图片路径);

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-image: url(../img/css.jpg);
        }
    </style>
</head>
<body>    
</body>
</html>

在这里插入图片描述

background-repeat: repeat-x; 水平方向平铺

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-image: url(../img/css.jpg);
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
</body>
</html>

在这里插入图片描述

background-repeat: repeat-y; 纵向平铺

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-image: url(../img/css.jpg);
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
</body>
</html>

在这里插入图片描述

background-repeat: no-repeat; 不平铺就一张图片

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-image: url(../img/css.jpg);
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
</body>
</html>

在这里插入图片描述
等比例缩放图片

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: url(../img/网页.jpg);
            background-size:cover;
        }
    </style>
</head>
<body> 
</body>
</html>

在这里插入图片描述

透明度

透明度：0到1之间的小数

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>透明度</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 300px;
        }
        #css2{
            /* opacity 透明度：0到1之间的小数 */
            opacity: 0;
        }
    </style>
</head>
<body>
    <img id="css1" src="../img/css.jpg" alt="">
    <img id="css2" src="../img/css.jpg" alt="">
    <img id="css3" src="../img/css.jpg" alt="">
</body>
</html>

透明度opacity: 1;时
在这里插入图片描述

透明度opacity: 0;时
在这里插入图片描述
透明度opacity: 0.5;时
在这里插入图片描述

transparent实现三角形效果

transparent 透明是指和背景色是同一颜色

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>透明度</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 300px;
        }
        #css2{
            opacity: 0.5;
        }
        span{
            color: transparent;
        }
    </style>
</head>
<body>
    <img id="css1" src="../img/css.jpg" alt="">
    <img id="css2" src="../img/css.jpg" alt="">
    <span>桃李不言</span>
    <img id="css3" src="../img/css.jpg" alt="">
</body>
</html>

在这里插入图片描述
花拼三角形

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transparent</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #FF6060 ;
            height: 100%;
            font-family: 微软雅黑,宋体,Arial;
            text-size-adjust: none;
        }
        #triangle{
            margin-left: 6.25rem;
            margin-top: 6.25rem;
            width: 0px;
            height: 0px;
            border-width :6.25rem;
            border-left-color:rgb(6, 239, 57) ;
            border-top-color:rgb(40, 19, 229) ;
            border-right-color:#fcfffc ;
            border-bottom-color:rgb(249, 243, 84) ;
            border-style:solid ;
        }
    </style>
</head>
<body>
    <div id="triangle">
    </div>
</body>
</html>

在这里插入图片描述
三角形

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transparent</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #FF6060 ;
            height: 100%;
            font-family: 微软雅黑,宋体,Arial;
            text-size-adjust: none;
        }
        #triangle{
            margin-left: 6.25rem;
            margin-top: 6.25rem;
            width: 0px;
            height: 0px;
            border-width :6.25rem;
            border-left-color: transparent;
            border-top-color: transparent;
            border-right-color:#fcfffc ;
            border-bottom-color: transparent;
            border-style:solid ;
        }
    </style>
</head>
<body>
    <div id="triangle">
    </div>
</body>
</html>

在这里插入图片描述

显示与隐藏

visibility: hidden; 隐藏后保留原来的位置

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hidden隐藏</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 300px;
        }
        #css2{
            visibility: hidden;
        }
    </style>
</head>
<body>
    <img id="css1" src="../img/css.jpg" alt="">
    <img id="css2" src="../img/css.jpg" alt="">
    <img id="css3" src="../img/css.jpg" alt="">
</body>
</html>

在这里插入图片描述
display: none; 隐藏后不保留原来的位置

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display隐藏</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 300px;
        }
        #css2{
            display: none;
        }
    </style>
</head>
<body>
    <img id="css1" src="../img/css.jpg" alt="">
    <img id="css2" src="../img/css.jpg" alt="">
    <img id="css3" src="../img/css.jpg" alt="">
</body>
</html>

在这里插入图片描述

浮动

float: left;向左浮动 （浮动的方向不同元素的顺序不同）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul > li{
            list-style: none;
            float: left;
        }
        ul > li > a{
            text-decoration: none;
            display: block;
            /*width: 9.375rem;*/
            height: 1.875rem;
            line-height: 1.875rem;
            text-align: center;
            /*border: 1px solid #FF0000;*/
        }
        .nav_spacing{
            width: 5.625rem;
            height: 1.875rem;
            /*border: 0.625rem solid #FF0000;*/
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <div class="nav_spacing"></div>
        </li>
        <li><a href="">全部课程</a></li>
        <li>
            <div class="nav_spacing"></div>
        </li>
        <li><a href="">项目实战</a></li>
        <li>
            <div class="nav_spacing"></div>
        </li>
        <li><a href="">阿里云</a></li>
        <li>
            <div class="nav_spacing"></div>
        </li>
        <li><a href="">书籍</a></li>
        <li>
            <div class="nav_spacing"></div>
        </li>
        <li><a href="">在线题库</a></li>
    </ul>
    <img src="../img/css.jpg" alt="">
</body>
</html>

在这里插入图片描述

clear: both;清除浮动

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul > li{
            list-style: none;
            float: left;
        }
        ul > li > a{
            text-decoration: none;
            display: block;
            /*width: 9.375rem;*/
            height: 1.875rem;
            line-height: 1.875rem;
            text-align: center;
            /*border: 1px solid #FF0000;*/
        }
        .nav_spacing{
            width: 5.625rem;
            height: 1.875rem;
            /*border: 0.625rem solid #FF0000;*/
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <div class="nav_spacing"></div>
        </li>
        <li><a href="">全部课程</a></li>
        <li>
            <div class="nav_spacing"></div>
        </li>
        <li><a href="">项目实战</a></li>
        <li>
            <div class="nav_spacing"></div>
        </li>
        <li><a href="">阿里云</a></li>
        <li>
            <div class="nav_spacing"></div>
        </li>
        <li><a href="">书籍</a></li>
        <li>
            <div class="nav_spacing"></div>
        </li>
        <li><a href="">在线题库</a></li>
    </ul>
    <div id="" class="clear">
    </div>
    <img src="../img/css.jpg" alt="">
</body>
</html>

在这里插入图片描述

overflow

  • visible 默认值。内容不会被修剪，会呈现在元素框之外。
  • hidden 内容会被修剪，并且其余内容是不可见的。
  • scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  • auto 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  • inherit 规定应该从父元素继承 overflow 属性的值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            overflow: scroll;
        }
        div{
            width: 18.75rem;
            height: 18.75rem;
            border: 1px solid #FF0000;
            margin: 0 auto;
            overflow: inherit;
        }
    </style>
    
</head>
<body>
    <div>
        行深般若波罗蜜多时，
        <br /> 照见五蕴皆空，
        <br /> 度一切苦厄。
        <br /> 舍利子，
        <br /> 色不异空，
        <br /> 空不异色，
        <br /> 色即是空，
        <br /> 空即是色，
        <br /> 受想行识，
        <br /> 亦复如是。
        <br /> 舍利子，
        <br /> 是诸法空相，
        <br /> 不生不灭，
        <br /> 不垢不净，
        <br /> 不增不减。
        <br /> 是故空中无色，
        <br /> 无受想行识，
        <br /> 无眼耳鼻舌身意，
        <br /> 无色声香味触法，
        <br /> 无眼界，
        <br /> 乃至无意识界。 去第二段 去第三
        <br /> 无无明，
        <br /> 亦无无明尽，
        <br /> 乃至无老死，
        <br /> 亦无老死尽。
        <br /> 无苦集灭道，
        <br /> 无智亦无得。
        <br /> 以无所得故，
        <br /> 菩提萨埵，
        <br /> 依般若波罗蜜多故，
        <br /> 心无罣碍，
        <br /> 无罣碍故，
        <br /> 无有恐怖，
        <br /> 远离颠倒梦想，
        <br /> 究竟涅磐。
        <br /> 三世诸佛，
        <br /> 依般若波罗蜜多故，
        <br /> 得阿耨多罗三藐三菩提。
        <br /> 故知般若波罗蜜多，
        <br /> 是大神咒，
        <br /> 是大明咒，
        <br /> 是无上咒，
        <br /> 是无等等咒，
        <br /> 能除一切苦，
        <br /> 真实不虚。
        <br /> 故说般若波罗蜜多咒，
        <br /> 即说咒曰：揭谛揭谛波罗揭谛波罗僧揭谛菩提萨婆诃。   
    </div>
</body>
</html>

在这里插入图片描述

position位置

绝对定位absolute

position: absolute; 绝对定位 是相对与父容器的位置定位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 18.75rem;
        }
        #container{
            margin-left: 100px;
            margin-top: 100px;
            width:75rem ;
            height: 56.25rem;
            border: 1px solid #00FF00;
            position: absolute;
            left: 100px;
            top: 100px;
        }
        #css2{
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>
</head>
<body>
    <div id="container">
        <img id="css1" src="../img/css.jpg" alt="">
        <img id="css2" src="../img/css.jpg" alt="">
    </div>
</body>
</html>

在这里插入图片描述

相对定位relative

position: relative; 相对定位 是相对自己原来的位置定位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 18.75rem;
        }
        #container{
            margin-left: 100px;
            margin-top: 100px;
            width:75rem ;
            height: 56.25rem;
            border: 1px solid #00FF00;
            position: relative;
            left: 100px;
            top: 100px;
        }
        #css2{
            position: relative;
            left: 200px;
            top: 200px;
        }
    </style>
</head>
<body>
    <div id="container">
        <img id="css1" src="../img/css.jpg" alt="">
        <img id="css2" src="../img/css.jpg" alt="">
    </div>
</body>
</html>

在这里插入图片描述

粘性定位sticky

position: sticky; 粘性定位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘性定位</title>
    <style>
        #nav{
            position: sticky;
            top: 3.125rem;
            background-color: aquamarine;
            font-size: 1.875rem;
        }
    </style>
</head>
<body>
    <p>尝试滚动页面。</p>
    <p>注意: IE/Edge 15 及更早 IE 版本不支持 stick 属性。</p>
    <br><br><br><br><br><br><br><br>
    <div id="nav">我是粘性定位！</div>

    <div style="padding-bottom: 2000px;">
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

固定定位fixed

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位fixed</title>
    <style>
        #css{
            position: fixed;
            right: 30px;
            top: 50px;
        }
    </style>
</head>
<body>
    <img id="css" src="../img/css.jpg" alt="">
    <div style="padding-bottom: 2000px;">
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
    </div>
</body>
</html>

在这里插入图片描述

z_index

可以通过z_index的值来控制显示图层的顺序，z_index值越大越在外面显示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>重叠元素z_index</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 400px;
        }
        #container{
            margin-left: 100px;
            margin-top: 100px;
            width:75rem ;
            height: 56.25rem;
            border: 1px solid #00FF00;
            position: absolute;
            left: 100px;
            top: 100px;
        }
        #html{
            position: absolute;
            left: 150px;
            top: 150px;
        }
        #css{
            position: absolute;
            z-index: 30;
        }
        #html{
            position: absolute;
            z-index: 20;
        }
    </style>
</head>
<body>
    <div id="container">
        <img id="css" src="../img/css.jpg" alt="">
        <img id="html" src="../img/图片.jpg" alt="">
    </div>
</body>
</html>

在这里插入图片描述

transition过渡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>transition过渡</title>
		<style type="text/css">
			/*
				float 浮
			*/
			* {
				margin: 0;
				padding: 0;
			}
			ul{
				position: absolute;
			}
			ul > li{
				list-style: none;
				float: left;
			}
			ul > li > a{
				text-decoration: none;
				display: block;
				/* width: 9.375rem; */
				height: 1.875rem;
				line-height: 1.875rem;
				text-align: center;
				/* border: 0.0625rem solid #FF0000; */
				z-index: 1;
				
			}
			.nav_spacing{
				width: 5.625rem;
				height: 1.875rem;
				/* border: 0.0625rem solid #00FF00; */
			}
			.clear{
				clear: both;
			}
			img{
				width: 4.125rem;
				position: relative;
				top: -5rem;
				/* display: none; */
				z-index: -1;
			}
			ul > li > a:hover+img{
				position: relative;
				top: 0.625rem;
				/* display: block; */
				transition: 2s;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<div class="nav_spacing "></div>
			</li>
			<li><a href="">全部课程</a><img src="../img/css.jpg" ></li>
			<li>
				<div class="nav_spacing "></div>
			</li>
			<li><a href="">项目实战</a><img src="../img/css.jpg" ></li>
			<li>
				<div class="nav_spacing "></div>
			</li>
			<li><a href="">阿里云</a><img src="../img/css.jpg" ></li>
			<li>
				<div class="nav_spacing "></div>
			</li>
			<li><a href="">书籍</a><img src="../img/css.jpg" ></li>
			<li>
				<div class="nav_spacing "></div>
			</li>
			<li><a href="">在线题库</a><img src="../img/css.jpg" ></li>
		</ul>
		<div id="" class="clear">	
		</div>
	</body>
</html>

在这里插入图片描述

animate

Animate.css 是一个随时可用的跨浏览器动画库。

下载安装使用

导入文件animate.css
下载地址https://cdnjs.cloudflare.com/ajax/libs/animate.css

或者直接添加网址到网页

https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

动画元素库
https://animate.style/

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animate</title>
    <link rel="stylesheet" type="text/css" href="./css/animate.min.css">
</head>
<body>
    <img class="animate__animated animate__zoomOutDown" src="../img/css.jpg"  alt="">
</body>
</html>

图片精灵

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #DADBDC;
        }
        .coutainer{
            background-color: #FFFFFF;
            margin: 0 auto;
            width: 640px;
            height:350px ;
            margin-top: 180px; ;
            text-align: center;
            border-radius: 10px;
            position: relative;
        }
        .input_coutainer{
            margin-top: 30px;
            width: 290px;
            height: 66px;
            line-height: 66px;
            font-size: 33px;
            padding-left: 90px;
        }
        #account_img,
        #password_img{
            width: 60px;
            height: 60px;
            background-image: url(../img/jingling.png);
            background-repeat: no-repeat;
            overflow: hidden;
            position: absolute;
        }
        #account_img{
            background-position: 0px -69px ;
            top: 74px;
            left: 146px;
        }
        #password_img{
            background-position: -202px -135px ;
            top: 174px;
            left: 146px;
        }
    </style>
</head>
<body>
    <div class="coutainer">
        <h1>登录</h1>
        <i id="account_img"></i>
        <input class="input_coutainer" type="text" name="account" id="account" value="" placeholder="请输入账号" autocomplete="off">
        <i id="password_img"></i>
        <input class="input_coutainer" type="passworad" name="passworad" id="passworad" value="" placeholder="请输入密码">
    </div>
    
</body>
</html>

在这里插入图片描述

Rita_zzf
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS基础语句
weixin_53968665的博客
12-25 1364
CSS
div和th居中显示
1002710030
03-28 291
div只显示在页面最上面居中 <div id="div_psw" style="background:#87CEFA;position:absolute;display:none;top:50%;left:50%;margin-top:-50px;margin-left:-125px;width:250px;height:130px;border-radius:5px;"> div...
week6---10月13日 CSS样式
bluechen10的专栏
10-10 428
一、复习 1、CSS的概念 2、CSS存在的三个地方 二、CSS样式表 1、CSS样式表 A．CSS样式表的结构     CSS样式表由选择符、样式规则(样式属性和属性值)构成：     选择符 { 属性名1:属性值1;           /* 样式规则1 */                      属性名2:属性值2;          /* 样式规则2 *
CSS 实现日历样式
剑来的博客
05-18 1495
前端
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
CSS基础
书启鸿蒙知秋枫
12-28 5962
层叠这个词说明了一种情况，使用不同的选择器可能会同时选择到同一个标签，对这一个标签的同一个属性设置不同的值，就会产生样式重叠。CSS里不仅要使用选择器找到标签，找到标签以后还需要使用CSS的属性键值对设置标签的属性。使用类选择前，需要先给符合一定规律的标签按照特点进行分类，给这些标签添加class属性，再通过class属性来找到对应的元素。CSS不仅可以给HTML的标签添加样式，同时还可以对HTML里的标签进行布局，修改标签的位置。可以根据属性值的不同，给特定的标签设置样式。
CSS基础知识
ashfiqa的博客
01-21 2103
这是对于前端CSS的基础知识的一个简单概括，里面讲述了很多基础的东西，欢迎大家来看一下。 CSS 全称 Cascading Style Sheets，CSS是为了修改HTML的样式，让HTML的界面变得更完善，如果说HTML是网页的结构，那么CSS就是网页化妆师。
CSS基础知识总结
Lotus_fragrance的博客
04-29 3280
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
CSS基础 知识点总结
星星之火的语言c学习
08-18 2656
① CSS指的是层叠样式表，用来控制网页外观的一门技术② CSS发展至今，经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本，CSS3.0是CSS最新版本① 选择器就是选中你想要的元素，就是指用一种方式把你想要的那个元素选中，只有把这个元素选中，你才能为它添加样式② 五种常用的选择器元素选择器id选择器class选择器后代选择器群组选择器③ 语法选择器属性1：取值1；属性2: 取值2；...属性n: 属性n;① 元素选择器。
css基础知识
健康平安的活着的专栏
05-12 1874
一 css 1.css 用于控制网页样式的一种标记语言，通过使用css可以使网站外观更加美观，结构更加简化。 2.css的语法： 选择符{属性:属性值}；属性必须要包含在{}中，并且之间用属性和属性值“：”分隔。当有多个属性时，用“；”进行区分。 3.选择符： 通配符选择符，* 代表所有元素，如 *{font-size:12px}; 类型选择符 如 <p class="red"> 这是第一个段落 </p> 选择符的写法： p.red{color:red}...
CSS基础代码
03-27
**CSS基础代码详解** 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和样式。本资料包包含了作者学习CSS时编写的代码，非常适合CSS初学者作为学习素材。通过阅读和理解这些...
css基础教学1
08-03
CSS基础教学1 CSS是 Cascading Style Sheets 的缩写，译为层叠样式表，是一种用于描述网页样式的语言。CSS主要用于控制网页的布局、颜色、字体、背景等各种样式元素。 在本教程中，我们将学习如何使用CSS对...
css 基础样式 base.css
04-28
css基础样式
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 238
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
Tailwind CSS：颠覆常规的实用主义设计利器
艾恩小灰灰的博客
07-18 516
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 343
网页隐藏版一行小说阅读器
HTML、CSS、JS浅浅浅浅浅解
最新发布
lbdking的博客
07-20 1413
初识Web web标准 web标准也被称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Cnsortium，万维网联盟）负责制定。 三个组成部分 HTML:负责网页的结构（页面元素和内容）。 CSS：负责网页的表现（页面元素的外观，位置等页面样式，如：颜色、大小等）。 JavaScript：负责网页的行为（交互效果）。 HTML HTML：超文本标记语言 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容。 标记语言：由标签构
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rita_zzf

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值