初识CSS

最新推荐文章于 2024-08-22 17:38:39 发布
最新推荐文章于 2024-08-22 17:38:39 发布
阅读量97 收藏
点赞数
分类专栏： 学习 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44836198/article/details/126595127
版权

CSS

如何学习

  1. CSS是什么

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

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

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

  5. 盒子模型

  6. 浮动

  7. 定位

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

什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

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

发展史

CSS1.0

CSS2.0 DIV (块) + CSS,HTML 与CSS结构分离的思想

CSS2.1 浮动，定位

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

快速入门

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>

  h1 {
            color: red;
        }
css的优势：
  • 内容和表现分离
  • 网页结构表现统一，可以实现复用
  • 样式十分的丰富
  • 建议使用独立于html的css文件
  • 利用SEO，容易被搜索引擎收录！
CSS的3种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

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

    </style>

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

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

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

</body>
</html>

/*外部样式*/
h1 {
    color: blue;
}

拓展：外部样式两种写法

  • 链接式：

​ html

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

  • 导入式：

    @import是CSS 2.1 特有的！

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

选择器

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

CSS,JS,JQuery,vue

基本选择器

  • 标签选择器 ：选择一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器会选择到页面的=上所有的这个标签的元素*/
        h1{
            color: #654103;
            background: red;
            border-radius: 24px;

        }
        h2{
            color: #d79119;
            background: #dc3f3f;
            border-radius: 24px;

        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>

<h1>HTLML</h1>
<h2>HTLML</h2>
<p>HTLML的学习</p>

</body>
</html>
  • 类选择器 class ： 选择所有class属性一致的标签，跨标签 .类名{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*类选择器的格式   .class 的名称{}
        好处：可以多个标签归类，是同一个class
        */
        .XZZS{
            color: yellowgreen;
        }
        .XZzs{
            color: rosybrown;
        }
        .xzzs{
            color: #d32c2c;
        }

    </style>

</head>
<body>

<h1 class ="xzzs">标题1</h1>
<h1 class ="XZZS">标题2</h1>
<h1 class ="XZzs">标题3</h1>
<h2 class ="XZZS">标题4</h2>

<p class ="xzzs">p标签</p>

</body>
</html>
  • Id选择器 ：全局唯一！ #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*
        id选择器 : id必须保证全局唯一！
        #id名称{}
        优先级：
            不遵循就近原则，固定的
            id选择器>class选择器>标签选择器
        */

        #XZZS{
            color: #c41111;
        }
        .style1{
            color: yellowgreen;
        }
        .style2{
            color: yellow;
        }
        h1{
            color: violet;
        }
    </style>

</head>
<body>

<h1 id="XZZS" class="style1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style2">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

优先级：id > class > 标签

层次选择器

  • 后代选择器 ： 在某个元素的后面 祖爷爷->爷爷->爸爸 ->你
body p {
	background: red;
}
  • 子选择器 一代，儿子
body>p{
    background: #d7bd30;
}
  • 相邻兄弟选择器 同辈
/*相邻兄弟选择器 ： 只有一个，相邻（向下）*/
.active + p {
    background: #d7bd30;
}
  • 通用选择器
/*通用兄弟选择器 ， 当前选中元素的向下的所有兄弟元素*/
.active~p{
    background: #d7bd30;
}

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

    <style>

        /*p{*/
        /*    background: green;*/
        /*}*/

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

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

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

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


</head>
<body>

    <p>p0</p>
    <p class="active">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>
    <p class="active">p7</p>
    <p>p8</p>

</body>
</html>

结构伪类选择器

伪类 ： 条件

/*ul 的第一个子元素*/
ul li:first-child{
    background: violet;
}

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

/*
选中p1:定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才能生效！
*/

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

属性选择器（常用）

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: #1e0ede;
            text-align: center;
            color: #ef056e;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*属性名   属性名 = 属性值（正则）

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

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

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

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

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

</head>
<body>

<p class="demo">
    <a href="http://baidu.com" class="links item first" id="first">1</a>
    <a href="https://space.bilibili.com" class="links item active" target="_blank" title="test">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.jpg" class="links item">5</a>
    <a href="abc">6</a>
    <a href="/a.pdf">7</a>
    <a href="/abc.pdf">8</a>
    <a href="/abc.doc">9</a>
    <a href="/abc.doc" class="links item">10</a>
</p>

</body>
</html>

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

美化网页元素

为什么要美化网页

  • 有效的传递页面信息
  • 让页面漂亮，吸引用户
  • 凸显页面的主题
  • 提高用户的体验

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">HTML5</span>

</body>
</html>

字体样式

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

-->
<style>
    body {
        font-family: "Arial Black",楷体;
        color: #656513;
    }
    h1 {
        font-size: 50px;
        font-size: 5em;
    }
    .p1{
        /*font-weight: bold;*/
        font-weight:bolder;
    }
</style>

文本样式

  • 颜色 color rgb rgba
  • 文本的对齐方式 text-align = center
  • 首行缩进 text-indent:2em;
  • 行高 line-height:
  • 装饰 text-decoration:
  • 文本图片水平对齐：vertical-align:middle
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    颜色：
        单词
        RGB 0~F
        RGBA

     text-align:排版，居中
     text-indent：2em; 段落首行缩进
     weight:300px
     line-height:300px;
     行高和块的高度一致，就可以上下居中

    -->
    <style>
        h1{
            /*color: #FF0000;*/
            color: rgba(255, 89, 0,0.8);
            text-align: center;

        }
       .p1{
            text-indent: 2em;
        }
       .p3{
           background: #2700ff;
           height: 300px;
           line-height: 300px;
       }
       /*下划线*/
       .L1{
           text-decoration: underline;
       }
       /*中划线*/
       .L2{
           text-decoration: line-through;
       }
       /*上划线*/
       .L3{
           text-decoration: overline;
       }
       /*超链接去下划线*/
       a{
           text-decoration: none;
       }
        p {
            font-family: 宋体;
            font-size: 80px;
        }
        /*<!--*/
        /*水平对齐~参照物      a,b*/
        /*-->*/
        img, span {
            vertical-align: middle;
        }
    </style>

</head>
<body>

<p class="L1">123123</p>
<p class="L2">123123</p>
<p class="L3">123123</p>

<h1>HTML5百度百科</h1>

<p class="p1">
    HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
</p>

<p>
    HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的
</p>

<p class="p3">
    Happy Birthday
</p>
<p>
    <img src="images/a.png" alt="">
    <span>欢迎学习HTML5</span>
</p>
</body>
</html>

阴影

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

超链接伪类

正常情况下，a, a : hover

/*默认的颜色*/
a {
    text-decoration: none;
    color: #000;
}

/*鼠标悬浮的状态 (只需要记住：hover)*/
a:hover {
    color: orange;
    font-size: 20px;
}

列表

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

ul li {
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link href = "css/style.css" rel="stylesheet" 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></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></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></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅游</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a>
        </li>
    </ul>
</div>


</body>
</html>

#nav{
    width: 300px;
    background: #d79119;

}

.title {
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height:35px;
    background: red;
}
/*ul  li*/
/*
list-style:
    none  去掉圆点
    circle   空心圆
    decimal   数字
    square   正方形
*/
/*ul{*/
/*    background: #d79119;*/
/*}*/

ul li {
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

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

背景

  • 背景颜色
  • 背景图片
<style>
    div {
        width: 1000px;
        height: 500px;
        border: 1px solid #ccc;
        background-image: url("images/宝贝.jpg");
        /*默认是全部平铺的*/
    }

    .div1 {
        background-repeat: repeat-x;
    }

    .div2 {
        background-repeat: repeat-y;
    }
    .div3{
        background-repeat: no-repeat;
    }
</style>

#nav{
    width: 300px;
    background: #d79119;

}

.title {
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height:35px;
    /*颜色,图片,图片位置,平铺方式*/
    background: red url("../images/下.jpg") 250px 5px  no-repeat;
}
ul li {
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/右.jpg");
    background-repeat: no-repeat;
    background-position: 210px 0px;
}

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link href = "css/style.css" rel="stylesheet" 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></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></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></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅游</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a>
        </li>
    </ul>
</div>


</body>
</html>

请添加图片描述

渐变

background-color:#FFFFFF;
background-image: linear-gradient(19deg, #21D4FD 0%, #00ff4e 100%);

盒子模型

什么是盒子模型

请添加图片描述

margin：外边距

border：边框

padding：内边距

边框

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

内外边距

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

    <!--    &lt;!&ndash;外边距的妙用：居中元素-->
    <style>
        #box {
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }
        /*
        顺时针旋转
        margin:0
        margin:0 1px
        margin:0 1px 2px 3px
        */
        h2 {
            font-size: 16px;
            background-color: #3cbda6;
            line-height: 30px;
            color: white;
            margin: 0 1px 2px 3px;
        }

        form {
            background: #3cbda6;
        }

        input {
            border: 1px solid black;
        }
        div:nth-of-type(1  ){
            padding:    10px 2px;
        }
    </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>

盒子的计算方式：你这个元素到底多大？

margin+border+padding+内容宽度

圆角边框

4个角

<!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: 100px;
        }
    </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: 50px;
            margin: 30px;
            border: 1px solid red;
            /*background: red;*/
            border-radius: 50px 50px 0px 0px;
        }
        img {
            width: 100px;
            height: 100px;
            border-radius: 50px;
        }
    </style>
</head>
<body>

<div></div>
<img src="images/盒子模型.png" alt="">
    </body>
</html>

盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--margin：0 auto;     居中
    要求：块元素，块元素有固定的宽度
    -->
    <style>
        img{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>

</head>
<body>

    <div style="width:100px ;height  :100px"></div>
    <img src="images/盒子模型.png" alt="">

</body>
</html>

浮动

标准文档流

块级元素：独占一行

h1~h6     p     hiv     列表···

行内元素：不独占一行

span     a    img     strong    ···

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

display

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
    <div class="layer01"><img src="images/1.png" alt=""/></div>
    <div class="layer02"><img src="images/2.png" alt=""/></div>
    <div class="layer03"><img src="images/3.png" alt=""/></div>
    <div class="layer04">
        <h1>
            <font color="#0000FF" face="楷体">
                浮动的盒子可以向左浮动，也可以向右浮动，知道它的外边缘碰到包含框成另一个浮动盒子为止。
            </font>
        </h1>
    </div>

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

float

  • 左右浮动 float
div {
    margin: 10px;
    padding: 5px;
}

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

.layer01 {
    border: 1px #F00 dashed;
    display: inline-block;
    float: left;
    clear: both;

}

.layer02 {
    border: 1px dashed #00F;
    display: inline-block;
    float: left;
    clear: both;


}

.layer03 {
    border: 1px dashed #060;
    display: inline-block;
    float: left;
    clear: both;

}

.layer04 {
    border: 1px dashed #d7b;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: left;
    clear: both;
}

父级边框塌陷的问题

clear

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

解决方案：

  • 增加父级元素的高度
#father {
    border: 1px solid #000;
    height:  800px;
}
  • 增加一个空的div标签，清除浮动
<div class="clear"></div>

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

  • overflow

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

  • 在父类添加一个伪类：after

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

小结：

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

对比

  • display

    • 方向不可控制

  • float

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

定位

相对定位

相对定位 ： position：relative;

  • 相对于原来的位置，进行指定的偏移，相对定位的话，仍然在标准文档流中！原来的位置会被保留
top：-20px;
left:20px;
bottom:-10px;
right:20px;

<!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 #666;
            padding: 0;
        }

        #first {
            background-color: #8d2cdc;
            border: 1px dashed #d31b1b;
            position: relative;  /*相对定位 : 上 下 左 右 */
            top: -20px;
            left: -20px;
        }

        #second {
            background-color : #d31b1b;
            border: 1px dashed #282bc9;
        }

        #third {
            background-color: #d31b1b;
            border: 1px dashed #60c71c;
            position:relative;
            bottom: 10px;
        }
    </style>

</head>
<body>

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

</body>
</html>
  • 练习
<!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-color: pink;
            line-height: 100px; /*一行居中*/
            text-align: center; /*文字居中*/
            color: black; /*文字颜色*/
            display: block; /*块级元素*/
        }

        a:hover {
           background: blue;/*悬停*/

        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            top: -300px;
            left: 100px;
        }

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

请添加图片描述

绝对定位

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

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

<!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 #666;
            padding: 0;
            position: relative;
        }

        #first {
            background-color: #8d2cdc;
            border: 1px dashed #d31b1b;

        }

        #second {
            background-color: #d31b1b;
            border: 1px dashed #282bc9;
            position: absolute;
            left: 100px;
        }

        #third {
            background-color: #d31b1b;
            border: 1px dashed #60c71c;
        }
    </style>

</head>
<body>

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

</body>
</html>

固定定位 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: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){/*固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        } 
    </style>

</head>
<body>

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

</body>
</html>

z-index

图层

z-index：默认是0，最高无限 （普遍999）

opacity：0.5 ; 背景透明度

#content {
    width: 300px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px black solid;

}

ul, li {
    padding: 0px;
    margin: 0px;
    list-style: none; /*去圆点*/
}

/*父级元素相对定位*/
#content ul {
    position: relative; /*相对定位*/
}

.tipText, .tipBg {
    position: absolute;
    width: 380px;
    height: 25px;
    top: 20px;

}
.tipText{
    color: white;
    z-index: 9999;
}
.tipBg {
    background:black;
    opacity: 0.5;/*背景透明度*/
    filter:alpha(opacity=50);/*早期版本：背景透明度*/
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="images/1.png" alt=""></li>
        <li class="tipText">层级场景，微服务《可爱的小黄人》</li>
        <li class="tipBg"></li>
        <li>时间：2099-01-01</li>
        <li>地点：尖笔头老爹的月球一号基地</li>
    </ul>
    </div>
</body>
</html>

动画

CSS3 教程 | 菜鸟教程 (runoob.com)

总结

请添加图片描述

孤冷逗葩
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web自我学习
qq_50253040的博客
09-15 159
看本文切记 切记 切记 本人所写的博文仅是记载作者学习Web的问题和情况，方便后续的学习 有问题你可以指出，但我不一定接受 当然大神指教也是可以的 Web前端是什么？有什么用？所需的了解的基础知识有哪些？ Web是什么？ 个人感觉就是去不断的更新网页，达成制作者想要实现的某些功能 例如虎牙等直播平台可以直接在网页打开观看，你可以一边观看视频直播，一边发弹幕 这就相当于一直在给视频这个区刷新，不断地更新，达到弹幕实时传输 基础知识的话HTML CSS JavaScular这三大技术可能必备 (用记事
2021-3-10HTML5第一阶段第一周答案
小蜗蜗有头发
03-10 5487
HTML5选择题答案 第一阶段 一、单选题（共30题，每题2分） 1. 下面关于外部样式表的说法错误的是 A .文件扩展名为 .cs B .外部样式表内容不需要使用C .使用标签引入外部样式 D .使用外部样式表可以使网站更加简洁，风格保持统一 正确答案: A 解析: 文件扩展名为 .css 2.css中选择器的分类不包括 A .标签选择器 B .类选择器 C .文字选择器 D .ID选择器 正确答案: C 解析: css的选择器包括：标签选择器,类选择器,id选择器,伪类选择器,属性选择器,
font字体设置
Almee211的博客
07-15 3117
字体设置 p{ font-size: large;【可以写px，也可以写large等， 12pt=16px，1em=16px】 font-family: 微软雅黑;【设置字体名称】 font-weight: lighter;【字体变细（100-400也可以，500是正常值）】 /* font-weight: bolder; */【字体变粗（600-900也可以）】 /* color: #808080; */ color: ...
font-size,line-height,text-indent大小的设置方法（px,em,百分数）及其继承性
liu_lxy的博客
04-28 4048
首先我们要明确的一点就是font-size,line-height,text-indent都是可继承的css属性，接下来我们就来讨论这三个属性的使用方法还有它们的继承方法。  一、font-size（字体大小）  1.px  直接使用像素指定要使用的特定字号，如p{font-size:18px;}。  2.em或百分数         em是用来设置相对父元素的字体大小，em的值=要指定
初识css3
一个臭小孩的修炼之路
12-03 301
css教程1，css是什么？以及三种链接方式
初识css
wqx88888888的博客
02-27 71
（Cascading Style Sheets）3、css引入方式：行间样式表、内部样式表、外部样式。通常称为css样式表、层叠样式表、级联样式表。作用：设置页面中元素的位置、排版、样式外观等。主要由两部分组成：选择器、样式声明。表现层、美化html。
初识 CSS
weixin_45686583的博客
01-13 316
CSS： 给网页穿上美丽的外衣 CSS：层叠样式表。 CSS语法： CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 CSS声明总是以分号(;)结束，声明总以大括号({})括起来。 一、标签选择器（一般用到很少） head 中加 style style 中改变标签样式。
HTML-css初识.md
01-06
HTML-css初识.md
精通CSS.DIV网页样式与布局 第1课 初识CSS.rar
07-14
在本课程“精通CSS.DIV网页样式与布局 第1课 初识CSS”中，我们将深入探讨CSS（层叠样式表）的基础知识及其在网页设计中的核心作用。CSS是网页设计的重要组成部分，它允许我们控制网页的外观和布局，使网页更加美观...
css1.rar_css水调歌头
09-24
在"第04章 初识CSS"中，你可能将学习到这些基本概念，并通过实践案例加深理解。掌握CSS基础知识是构建美观、易用且功能强大的网页的前提，它能让你的HTML页面呈现出丰富多彩的视觉效果。不断学习和实践，你将能够...
CSS初识初学者思维导图-css学习第一天
12-24
css 目的、样式表分类（位置）、选择器、常见文字css属性
初识前端，学习html+css.zip
01-02
html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供...
前端字符串将其分割成长度为 32 的子字符串数组
人与人之间最小的差别是智商，最大的差别是坚持。
08-19 371
要实现这个需求，可以编写一个简单的 JavaScript 函数来处理字符串并将其分割成长度为 32 的子字符串数组。将字符串切割后，对list数据进行数据处理。
前端开发攻略---在Vue3项目中修改Element-Plus主题色
最新发布
nibabaoo的博客
08-22 108
在Vue3项目中修改Element-Plus主题色
pywebview 入门
小小宾的博客
08-18 753
pywebview 是一个轻量级的 python 库，旨在简化桌面应用程序的开发。它利用系统的 WebView 组件，使得开发人员可以使用现代 Web 技术（HTML、CSS、JavaScript）来创建用户界面，同时使用 python 处理业务逻辑。pywebview 使得创建跨平台桌面应用程序变得更加简单和高效。
理解现代前端开发：从HTML到React的进化之路
qq_62512874的博客
08-18 665
随着互联网的不断发展，前端开发已经经历了从静态页面到复杂单页应用（SPA）的转变。作为前端开发者，我们需要不断更新知识，掌握最新的技术栈，以应对日益复杂的开发需求。本篇文章将带你从前端的基础知识逐步深入，探索现代前端开发的关键技术，包括HTML、CSS、JavaScript，以及流行的框架如React。前端开发是一个不断演进的领域，新的工具和框架层出不穷。通过不断学习和实践，我们可以掌握最新的前端技术，构建高效、美观且功能丰富的现代Web应用。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 274
【代码】【js】各类前端输入校验方法。
vue中定义一个url文件,在vue文件中引入
weixin_65767506的博客
08-22 85
1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.
html 初识CSS：丰富多彩的网页样式品
04-02
在初识CSS时，你可以了解以下几个方面： 1. CSS的基本语法：CSS由选择器和声明块组成。选择器用于选择要应用样式的HTML元素，声明块中包含了一系列的样式属性和值。 2. 样式属性和值：CSS提供了丰富的样式属性和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值