CSS学习笔记

最新推荐文章于 2021-05-15 00:24:14 发布

一壶烈酒可慰风尘

最新推荐文章于 2021-05-15 00:24:14 发布

阅读量296

点赞数

分类专栏：前端学习笔记文章标签： css

本文链接：https://blog.csdn.net/qq_44375810/article/details/109687193

版权

前端学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS

1.什么是CSS

Cascading Style Sheet 层叠样式表

CSS：表现（美化网页）

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

2.CSS发展史

CSS1.0

CSS2.0 DIV(块) + CSS,HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动、定位

CSS3.0 圆角、阴影、动画… 浏览器兼容性

3.CSS快速入门及优势

入门：

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

<!--规范 ：<style>可以编写CSS代码，每一个声明最好使用分号分隔
语法：
     选择器{
     声明1;
     声明2;
     声明3;
     }
-->

<!--<style>-->
<!--    h1{-->
<!--        color: aqua;-->
<!--    }-->
<!--</style>-->
<link rel="stylesheet" href="CSS/Demo01.css">
<body>

<h1>我是标题</h1>

</body>
</html>

CSS的优势：

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

4.四种CSS导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS导入方式</title>
</head>

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

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

<!-- 外部样式2-->
<style>
    @import "CSS/Demo02.css";
</style>

<body>

<!-- 优先级：就近原则，谁离目标标签近就遵循谁-->
<!-- 行内样式，在标签属性中，编写一个style属性，编辑样式即可-->
<h1  style="color: red">标题一</h1>

</body>
</html>

拓展：

链接式(html)

<link rel="stylesheet" href="CSS/Demo02.css">

导入式（@import是css2.1特有的）

<style>
    @import "CSS/Demo02.css";
</style>

5.三种基本选择器（重要）

5.1标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
</head>

<style>
    /* 标签选择器   : 会选择这个页面上所有的这个标签的元素
       标签{}
     */
    h1{
        color: red;
    }
</style>

<body>

<h1>标题一</h1>
<h1>标题二</h1>
<h1>标题三</h1>
<h1>标题四</h1>
<h1>标题五</h1>

</body>
</html>

5.2class选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
</head>

<style>
    /*   class选择器  : 可以多个标签归类（同一个class）,可以复用
         .class{}
     */
    .style1{
        color: green;
    }
    .style2{
        color: red;
    }
</style>

<body>

<h1 class="style1">标题一</h1>
<h1 class="style1">标题二</h1>
<h1 class="style1">标题三</h1>
<h1 class="style2">标题四</h1>
<h1 class="style2">标题五</h1>
<h1 class="style2">标题六</h1>

</body>
</html>

5.3id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
</head>


<style>
/*  id选择器  :id必须全局唯一!
    #id{}
*/
    #style1{
        color: red;
    }
    #style2{
        color: green;
    }
    #style3{
        color: aqua;
    }
    #style4{
        color: aliceblue;
    }
</style>

<body>

<h1 id="style1">标题一</h1>
<h1 id="style2">标题二</h1>
<h1 id="style3">标题三</h1>
<h1 id="style4">标题四</h1>
<h1 id="style5">标题五</h1>

</body>
</html>

5.4基本选择器优先级

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器优先级</title>
</head>

<style>
    h1{
        color: red;
    }
    .class1{
        color: green;
    }
    #id1{
        color: blue;
    }
</style>

<body>


<h1 id="id1" class="class1">标题一</h1>

</body>
</html>

6.层次选择器

例：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
</head>

<style>
    /*
    后代选择器
     */
    body p{
        color: green;
    }

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


    /*
    相邻兄弟选择器（下面第一个）
     */
    .brother + p{
        color: blue;
    }

    /*
     通用兄弟选择器（下面全部）
      */
    .brother ~ p{
        color: blueviolet;
    }

    ul p{
        background: aquamarine;
    }

</style>

<body>
<p>p1</p>
<p class="brother">p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p class="brother">p7</p>
<p>p8</p>
</body>
</html>

后代选择器
```
 body p{
        color: green;
   }
```
子选择器
```
 body>p{
        color: red;
    }
```

相邻兄弟选择器

.brother + p{
        color: blue;
    }

通用选择器

 .brother ~ p{
        color: blueviolet;
    }

7.结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
</head>

<style>

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

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

    /* 定位到父元素，选中当前父元素第一个子元素，若子元素为当前类型（此处为p）则生效*/
    p:nth-child(1){
        background: green;
    }

    /* 定位到父元素，选中该父元素的子元素中对应类型（此处为p）的第一个元素进行操作*/
    p:nth-of-type(2){
        background: yellow;
    }

</style>

<body>
<h1>标题</h1>
<p>p1</p>
<p class="brother">p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

在这里插入图片描述

8.属性选择器（重要）

相当于结合了 id选择器+class选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
</head>

<style>
    .demo a{
        float: left;
        display: block;
        height: 50px;
        width: 50px;
        border-radius: 10px;
        background: blueviolet;
        text-align: center;
        color: aliceblue;
        text-decoration: none;
        margin-right: 50px;
        font: bold 20px/50px Arial;
    }
    /*选中含有 id属性 的a标签*/
    /*a[id]{*/
    /*    background: red;*/
    /*}*/

    /*选中含有 值为aId的id属性 的a标签*/
    /*a[id="aId"]{*/
    /*    background: yellow;*/
    /*}*/

    /*选中含有 值为first second third的class属性 的a标签*/
    /*a[class="first second third"]{*/
    /*    background: red;*/
    /*}*/

    /*选中含有 包含值为third的class属性 的a标签*/
    /*a[class*="third"]{*/
    /*    background: aliceblue;*/
    /*}*/

    /*选中含有 以https开头的href属性 的a标签*/
    /*a[href^=https]{*/
    /*    background: red;*/
    /*}*/

    /*选中含有 以doc结尾的href属性 的a标签*/
    a[href$=doc]{
        background: red;
    }

</style>

<body class="demo">

<a href="https://www.baidu.com" class="first second third" id="aId">1</a>
<a href="https://www.baidu.com" class="first second third" >2</a>
<a href="12344.pdf" class="first" >3</a>
<a href="sfseg.pdf//www.baidu.com" class="first second third" >4</a>
<a href="8989.doc" class="first" title="test">5</a>
<a href="lhlkdh.doc" class="first second third" >6</a>
<a href="abc" class="first second third" >7</a>
<a href="" class="first second" >8</a>
<a href="https://www.baidu.com" class="first" target="_blank" >9</a>

</body>
</html>

= 完全等于

*= 包含

^= 以什么为开头

$= 以什么为结尾

9.美化网页元素

9.1为什么要美化网页

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
</head>
<style>
    span{
        font-size: 50px;
    }
</style>
<body>
深入学习 <span>Java</span>
</body>
</html>

9.2字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
</head>
<style>

    /*
    font-family 字体
    font-size   字体大小
    font-weight  字体粗细
     */
    /*
    body{
        font-family: 楷体;
        color: red;
    }
    h1{
        font-size: 50px;
    }
    p{
        font-weight: bolder;
    }
    */

    /* 字体样式*/
    p{
        font: oblique bolder 16px 楷体；
    }

</style>
<body>

<h1>作品简介</h1>

<p>《三体》（别名“地球往事”三部曲）是刘慈欣所著长篇科幻小说，讲述了地球人类文明和三体文明的信息交流、生死搏杀以及两个文明在宇宙中的兴衰历程。2015年8月，《三体小说》荣获第73届雨果奖最佳长篇小说奖 。
</p>
<p>
    三体小说故事发生之时，文化大革命正在如火如荼地进行，军方探寻外星文明的绝秘计划“红岸工程”取得了突破性进展，在按下发射键的那一刻，历经劫难的叶文洁没有意识到，她彻底改变了人类的命运。
</p>
</body>
</html>

9.3文本样式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
</head>

<style>
/*
颜色
 */
    p{
        /*color: rgb(0,255,0);*/
        color: rgba(0,0,255,0.5);
        /* 首行缩进 */
        text-indent: 2em;
    }

    /*
    文本对齐方式
     */
    h1{
        text-align: center;
    }

    /* 行高 */
    #p1{
        line-height: 50em;
        background: antiquewhite;
        height: 50em;
    }

    /* 装饰 */
    #l1{
        text-decoration: underline;
    }

    #l2{
        text-decoration: line-through;
    }

    #l3{
        text-decoration: overline;
    }

    /* 图片 文本 垂直对齐*/
    img,span{
        vertical-align: middle;
    }

</style>
<body>

下划线：<a id="l1">123456</a> <br/>
中划线：<a id="l2">136790</a> <br/>
上划线：<a id="l3">086421</a> <br/>

    <img src="../sources/images/1.jpeg" width="200" height="300">
    <span>1234567</span>



<h1>作品简介</h1>

<p id="p1">《三体》（别名“地球往事”三部曲）是刘慈欣所著长篇科幻小说，讲述了地球人类文明和三体文明的信息交流、生死搏杀以及两个文明在宇宙中的兴衰历程。2015年8月，《三体小说》荣获第73届雨果奖最佳长篇小说奖 。
</p>
<p>
    三体小说故事发生之时，文化大革命正在如火如荼地进行，军方探寻外星文明的绝秘计划“红岸工程”取得了突破性进展，在按下发射键的那一刻，历经劫难的叶文洁没有意识到，她彻底改变了人类的命运。
</p>

</body>
</html>

9.4文本阴影和超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本阴影和超链接伪类</title>
</head>

<style>
    a{
        color: green;
    }
    /* 鼠标悬浮 */
    a:hover{
        color: red;
    }
    /* 按下鼠标 */
    a:active{
        color: yellow;
    }

    /* 阴影
    颜色 左右 上下 阴影半径
    */
    #price{
        text-shadow: red 5px 10px 2px;
    }
</style>

<body>

<img src="../sources/images/3.png"/>  <br/>
<p>产品：<a>1+</a> </p> <br/>
<p>价格：<a id="price">999</a>  </p> <br/>

</body>
</html>

9.5列表样式练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式练习</title>
</head>

<style>
    p{
        background: #ffa1b7 url("../sources/images/down.png") 125px 16px no-repeat;
        text-indent: 3em;
        font-weight: bold;
        line-height: 50px;
    }
    .cate_menu_lk{
        text-decoration: none;
        color: #000000;
    }
    /* ul li
       list-style:
       none:去掉原点
       circle:空心圆
       decimal:数字
       square:正方形

    */
    .cate_menu_item{
        list-style: none;
    }
    div{
        background: #ff857d;
        height: 300px;
        width: 300px;

    }
    a:hover{
        color: red;
        text-decoration: underline;
    }
    ul li{
        background:url("../sources/images/right.png") 200px 1px no-repeat;
    }
</style>

<body>


<div>
    <p>家用电器</p>
<ul class="JS_navCtn cate_menu">
    <li class="cate_menu_item" data-index="2" clstag="h|keycount|head|category_02a">
        <a target="_blank" class="cate_menu_lk" href="//shouji.jd.com/">手机</a>
        <span class="cate_menu_line">/</span>
        <a target="_blank" class="cate_menu_lk" href="//wt.jd.com">运营商</a>
        <span class="cate_menu_line">/</span>
        <a target="_blank" class="cate_menu_lk" href="//shuma.jd.com/">数码</a>
    </li>
    <li class="cate_menu_item" data-index="3" clstag="h|keycount|head|category_03a">
        <a target="_blank" class="cate_menu_lk" href="//diannao.jd.com/">电脑</a>
        <span class="cate_menu_line">/</span>
        <a target="_blank" class="cate_menu_lk" href="//bg.jd.com">办公</a>
    </li>
    <li class="cate_menu_item" data-index="4" clstag="h|keycount|head|category_04a">
        <a target="_blank" class="cate_menu_lk" href="//channel.jd.com/home.html">家居</a>
        <span class="cate_menu_line">/</span>
        <a target="_blank" class="cate_menu_lk" href="//channel.jd.com/furniture.html">家具</a>
        <span class="cate_menu_line">/</span>
        <a target="_blank" class="cate_menu_lk" href="//jzjc.jd.com/">家装</a>
        <span class="cate_menu_line">/</span>
        <a target="_blank" class="cate_menu_lk" href="//channel.jd.com/kitchenware.html">厨具</a>
    </li>

</ul>
</div>

</body>
</html>

9.6背景图像应用及渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图像应用及渐变</title>
</head>

<style>
    div{
        width: 1000px;
        height: 700px;
        border: 1px solid red;
        background-image:url("../sources/images/down.png");
    }
    /*
    背景图像默认平铺
    */
    .div1{
        background-repeat: no-repeat;
    }
    .div2{
        background-repeat: repeat-y;
    }
    .div3{
        background-repeat: repeat-x;
    }
</style>

<body>

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

</body>
</html>

渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变</title>
</head>
<style>
    body{
        /* 颜色渐变
        角度 颜色1 颜色2
        */
        background-image: linear-gradient(19deg, #ff857d,blue);
    }
</style>
<body>

</body>
</html>

10.盒子模型

10.1什么是盒子模型

在这里插入图片描述

margin：外边距

padding：内边距

border：边框

10.2边框

粗细
样式
颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型及边框使用</title>
</head>

<style>
    /*
    body总有一个默认的外边距
    常见操作：
    h1,ul,li,body{
    margin: 0;
    padding 0;
    text-decoration:none;
     */

    /* border : 粗细 样式 颜色*/
    body{
        margin: 0px;
    }
    #box{
        width:400px;
        height: 300px;
        border: 1px solid red;
    }
    .title{
        font-size: 16px;
        background: #ffa1b7;
    }
    div:nth-of-type(1) input{
        border: 3px solid cornflowerblue;
    }
    div:nth-of-type(2) input{
        border: 3px dashed #ff857d;
    }
</style>

<body>
<div id="box">
    <h1 class="title">登录界面</h1>
    <form action="#">
       <div>
           <span>用户名：</span>
           <input type="text">
       </div>
       <div>
           <span>密码：</span>
           <input type="password"/>
       </div>
    </form>
</div>
</body>
</html>

10.3内外边距

margin : 上右下左
margin: (上下) （左右）
padding: 上右下左
padding: (上下) （左右）

10.4圆角边框及阴影

圆角边框：border-radius
阴影：box-shadow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框及阴影</title>
</head>
<style>

    div{
        width: 100px;
        height: 100px;
        border: 3px solid #ff857d;
        /*border-radius: 50px;*/
        /*border-radius: 10px 20px 30px 40px;*/

        /*
        左上，右下   右上，左下
        */
        border-radius: 20px 40px;
        box-shadow: 10px 10px 100px #ffa1b7;
    }

    img{
        width: 100px;
        height: 100px;
        border-radius: 50px;
        box-shadow: 0 0 100px #ffa1b7;
    }

</style>
<body>

<div></div>

<!--<img src="../sources/images/1.jpeg"/>-->

</body>
</html>

11.浮动

11.1display

块级元素：独占一行

h1~h6 p div 列表…

行内元素：不独占一行

span a img strong…

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

<style>

    /* display
     div{display: inline}    块级元素转行内元素
     span{display: block}    行内元素转块级元素
     {display: inline-block} ----》块级行内元素
     */
    div{
        width: 100px;
        height: 100px;
        border: 2px solid red;
        display: inline-block;
    }

    span{
        width: 100px;
        height: 100px;
        border: 2px solid blue;
        display: inline-block;
    }

</style>

<body>

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

</body>
</html>

11.2float

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

     .father{
        border: 1px solid #000000;
    }
    .img1{
        width: 100px;
        height: 200px;
    }
    .img2{
        width: 200px;
        height: 300px;
    }
    .img3{
        width: 100px;
        height: 400px;
    }

    /*float
      right 右浮
      left  左浮
      
      clear: both   清除浮动
    */

    .div1{
        display: inline-block;
        float: left;
    }
    .div2{
        display: inline-block;
        float: right;
    }
    .div3{
        display: inline-block;
        float: left;
    }
    .div4{
        display: inline-block;
        float: right;
        clear: both;
    }

</style>
<body>

<div class="father">
    <div class="div1">
        <img class="img1" src="../sources/images/1.jpeg"/>
    </div>
    <div class="div2">
        <img class="img2" src="../sources/images/2.JPG"/>
    </div>
    <div class="div3">
        <img class="img3" src="../sources/images/3.png"/>
    </div>
    <div class="div4">
        哈哈哈哈哈哈哈哈哈哈哈哈
    </div>

</div>

</body>
</html>

11.3overflow及父级边框塌陷问题

解决父级边框塌陷问题

浮动元素后面加空div

简单，代码中尽量避免空div

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

设置父元素高度

简单，元素假设有了固定的高度，就会被限制

    .father{
        width: 1000px;
        height: 800px;
        border: 1px solid #000000;
    }

父类添加属性overflow

简单，下拉的一些场景避免使用

overflow: hidden;

父类添加一个伪类：after(推荐)

写法稍微复杂一点

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

11.4对比

display

方向不可以控制

float

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

12.定位

12.1相对定位

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

<style>

    body{
        padding: 20px;
    }
    div{
        margin: 10px;
        padding: 5px;
        font-size: 15px;
        line-height: 20px;
    }
    #father{
        border: 1px solid #000000;
        width: 1000px;
        height: 200px
    }
    #first{
        border: 1px dashed #ffa1b7;
        background: #ff857d;
        position: relative;
        top: -20px;
    }
    #second{
        border: 1px dashed #7d9eff;
        background: aqua;
        position: relative;
        left: 20px;
    }
    #third{
        border: 1px dashed #335026;
        background: chartreuse;
        position: relative;
        right: 20px;
        bottom: -20px;
    }

</style>

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

</body>
</html>

相对定位：position: relative;

相对于原来的位置，进行指定的偏移，相对定位仍然在标准文档流中，原来的位置会被保留

top: -20px;

left: 20px;

bottom: -10px;

right: 20px;

12.2练习

使用
和布局页面
每个超链接宽度和高度都是100px，背景颜色是粉色，鼠标指针移上去时变为蓝色
使用相对定位改变每个超链接的位置

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方块练习</title>
</head>
<body>
<style>

    a{
        font-size: 20px;
        display: inline-block;
        width: 100px;
        height: 100px;
        line-height: 100px;
        background: #ffa1b7;
        text-align: center;
    }

    #second{
        position: relative;
        top: 100px;
    }
    #four{
        position: relative;
        top: 100px;
    }
    #five{
        position: relative;
        top: 100px;
        left:100px;
    }
    a:hover{
        background: blue;
    }
    #father{
        width: 310px;
        height: 310px;
        padding: 10px;
        border: 1px solid red;
    }

</style>

<div id="father">
    <a id="first">链接一</a>
    <a id="second">链接二</a>
    <a id="third">链接三</a>
    <a id="four">链接四</a>
    <a id="five">链接五</a>
</div>

</body>
</html>

12.3绝对定位

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

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

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

position: absolute

12.4固定定位

position: fixed

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

<style>
    body{
        height: 1000px;
    }
    div:nth-of-type(1){
        height: 50px;
        position: absolute;
        bottom: 10px;
        background: aqua;
    }
    div:nth-of-type(2){
        height: 20px;
        position: fixed;
        bottom: 10px;
        background: #ffa1b7;
    }
</style>

<body>

<div>绝对定位</div>
<div>固定定位</div>

</body>
</html>

12.5z-index

z-index默认是0，无上限
opacity设置透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index及透明度</title>
</head>
<style>
    #content{
        margin: 0;
        padding: 0;
        width: 300px;
        height: 132px;
        border: 1px solid black;
        overflow: hidden;
        font-size: 12px;
        line-height: 25px;
        position: relative;
    }
    ul,li{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    #target,#bg{
        position: absolute;
        top: 59px;
    }
    #target{
        right: 130px;
        color: #F5F5F5;
        z-index: 999;
    }
    #bg{
        width: 300px;
        height: 20px;
        background: black;
        opacity: 50%;
    }
</style>
<body>

<div id="content">
    <ul>
        <li><img src="../sources/images/2.JPG"/> </li>
        <li id="target">知识点一</li>
        <li id="bg"></li>
        <li>时间：2020/11/14</li>
    </ul>
</div>

</body>
</html>

一壶烈酒可慰风尘

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS学习笔记

CSS1.什么是CSSCascading Style Sheet 层叠样式表CSS：表现（美化网页）字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…2.CSS发展史CSS1.0CSS2.0 DIV(块) + CSS,HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1 浮动、定位CSS3.0 圆角、阴影、动画… 浏览器兼容性3.CSS快速入门及优势入门：<!DOCTYPE html><html lang="en">
复制链接

扫一扫

专栏目录