css学习

2021 年 11 月 30 日
筆記

第一个css程序

项目结构：

html文件




    <meta charset="UTF-8">
    <title>Title</title>
  <!--<style>   可以编写css的代码
  语法：
      选择器{
          声明1;
          声明2;
          声明3;
          .....
      }
   link ：  引入css文件
         相当于：
            <style>
                h1{
                    color: red;
                  }
    </style>
  -->
    <link rel="stylesheet" href="css/style.css">


  <h1>我是标题</h1>

css文件：

  h1{
    color: red;
}

CSS的优势：

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

css的三种导入方式

html文件：




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


    <!--优先级： 就近原则，哪个样式离这个元素近，就用哪个-->
    <!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
    <h1>我是标题</h1>

css文件：

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

基本选择器

标签选择器: 选择一类标签格式(标签{})




    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择这个页面上所有的这个标签
        color  : 字体颜色
        background-color  : 背景颜色
        border-radius  : 边框圆润度
        */
        h1{
            color: #e51010;
            background-color: aqua;
            border-radius: 20px;
        }
        /*
        font-size  : 字体大小

        */
        p{
            font-size: 30px;
        }
    </style>


    <h1>学java</h1>
    <h1>学java</h1>
    <p>你会发财</p>

类选择器:选择所有class属性一致的标签，格式(.class的值{})




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

    <style>
        /*类选择器的格式  .class的值{}
        好处，可以让多个标签归类，属于同一个class，设置相同的属性，可以复用
        */
        .c1{
            color: blue;
        }
        .c2{
            color: aqua;
        }
    </style>


  <h1 class="c1">标题1</h1>
  <h1 class="c2">标题1</h1>
  <h1 class="c1">标题1</h1>

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

id选择器:全局唯一，格式(#id的值{})




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

    <style>
        /*id选择器格式  #id的值{}
        id的值必须保证全局唯一
        不遵循就近原则，固定的
        id选择器 > 类选择器 > 标签选择器
        */
        #i1{
            color: #e51010;
        }
        .c1{
            color: aqua;
        }
        h1{
            color: green;
        }
    </style>


    <h1 id="i1">标题标签</h1>
    <h1 class="c1">标题标签</h1>
    <h1>标题标签</h1>

层次选择器




    <meta charset="UTF-8">
    <title>层次选择器</title>

    <style>
        /*p{
            background-color: green;
        }*/
        /*后代选择器 某一个元素的后面所有元素*/
        /*body p{
            background: #e51010;
        }*/
        /*子选择器  只有后面的所有同级元素有效*/
        body>p{
            background: aqua;
        }
        /*兄弟选择器  选择某个元素后和它同一级的元素,只对下面的元素有效并且只有一个*/
        /*.active + p{
            background: green;
        }*/
        /*通用选择器  当前选中元素的向下的所有同级元素*/
        /*.active~p{
            background: blue;
        }*/
    </style>


    <p>p1</p>
    <p class="active">p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
    <p>p7</p>

结构伪类选择器




    <meta charset="UTF-8">
    <title>层次选择器</title>

    <style>
        /*选择ul下面的第一个li元素*/
        ul li:first-child{
            background: #e51010;
        }
        /*选择ul下面的最后一个li元素*/
        ul li:last-child{
            background: blue;
        }
        /*选择p1 ： 定位到父元素，选择当前的第一个元素
        p:nth-child(1)  ： 选中p元素的父元素，选择父级元素的第一个,并且是当前元素才会生效
        */
        p:nth-child(1){
            background: aqua;
        }
        /*选中父类元素里面第二个类型为p的元素*/
        p:nth-of-type(2){
            background: green;
        }
    </style>


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

属性选择器




    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            text-align: center;
            border-radius: 10px;
            background-color: aqua;
            color: blue;
            text-decoration: none;
            margin-right: 10px;
            font: bold 20px/50px Arial;
        }
        /*选中a标签里面带有id属性的元素   语法 ： a[属性名或者属性名=属性值]{}
        这里面的 = 表示绝对等于
        *=  包含这个元素
        ^=  表示以什么开头
        $=  表示以什么结尾
        */
        /*a[id]{
            background-color: yellow;
        }*/
       /* a[id=first]{
            background-color: #e51010;
        }*/
        /*选中class中含有links的元素*/
        /*a[class*="links"]{
            background-color: yellow;
        }*/
        /*选中href中以http开头的元素*/
        /*a[href^=http]{
            background-color: yellow;
        }*/
        /*选中href中以pdf结尾的元素*/
        a[href$=pdf]{
            background-color: yellow;
        }
    </style>


<p class="demo">
    <a href="//www.baidu.com" class="links item first" id="first">1</a>
    <a href="https:" class="links item first" target="_blank" title="test">2</a>
    <a href="image/123.html" class="links item">3</a>
    <a href="image/123.png" class="links item">4</a>
    <a href="image/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="abc/a.pdf" class="links item">7</a>
    <a href="/ad.pdf" class="links item">8</a>
    <a href="abd.doc" class="links item">9</a>
    <a href="djw.doc" class="links item last">10</a>
</p>

效果如下图:

字体样式




    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    font-family  : 表示字体
    font-size  : 表示字体大小
    font-weight  : 表示字体形状，粗体，斜体等
    color  : 表示字体颜色
    -->
    <style>
        body{
            font-family: 楷体;
            color: #e51010;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>


    <h1>原神</h1>
    <p class="p1">
    《原神》是由上海米哈游制作发行的一款开放世界冒险游戏，于2017年1月底立项 [29]  ，原初测试于2019年6月21日开启 [1]  ，再临测试于2020年3月19日开启 [2]  ，启程测试于2020年6月11日开启 [3]  ，PC版技术性开放测试于9月15日开启，公测于2020年9月28日开启 [4]  。在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。
    </p>
    <p>
    游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘“原神”的真相 [5]  。
    </p>

文本样式




    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        color :字体颜色，后跟参数可以为：
                                单词
                                RGB  参数为0~255，0~255，0~255
                                RGBA 参数为0~255，0~255，0~255，0~1 最后一个参数表示透明度
        text-align :排版 后跟参数有:
                                center 居中
                                right 靠右
                                left 靠左
        */
        h1{
            color: rgba(0,255,0,0.2);
            text-align: center;
        }
        /*text-indent: 2em;  段落首行缩进，缩进两个字符 或者也可以为px，即缩进两个像素*/
        .p1{
            text-indent: 2em;
        }
        /*line-height  行高，如果行高和块的高度一致，就可以上下居中*/
        .p2{
            background-color: yellow;
            height: 300px;
            line-height: 150px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
           text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        /*超链接去除下划线*/
        a{
            text-decoration: none;
        }
        /*
        水平对其，，需要参照物，a,b
        */
        img,span{
            vertical-align: middle;
        }
    </style>


    <a href="">123</a>
    <p class="l1">123122</p>
    <p class="l2">123122</p>
    <p class="l3">123122</p>
    <h1>原神</h1>
    <p class="p1">
        《原神》是由上海米哈游制作发行的一款开放世界冒险游戏，于2017年1月底立项 [29]  ，原初测试于2019年6月21日开启 [1]  ，再临测试于2020年3月19日开启 [2]  ，启程测试于2020年6月11日开启 [3]  ，PC版技术性开放测试于9月15日开启，公测于2020年9月28日开启 [4]  。在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。
    </p>
    <p class="p2">
        游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘“原神”的真相 [5]  。
    </p>

    <img src="images/2.png" alt="">
    <span>cececececececececece</span>

超链接伪类




    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认颜以及去除下划线*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬停到上面的状态*/
        a:hover{
            color: blue;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: #e51010;
        }
        /*text-shadow 阴影效果  参数依次为：阴影颜色  水平位移  垂直位移  阴影半径*/
        #price{
            text-shadow: #00e5e1 10px 0px 2px;
        }
    </style>


<a href="#">
    <img src="images/2.png" alt="">
</a>
<p>
    <a href="#">码出高效：Java开发手册.pdf</a>
</p>
<p>
    <a href="#">作者：孤尽老师</a>
</p>
<p id="price">
    ￥99
</p>

列表

html文件




    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">


<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li>
            <a href="#">图书</a>
            <a href="#">音像</a>
            <a href="#">数字商品</a>
        </li>
        <li>
            <a href="#">家用电器</a>
            <a href="#">手机</a>
            <a href="#">数码</a>
        </li>
        <li>
            <a href="#">电脑</a>
            <a href="#">办公</a>
        </li>
        <li>
            <a href="#">家居</a>
            <a href="#">家装</a>
            <a href="#">厨具</a>
        </li>
        <li>
            <a href="#">服饰鞋帽</a>
            <a href="#">个性化妆</a>
        </li>
        <li>
            <a href="#">礼品箱包</a>
            <a href="#">钟表</a>
            <a href="#">珠宝</a>
        </li>
        <li>
            <a href="#">食品饮料</a>
            <a href="#">保健食品</a>
        </li>
        <li>
            <a href="#">彩票</a>
            <a href="#">旅行</a>
            <a href="#">充值</a>
            <a href="#">票务</a>
        </li>
    </ul>
</div>

css文件

#nav{
    width: 255px;
    background:#828a91;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 2em;
    line-height: 35px;
    /*  颜色  图片 图片位置 平铺方式*/
    background: red url("../images/2.png") 230px 10px no-repeat;
}
/*
列表前面默认实心圆点
list-style ：
            none  去掉圆点
            circle  空心圆
            decimal  数字
            square  实心正方形
*/
ul li{
    line-height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/2.png");
    background-repeat: no-repeat;
    background-position: 188px 5px;
}

a{
    text-decoration: none;
    color: #000;
    font-size: 14px;
}
a:hover{
    color: orange;
}

背景




    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*border 设置边框  参数为  边框的宽度 边框的样式（solid 实线） 边框的颜色*/
        div{
            width: 1080px;
            height: 720px;
            border-radius: 20px;
            border: 20px solid red;
            background-image: url("images/2.png");
            /*默认是全部平铺的*/
        }
        .div1{
            /*水平平铺*/
            background-repeat: repeat-x;
        }
        .div2{
            /*垂直平铺*/
            background-repeat: repeat-y;
        }
        .div3{
            /*不平铺*/
            background-repeat: no-repeat;
        }
    </style>


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

盒子模型

1. 边框




    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      /*body 总有一个默认的外边距 margin:*px  一般会初始化为0*/
      margin: 0px;
    }
    h2{
      font-size: 16px;
      background-color: #aee3bf;
      line-height: 30px;
      color: white;
    }
    /*border : 粗细 样式 颜色*/
    #box{
      width: 300px;
      border: 1px solid red;
    }
    form{
      background-color: #aee3bf;
    }
    /*选择父类元素里面第一个为div的元素里面的input标签*/
    div:nth-of-type(1)>input{
      border: 3px solid black;
    }
    /*选择父类元素里面第二个为div的元素里面的input标签*/
    div:nth-of-type(2)>input{
      border: 2px dashed aqua;
    }
    /*选择父类元素里面第三个为div的元素里面的input标签*/
    div:nth-of-type(3)>input{
      border: 1px dashed black;
    }
  </style>


<div id="box">
  <h2>会员登录</h2>
  <form action="#" method="get">
    <div>
      <span>用户名：</span>
      <input type="text">
    </div>
    <div>
      <span>密码：</span>
      <input type="password">
    </div>
    <div>
      <span>邮箱：</span>
      <input type="text">
    </div>
  </form>
</div>

2.内外边距




    <meta charset="UTF-8">
    <title>Title</title>
    <!--外边距的妙用  居中元素
        margin:0 auto;
    -->
    <style>
        body{
            /*body 总有一个默认的外边框 margin:8px*/
            margin: 0px;
        }
        /*外边距
        margin: 0; 代表上下左右都为零
        margin: 0 1; 代表上下为0 左右为1
        margin: 0 1 2 3; 代表上为0  右为1 下为2 左为3  顺时针旋转
        */
        h2{
            font-size: 16px;
            background-color: #aee3bf;
            line-height: 30px;
            color: white;
            margin: 1px 2px 3px 4px;
        }
        /*border : 粗细 样式 颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }
        form{
            background-color: #aee3bf;
        }
        /*选择父类元素里面第一个为div的元素里面的input标签
        padding  内边距 与外边距用法一致
        */
        div:nth-of-type(1)>input{
            border: 3px solid black;
            padding: 10px;
        }
        /*选择父类元素里面第二个为div的元素里面的input标签*/
        div:nth-of-type(2)>input{
            border: 2px dashed aqua;
        }
        /*选择父类元素里面第三个为div的元素里面的input标签*/
        div:nth-of-type(3)>input{
            border: 1px dashed black;
        }
    </style>


<div id="box">
    <h2>会员登录</h2>
    <form action="#" method="get">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="password">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

圆角边框

1.边框圆角




    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        border-radius 圆角边距
        border-radius: 50px;  上下左右都为50px
        border-radius: 50px 20px; 左上右下为50px 右上左下为20px
        border-radius: 50px 20px 10px 5px; 从左上开始顺时针旋转分配
        */
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 50px 20px 10px 5px;
        }
    </style>


<div>

</div>

2.半圆




    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            background-color: red;
            border-radius: 50px 50px 0 0 ;
        }
    </style>


<div></div>

盒子阴影




    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /*box-shadow 盒子阴影 x偏移量 y偏移量 阴影半径 阴影颜色*/
            box-shadow: 10px 10px 100px yellow;
        }
    </style>


<div></div>

display(块元素与行内元素的转换)




    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        div本为块元素  使用 display: inline;后为行内元素
        span本为行内元素  使用 display: block;后为块元素
        inline-block  既为行内元素也为块元素
        none  使该元素消失
        */
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: none;
        }
    </style>


    <div>div块元素</div>
    <span>span行内元素</span>

float(浮动)




    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
        }
        #father{
            border: 1px solid red;
        }
        .layer1{
            border: 1px dashed blue;
            display: inline-block;
            float: left;
        }
        .layer2{
            border: 1px dashed #e17113;
            display: inline-block;
            float: left;
        }
        .layer3{
            border: 1px dashed #40c40d;
            display: inline-block;
            float: left;
        }
        .layer4{
            border: 1px dashed #86fc07;
            font-size: 16px;
            line-height: 20px;
            display: inline-block;
        }
    </style>


<div id="father">
    <div class="layer1"><img src="images/1.png" alt=""></div>
    <div class="layer2"><img src="images/2.png" alt=""></div>
    <div class="layer3"><img src="images/3.png" alt=""></div>
    <div class="layer4">
        浮动的盒子可以向左浮，也可以向右浮
    </div>

</div>

解决父级元素塌陷问题

父级元素塌陷问题即子元素浮动起来后超出父级元素阔起来的范围
方案一：
增加父级元素高度
方案二：
在最底下增加一个空的div，然后给该div增加属性

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

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

方案三：
在父级元素增加 overflow: hidden;属性

#father{
    border: 1px solid red;
    overflow: hidden;
}

方案四：
父类添加一个伪类

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

具体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
        }
        #father{
            border: 1px solid red;
            /*overflow: hidden;*/
        }
        #father:after{
            content: '';
            display: block;
            clear: both;
        }
        .layer1{
            border: 1px dashed blue;
            display: inline-block;
            float: left;
        }
        .layer2{
            border: 1px dashed #e17113;
            display: inline-block;
            float: left;
        }
        .layer3{
            border: 1px dashed #40c40d;
            display: inline-block;
            float: right;
        }
        /*
        clear: right;  右侧不允许有浮动元素
        clear: left;  左侧不允许有浮动元素
        clear: both;  两侧不允许有浮动元素
        */
        .layer4{
            border: 1px dashed #86fc07;
            font-size: 16px;
            line-height: 20px;
            display: inline-block;
            float: right;
        }
        /*.clear{*/
        /*    clear: both;*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*}*/
    </style>
</head>
<body>
<div id="father">
    <div class="layer1"><img src="images/1.png" alt=""></div>
    <div class="layer2"><img src="images/2.png" alt=""></div>
    <div class="layer3"><img src="images/3.png" alt=""></div>
    <div class="layer4">
        浮动的盒子可以向左浮，也可以向右浮
    </div>
    <!--<div class="clear"></div>-->
</div>
</body>
</html>

相对位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--
  相对定位：相对于原来的自己的位置进行偏移
  -->
  <style>
    body{
      padding: 10px;
    }
    div{
      margin: 10px;
      padding: 5px;
      font-size: 15px;
      line-height: 25px;
    }
    #father{
      border: 1px solid red;
    }
    #first{
      background-color: blue;
      border: 1px dashed blue;
      position: relative; /*相对定位*/
      top: 20px;  /*相对于自己的顶上加二十*/
      left: 20px; /*相对于自己的左边加二十*/
    }
    #second{
      background-color: #e8a323;
      border: 1px dashed #e8a323;
    }
    #third{
      background-color: #17de32;
      border: 1px dashed #17de32;
      position: relative;
      bottom: 20px;  /*相对于自己的底部加二十*/
      right: 20px;   /*相对于自己的右部加二十*/
    }
  </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>
        #father{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 1px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            background-color: #d7cc43;
            line-height: 100px;
            text-decoration: none;
            text-align: center;
            display: block;
        }
        a:hover{
            background-color: blue;
        }

        #i2{
            position: relative;
            bottom: 100px;
            left: 200px;
        }
        #i3{
            position: relative;
            bottom: 100px;
            left: 100px;
        }
        #i4{
            position: relative;
            bottom: 100px;
        }
        #i5{
            position: relative;
            bottom: 200px;
            left: 200px;
        }

    </style>
</head>
<body>
    <div id="father">
        <a id="i1" href="#">链接1</a>
        <a id="i2" href="#">链接2</a>
        <a id="i3" href="#">链接3</a>
        <a id="i4" href="#">链接4</a>
        <a id="i5" href="#">链接5</a>
    </div>
</body>
</html>

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 15px;
            line-height: 25px;
        }
        #father{
            border: 1px solid red;
        }
        #first{
            background-color: blue;
            border: 1px dashed blue;
        }
        /*绝对定位：
        1.没有父级元素定位的前提下，相对于浏览器定位
        2.假设父级元素存在定位，经常会相对于父级元素进行偏移
        3.在父级元素范围内移动
        相对于父级元素或者浏览器，进行指定位置的移动，不会继续存在于原来的位置
        */
        #second{
            background-color: #e8a323;
            border: 1px dashed #e8a323;
            position: absolute;
            right: 30px;/*相对于浏览器的右边30个像素*/
        }
        #third{
            background-color: #17de32;
            border: 1px dashed #17de32;
        }
    </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>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){/*绝对定位：相对于浏览器*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 100px;
            bottom: 0;
        }
        div:nth-of-type(2){/*fixed：固定定位，在浏览器中 定死，不再改变位置*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(3){/*fixed：固定定位，在浏览器中 定死，不再改变位置*/
            width: 50px;
            height: 50px;
            position: fixed;
            right: 0;
            bottom: 60px;
        }
        div a{
            display: block;
            height: 50px;
            width: 50px;
            background-color: #00e5e1;
            text-decoration: none;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <a name="top"></a>
    <div>div1</div>
    <div>div2</div>
    <!--使用锚链接可以实现返回顶部的功能-->
    <div>
        <a href="#top">顶部</a>
    </div>
</body>
</html>

z-index

html文件

<!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>时间：2088-02-23</li>
            <li>地点：冥王星</li>
        </ul>
    </div>
</body>
</html>

CSS文件

#content{
    width: 199px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border:1px solid red;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
/*父级元素相对定位*/
ul{
    position: relative;
}
.tipText,.tipBg{
    width: 199px;
    height: 25px;
    position: absolute;
    top: 154px;
}
.tipBg{
    background: #000;
    opacity: 0.5; /*设置背景透明度*/
}
.tipText{
    color: #f9fcf9;

    /*z-index: 1;设置层级，使得字体可以在背景的上层显示 最低为0 不设上限*/
}

css学习

第一个css程序

css的三种导入方式

基本选择器

层次选择器

结构伪类选择器

属性选择器

字体样式

文本样式

超链接伪类

列表

背景

盒子模型

圆角边框

盒子阴影

display(块元素与行内元素的转换)

float(浮动)

解决父级元素塌陷问题

相对位置

方块摆放

绝对定位

固定位置

z-index

VirMach 便宜 VPS

QNews

css学习

第一个css程序

css的三种导入方式

基本选择器

层次选择器

结构伪类选择器

属性选择器

字体样式

文本样式

超链接伪类

列表

背景

盒子模型

圆角边框

盒子阴影

display(块元素与行内元素的转换)

float(浮动)

解决父级元素塌陷问题

相对位置

方块摆放

绝对定位

固定位置

z-index

分享此文：

Related Posts

脱壳——UPX脱壳原理(脱壳helloworld)

Kubernetes-Secret

超图GIS入门iserver搭建，前端调用iserver加载三维场景demo

新冠变异毒株吓坏全球 美国巨头坦诚：现有疫苗麻烦了

VirMach 便宜 VPS

QNews

熱門搜尋

新冠变异毒株吓坏全球美国巨头坦诚：现有疫苗麻烦了