CSS3

最新推荐文章于 2023-06-12 23:12:35 发布
最新推荐文章于 2023-06-12 23:12:35 发布
阅读量185 收藏 1
点赞数
分类专栏： JAVA
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43686850/article/details/116792650
版权

实用网站

源码之家网站：https://www.mycodes.net/

渐变颜色网站：https://www.grabient.com/

文字抠图：https://www.remove.bg/zh

模板之家：http://www.cssmoban.com/

UI组件：https://element.eleme.cn/#/zh-CN

飞冰：https://ice.work/

Less：https://less.bootcss.com/

HTML和CSS动画：https://www.html5tricks.com/category/html5-demo/page/4

JavaScript动画：https://www.w3school.com.cn/js/js_animation.asp

1、什么是CSS

CSS：Cascading Style Sheet 层叠样式表

如何学习

1.CSS是什么
2.CSS怎么用
3.CSS选择器（重点+难点）
4.美化网页（文字、阴影、超链接、列表、渐变…）
5.盒子模型
6.浮动
7.定位
8.网页动画（特效）

HTML + CSS + Jscript

结构 + 表现+ 交互

image-20210510121309408

2、初识选择器

语法格式

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

<!--规范. <style> 可以编写css代码
    语法：
    选择器{
        声明1；
        声明2；
    }
-->
    <style>
        h1{
            color:darkred;
        }
    </style>
</head>

HTML与CSS分离

HTML文件：用link把css文件连接起来

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

CSS文件：在此文件下控制h1之类的参数

h1{
    color: aquamarine;
}
image-20210510124124796

CSS优势：

1、内容与表现分离

2、网页结构表现统一，可以实现复用

3、样式十分丰富

4、利用SEO，容易被搜索引擎收录（容易被搜到）

CSS的3种导入方式

优先级（就近原则）：

行内样式（body内）

内部样式（Style内）

外部样式（CSS文件内）

哪个离h1近，就显示哪个

HTML文件：

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

<body>
<!--行内样式-->
<h1 style="color:rosybrown">标题</h1>
</body>

CSS文件：

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

扩展：

  • 链接式：
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
  • 导入式：（CSS 2.1 特有的）
<!--导入式-->
<style>
    @import url("css/style.css");
</style>

3、选择器

id选择器的id是唯一的

class选择器的class可以重复

标签选择器

<style>
  /*标签选择器，会选择到页面上所有的这个标签的元素*/
  h1{
    color: #2365a7;
    background: #60f1dc;
    border-radius: 60px;
  }

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

类选择器

类选择器的样式
.class名{

}

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

  <style>
  
    .张书毓{
      color: rosybrown;
    }

    .zsy{
      color: aquamarine;
    }

  </style>

</head>
<body>

<h1 class="zsy">zsy</h1>
<h1 class="ZSY">ZSY</h1>
<p class="张书毓">张书毓</p>

</body>
</html>

id选择器

  • id是唯一的

id选择器样式：

#id名{

}

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

  <style>
    
    #zsy{
      color: rosybrown;
    }
    #张书毓{
      color: aquamarine;
    }

  </style>
  
</head>
<body>

<h1 id="张书毓">张书毓</h1>
<h1 id="zsy">zsy</h1>

</body>
</html>

选择器优先级

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

4、层次选择器

1、后代选择器： body中的所有p标签有效

<style>
	body p{
  		color: #60f1dc;
	}
</style>

2、子选择器：body下的第一代有效

body>p{

}

<style>
	body>p{
  		background: darkred;
	}
</style>

3、相邻兄弟选择器：class类选择器的下一个P标签有效，显示p3

.class+p{

}

<head>
<style>
	.class+p{
      background: blueviolet;
    }
</style>
</head>

<body>
<p>p1</p>
<p class="class">p2</p>
<p>p3</p>
</body>

4、通用选择器

.class~p{

}

<head>
<style>
	.class~p{
      background: blueviolet;
    }
</style>
</head>

<body>
<p>p1</p>
<p class="class">p2</p>
<p>p3</p>
</body>

5、结构伪类选择器

所有带冒号：的就是伪类

选择第一个元素和最后一个元素

<style>
  ul li:first-child{
    background: #60f1dc;
  }

  ul li:last-child{
    background: rosybrown;
  }
</style>

<body>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
  • 选中当前p元素的父级元素，父级元素body的第3个子元素
p:nth-child(3){
  background: blueviolet;
}
  • 选中父元素，父元素body中类型为p的第4个元素
p:nth-of-type(4){
  background: darkred;
}
  • 鼠标悬停时的背景色
a:hover{
  background: coral;
}
  • 鼠标按下未释放的状态
a:active{
  color: chartreuse;
}

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


  <style>
    ul li:first-child{
      background: #60f1dc;
    }

    ul li:last-child{
      background: rosybrown;
    }

    /*选中当前p元素的父级元素，父级元素body的第3个子元素*/
    p:nth-child(3){
      background: blueviolet;
    }

    /*选中父元素，父元素body中类型为p的第4个元素*/
    p:nth-of-type(4){
      background: darkred;
    }

    /*鼠标悬停时的背景色*/
    a:hover{
      background: coral;
    }


  </style>
</head>
<body>
<a href="">测试</a>
  <h1>h1</h1>
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
  </ul>
  <p>p7</p>
  <p>p8</p>

</body>
image-20210510191648144

6、属性选择器==*==（常用）

^="字符串"		#以"字符串"为开头
$="字符串"		#以"字符串"为结尾
*="字符串"		#任意"字符串"
=

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

  <style>
    .class a{
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background: #60f1dc;
      text-align: center;
      color: coral;
      text-decoration: none;
      margin-right: 5px;
      font: bold 20px/50px Arial;
    }

    /*选中id为"first"的标签*/
    a[id="first"]{
      background: cadetblue;
    }

    /*选择所有class中带有links的标签*/
    a[class*=links]{
      background: rosybrown;
    }

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

    /*选中href中以pdf结尾的元素*/
    a[href$=pdf]{
      background: darkgoldenrod;
    }
  </style>
</head>
<body>


<p class="class">

  <a href="http://www.baidu.com" class="links" id="first">1</a>
  <a href="" class="links item active" target="_blank" title="test">2</a>
  <a href="images/123.html" class="it">3</a>
  <a href="images/123.png" class="it">4</a>
  <a href="images/123.jpg" class="it">5</a>
  <a href="avc.pdf" class="links it">6</a>
  <a href="/sa.pdf" class="links it">7</a>
  <a href="/xxx.doc" class="links last">8</a>
  
</p>
</body>

image-20210511124416442

7、美化网页

span标签

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

    <style>
        #title1{
            font-size: 30px;
        }
    </style>

</head>
<body>
欢迎学习 <span id="title1">JAVA</span>
</body>

字体样式

font-family

font-size

font

font-weight

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

  <style>
    body{
      font-family: Arial, 楷体 ;
      color: cadetblue;
    }
    h1{
      font-size: 50px;
    }
    h1:nth-of-type(2){
      font-size: 30px;
    }
    p:nth-of-type(3){
      font: oblique bold 20px "华文楷体";
    }
    .p1{
      font-weight: bold;
    }

  </style>
</head>
<body>

<h1>生命如潮</h1>
<h1>Life is like a tide</h1>

<p class="p1">不必在意他人的嘲讽和境遇的嘲弄</p>
<p>昔日的少年擦干眼泪踏上了战场</p>
<p>与懦弱恩断义绝</p>

</body>
image-20210510201539443

文本样式

rgb(xx，xx，xx）

rgba(xx，xx，xx，透明度)

文本居中：text-align: center

首行缩进：text-indent: 10em;

行高：line-height: 20px;

块的高度：height: 20px;

  • 当行高与块的高度一致时，居中

下划线：text-decoration: underline;

中划线：text-decoration: line-through;

上划线：text-decoration: overline;

去掉超链接a标签的下划线

text-decoration: none;

超链接伪类

  • p:hover
  • p:active
<style>
/*鼠标悬停时的状态*/
p:hover {
  color:coral;
  font-size: 30px;
}
/*鼠标按下时未释放的状态*/
p:active{
  color:darkslategrey;
}
/* 阴影颜色 水平偏移 垂直偏移 阴影半径*/
#yin{
  text-shadow: #2365a7 10px 10px 2px;
}
</style>

阴影

text-shadow: #2365a7 10px 10px 2px;

（阴影颜色 水平偏移 垂直偏移 阴影半径）

列表样式

ul li中

去掉无序符号：list-style：none；

无序符号变成空心圆：list-style：circle；

无序列表变成有序列表：list-style：decimal；

无序符号变成正方形：list-style：square；

ul li{
    font-size: 30px;
    list-style: none;
}

HTML文件

<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="nav">
<h2 class=title>全部商品分类</h2>
<ul>
<li>
        <a href=#>图书</a>&nbsp;&nbsp;&nbsp;
        <a href=#>音像</a>&nbsp;&nbsp;&nbsp;
        <a href=#>数字商品</a>
</li>
<li>
    <a href=#>家用电器</a>&nbsp;&nbsp;&nbsp;
    <a href=#>手机</a>&nbsp;&nbsp;&nbsp;
    <a href=#>数码</a>
</li>

<li>
<a href=#>电脑</a>&nbsp;&nbsp;&nbsp;
<a href=#>办公</a>
</li>
    <li>
        <a href=#>家居</a>&nbsp;&nbsp;&nbsp;
        <a href=#>家装</a>&nbsp;&nbsp;&nbsp;
        <a href=#>厨具</a>
    </li>
<li>
<a href=#>服饰鞋帽</a>&nbsp;&nbsp;&nbsp;
<a href=#>个性化妆</a>
</li>
<li>
<a href=#>礼品箱包</a>&nbsp;&nbsp;&nbsp;
<a href=#>钟表</a>&nbsp;&nbsp;&nbsp;
<a href=#>珠宝</a>
</li>
<li>
<a href=#>食品饮料</a>&nbsp;&nbsp;&nbsp;
<a href=#>保健食品</a>
</li>
<li>
<a href=#>彩票</a>&nbsp;&nbsp;&nbsp;
<a href=#>旅行</a>&nbsp;&nbsp;&nbsp;
<a href=#>充值</a>&nbsp;&nbsp;&nbsp;
<a href=#>票务</a>
</li>
</ul>
</div>

</body>

CSS文件

.title{
    font-size: 45px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 60px;
    text-align: center;
    background: olivedrab url("../images/右箭头.png") 450px 12px no-repeat;
}

#nav{
    width: 500px;
}

ul li{
    font-size: 30px;
    list-style: square;
    background: bisque url("../images/右箭头.png") 410px 0px no-repeat ;
}

a{
    text-decoration: none;
    color: black;
    font-weight: bolder;
    font-family: "微软雅黑 Light";
}

a:hover{
    color: rgb(22,85,156);
}

背景图像应用及渐变

渐变颜色网站：https://www.grabient.com/

background：颜色、图片路径、XY坐标、平铺方式

background: olivedrab url("../images/右箭头.png") 450px 12px  no-repeat;

border: 线条大小、实线/虚线、颜色

border: 1px solid/dashed rosybrown

<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="css/style.css">

    <style>
        body{
            background-color: #8EC5FC;
            background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
        }
        div{
      width: 1000px;
      height: 700px;
      border: 1px solid rosybrown;
      /*背景图片，默认是全部平铺*/
       background: olivedrab url("../images/右箭头.png") 450px 12px no-repeat;
    }
    /*repeat-x 平铺一行图片*/
    .div1{
      background-repeat: repeat-x;
    }
    /*no-repeat 只显示一张图片*/
    .div2{
      background-repeat: no-repeat;
    }

  </style>
</head>
<body>

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

</body>

8、盒子模型

盒子

image-20210511124147570

margin：外边距 （可用来居中某个元素）

  • margin：0 auto

    表示上下都是0，左右是auto居中，页面居中

    前提条件：标签在div下

padding：内边距

  • padding：0 0 0 0

    上下左右都为0

border：边框

  • border: 2px solid/dashed darkslategrey;

    线粗细、实线/虚线、边框颜色

内外边距

把默认的边距消除，进行初始化：

<style>
h1,ul,li,p,body{
    margin: 0;
    padding: 0;
    text-decoration: none;
}
</style>
  • margin-top：外边距的上边距
<style>
h2{
        font-size: 16px;
        margin-top: 0;
        padding: 0 0 0 0;
   		margin:0 auto;
    }
</style>

圆角边框

border-radius: 30px 40px 50px 60px

顺时针方向：

左上、右上、右下、左下

圆形：

宽度=高度

border-radius: 50px (半径)

<style>
    div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        border-radius: 50px;
    }
</style>
image-20210511140409053

制作圆框头像

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

    <style>
        
        img{
            width: 300px;
            height: 300px;
            border-radius: 150px;
            border-radius: 100px 100px 100px 100px;  
        }
    </style>
</head>
<body>

<div></div>
<br>
<img src="stone.jpg" alt="">

</body>
image-20210511143155774

盒子阴影

  • box-shadow
<style>
  div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    box-shadow: 10px 10px 100px yellow;
  }
</style>
image-20210511144054721

图片阴影

<head>
    <meta charset="UTF-8">
    <title>阴影</title>

  <style>
    img{
        width: 200px;
        height: 200px;
        border-radius:100px ;
        box-shadow: 10px 10px 100px rosybrown;
    }
  </style>

</head>
<body>

<img src="1.jpg" alt="">

</body>
image-20210511144439246

图片居中

把img的显示方式变成块，display：block

就可以使用margin：0 auto 的方式使图片居中

<head>
    <meta charset="UTF-8">
    <title>阴影</title>

  <style>
    img{
        border-radius:200px ;
        box-shadow: 10px 10px 100px rosybrown;
        margin: 0 auto;
        display: block;
    }
  </style>

</head>
<body>

<div >
    <img src="1.jpg" alt="">
</div>
</body>
image-20210511145524164

9、display和浮动

块级元素与行内元素

块级元素：独占一行

  • h1~h6
  • p
  • div
  • 列表

**行内元素：**不独占一行

  • span
  • a
  • img
  • strong

块级元素可以包含行内元素

display

  • 行内元素+块元素：属于块元素，但是可以内联，保持在一行

    display: inline-block;

  • 块元素：

    display: block;

  • 行内元素：

    display: inline;

  • 隐藏：

    display: none;

注意：

1、body有默认的外边距

2、div有默认的外边距

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

  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid indianred;
      display: inline-block;
    }
    span{
      width: 100px;
      height: 100px;
      border: 1px solid indianred;
      display: inline-block;
    }
  </style>

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

浮动

独立于块元素

  • float：right
  • float：left

问题：

网页页面缩小导致浮动内容所在的网页边框塌陷

父级边框塌陷

  • clear：right； 右侧不允许有浮动
  • clear：left； 左侧不允许有浮动
  • clear：both； 两侧不允许有浮动

解决方案：

1、增加父级元素的高度

#father{
    border: 1px solid #E0C3FC;
    height: 800px;
}

弊端：若元素有了固定高度，就会被限制

2、添加空div

html文件的div标签底部添加 

<div id="father">
  <div class="lay1"><img src="images/1.jpg" alt=""> </div>
  <div class="lay2"><img src="images/2.jpg" alt=""> </div>
  <div class="lay3"><img src="images/3.jpg" alt=""> </div>
  <div class="lay4"><img src="images/4.jpg" alt=""> </div>
    <div class="clear"> </div>
</div>

css文件

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

弊端：代码中尽量避免空div

3、overflow

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

  • 滚动条：

    overflow: scroll;

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

弊端：下拉的一些场景避免使用

4、父级添加一个伪类：after（推荐使用）

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

总结

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="father">
  <div class="lay1"><img src="images/1.jpg" alt=""> </div>
  <div class="lay2"><img src="images/2.jpg" alt=""> </div>
  <div class="lay3"><img src="images/3.jpg" alt=""> </div>
  <div class="lay4"><img src="images/4.jpg" alt=""> </div>
    <div class="clear"> </div>
</div>
</body>
</html>

CSS文件

div{
    margin: 10px;
    padding: 10px;
}

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

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


img{
    width:200px;
    height:200px;
    border-radius: 100px;
}

.lay1{
    border: 1px dashed #60f1dc;
    display: inline-block;
    float: left;
}

.lay2{
    border: 1px dashed #2365a7;
    display: inline-block;
    float: left;
}

.lay3{
    border: 1px dashed #8EC5FC;
    display: inline-block;
    float: right;
}

.lay4{
    border: 1px dashed olive;
    display: inline-block;
    float: right;
}

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

display与float对比

  • display

    方向不可控制

  • float

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

10、定位

相对定位

  • position: relative

    相对定位

  • top: -20px;

    相对于上方，减少20px，相当于向上移

  • bottom:20px;

    相对于下方，增加20px，相当于下移

  • left: 20px;

    相对于左边，增加20px，相当于向右移

  • right: 20px;

    相对于右边，增加20px，相当于向左移

定位方向：负号决定方向，多少px决定距离

#first{
position: relative;
top: -20px;
left: 20px;
bottom:20px;
}

练习

image-20210511201218931

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="links">
  <a href="">链接1</a>
  <a href="">链接2</a>
  <a href="">链接3</a>
  <a href="">链接4</a>
  <a href="">链接5</a>
</div>
</body>
</html>

CSS文件

#links{
    border: 2px solid red;
    padding: 20px;
    width: 600px;
    height: 600px;
    margin: 0 auto;
}

a{
    font-size: 30px;
    text-decoration: none;
    background: hotpink;
    color: white;
    display: inline-block;
    text-align: center ;
    line-height: 200px;
}
a:nth-of-type(1){
    width: 200px;
    height: 200px;
    position: relative;
    left: -5px;
}

a:nth-of-type(2){
    width: 200px;
    height: 200px;
    position: relative;
    right: -200px;
}
a:nth-of-type(3){
    width: 200px;
    height: 200px;
    position: relative;
    bottom: -200px;
    left: -5px;
}
a:nth-of-type(4){
    width: 200px;
    height: 200px;
    position: relative;
    right: -200px;
    bottom: -200px;
}
a:nth-of-type(5){
    width: 200px;
    height: 200px;
    position: relative;
    right: -200px;
    top:-200px;
}
a:hover{
    background: #2365a7;
}

最简洁的方法：

1、红色外框线：

  • 长宽：width、height
  • 页面居中：margin：0 auto
  • 大小为2px的红色实线：border：2px solid red

2、定义五个方块的公有属性：

  • 去掉下划线：text-decoration：none
  • 文字颜色、方块背景色：color、background
  • 方块的大小：width、height：100px
  • 行高=方块高度，使文字在垂直方向上居中：line-height：100px
  • 使文字在水平方向居中：text-align：center
  • 五个a标签是行内元素，要转换成块级元素显示：display：block

3、通过相对定位，把五个方块进行位移

  • 相对定位：position：relative
  • 位移：top、bottom、left、right
  • 指定某个方块：a：nth-of-type(x)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #links{
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border: 2px solid red;
        }
        a{
            text-decoration: none;
            color: white;
            background: hotpink;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            display: block;
        }
        a:nth-of-type(2),a:nth-of-type(4){
            position: relative;
            right: -200px;
            top: -100px;
        }
        a:nth-of-type(5){
            position: relative;
            right: -100px;
            top: -300px;
        }

    </style>
</head>
<body>
<div id="links">
    <a href="">链接1</a>
    <a href="">链接2</a>
    <a href="">链接3</a>
    <a href="">链接4</a>
    <a href="">链接5</a>
</div>
</body>
</html>
image-20210512093851411

绝对定位与固定定位

绝对定位：position：absolute;

固定定位：position：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

层级的概念

image-20210511210217686

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

相当于层级

  • 999就是在最高层，元素就会浮在最上面

  • 0就是最底层，一般用来当背景

去掉所有标签的边距

  • 列表的无序符号也被消除

    原本需要如下操作消除

    ul,li{
	list-style:none
}

*{
    margin: 0px;
    padding: 0px;
}

总结

1、把所有标签的边距置0

*{
    margin: 0px;
    padding: 0px;
}

2、空的ul,li拿来当背景：

<li class="background"></li>

3、黑色外框实线，父级元素div，宽与图片width相同

#content{
    width: 400px;
    border: 1px solid black;
}

4、文字和背景进行绝对定位之前，以列表ul为相对定位

#content ul{
    position: relative;
}

5、文字和背景进行绝对定位，文字和背景处于同一行

  • 绝对定位：position：absolute
  • 背景宽度与图片宽度相同：width:400px
  • 背景和文字距离列表ul的位置：top:228px;
.tip,.background{
    position: absolute;
    width: 400px;
    top:228px;
}

6、文字的层级在空背景的上面

  • 调整文字为999层级：z-index: 999;
.tip{
    color: white;
    z-index: 999;
}

7、调整背景色的透明度

  • 透明度为0.5：opacity: 0.5;
.background{
    background: black;
    opacity: 0.5;
}

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="1.png" alt="" height="250px" width="400px"></li>
        <li class="tip">学习大前端，狂神说</li>
        <li class="background"></li>
        <li>时间：2050-01-01</li>
        <li>地点：火星一号基地</li>
    </ul>
</div>
</body>
</html>

CSS文件

*{
    margin: 0px;
    padding: 0px;
}
#content{
    width: 400px;
    border: 1px solid black;
}
#content ul{
    position: relative;
}
.tip,.background{
    position: absolute;
    width: 400px;
    top:228px;
}
.tip{
    color: white;
    z-index: 999;
}
.background{
    background: black;
    opacity: 0.5;
}
image-20210512110739040

拿B站封面：

1、点进网页查看源代码

2、点击png文件

3、修改图片大小：1768*1080

weixin_43686850
关注
专栏目录
国内十大源码下载类知名网站总体简评
pc168的专栏
08-15 5098
1.源码之家 http://www.mycodes.net  ;  ;国内流量最大的源码下载站，下载点较多，速度一般，比较稳定，死链少2.源码爱好者 http://www.codesfan.com 新兴的源码下载站,下载速度快.,源码更新速度较快、源码较全，还有模板、素材下载及一些不错的技术文章，是个值得收藏的站点！3.源码网 http://www.yuanmawang.com 新崛起的专业网站源
源码下载地址及各类资源站点
天行健工作室
10-20 4076
源码下载站点及网络上大部分PHP站点集合http://www.mstong.net/ php文本代码站点，收集了大量的PHP文本代码，PHP文本代码大部分提供在线演示；同时也提供了一部分ASP、JSP、CGI代码下载。 http://www.downcode.com 中国源码下载站--提供大量ASP、CGI、PHP、JSP、.NET、Java特效等建站源码,及各种软件的下载破解应用! http:/
html span中怎么添加链接,如何从隐藏的span类HTML中获取链接？
weixin_35835184的博客
07-14 1666
我在学习网络抓取，就像我从真实的网站上获取真实世界的数据一样。但是，我从来没有遇到过这种问题。通常可以通过右键单击网站部分，然后单击“检查”选项来搜索所需的HTML源代码。我马上跳到这个例子来解释这个问题。在从上面的图片中，标有span class的红色原来不在那里，但是当我将光标放在(甚至没有点击)一个用户名上时，会弹出一个用于该用户的小框，也会显示span class。我最终想要获取的是嵌入在...
http://www.mycodes.net/soft/9718.htm
jojozhuang的专栏
01-15 6385
http://www.mycodes.net/soft/9718.htm 
0324 ＜div＞ 、＜span＞标签+图片标签 +链接
qq_42731532的博客
03-24 1484
<div>和<span>标签都是没有语义的，就是一盒，可以用来装内容（文字 或者图片） <div>用来布局，一个标签 独占一行。 (大盒子) <span > 也是用来布局，一行上面可以放多个<span> （小盒子） div 是division的。表示分隔。 span： 跨度 如图所示：红色div 黄色span 图像标签（是个单标签） 上一个的单标签是 换行 <br/> <img >标签 用于定义HTM..
HTML5+CSS3 精美登陆界面源码
01-19
CSS3引入了许多新功能，如选择器的扩展（如:nth-child()、:hover、:focus等），使得更精细的样式控制成为可能；多列布局（column-count, column-gap等），让创建杂志风格的布局变得轻松；以及最重要的，动画和过渡...
CSS3 +HTML5入门到精通
07-01
【标题】"CSS3 +HTML5入门到精通"与【描述】"《HTML+5+从入门到精通》-中文学习教程"所涵盖的知识点主要围绕着Web开发的基础技术——HTML5和CSS3展开，这两者是现代网页设计与开发不可或缺的组成部分。以下是关于这...
CSS3实现八方向云台遥控器样式
04-22
在本文中，我们将深入探讨如何使用CSS3来实现一个八方向云台遥控器的样式。云台遥控器是用于控制摄像头或类似设备在八个不同方向上移动的装置，这种功能通常应用于无人机、监控系统等领域。在网页开发中，通过CSS3...
354个CSS3特效源码合集（HTML+CSS+JavaScript）
12-27
354个CSS3特效源码合集（HTML+CSS+JavaScript）： HTML5跨浏览器纯CSS工具提示特效， 炫酷CSS3鼠标滑过图片动画特效， 移动手机APP滑动手指切换图片特效，2种不可思议的纯CSS3 loading加载动画特效等等。
CSS3 教程
01-19
CSS3 教程 CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。 本教程向您讲解 CSS3 中的新特性。   点击 “尝试一下” 按钮查看在线实例。 CSS3 参考手册 在软件开发网中，我们提供完整的 CSS3 参考手册，...
网站的家（http://www.cssmoban.com/）
yanwanhui的博客
11-21 1073
http://www.cssmoban.com/
CSS基础学习--9 边框（Border）
最新发布
yyxhzdm的博客
06-12 2628
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。上面的例子用了很多属性来设置边框，你也可以在一个属性中设置边框。边框样式属性指定要显示什么样的边界。
前端学习笔记二、div、span标签，插入图片、超链接，样式表的创建，class标签选择器通配符选择器
qq_51445056的博客
04-22 4540
1.什么是div标签和span标签 div是块级元素； div标签，没有具体含义，用来划分页面的区域，类似生活中看到的警戒线。 span是行内元素； span是行内元素，在它的前后不会换行。 span没有结构上的意义，只是单纯的应用样式，其他元素不适合时，就可以使用span元素。 块元素可以设置宽高，独占一行；默认排列是从上到下； 行内元素不能设置宽高； 2.插入图片 语法： <img src="图片入径" title="鼠标悬停上去后的提示信息" alt="图片不显示后的提示信息
CSS的优势（优点、好处）和一些实例
weixin_44799645的博客
11-09 2757
今天给大家一起学习一下CSS的优势（优点、好处）和一些实例吧！ 小常说一下： 天使告诉我，其实每个人都有一双隐形的翅膀，只要我们努力展翅飞翔，终有遨游天际的那天，朋友，让我们一起努力，共创美好明天！ 学习不是一朝一夕的事情，需要平时积累，需要平时的勤学苦练。 CSS的优势（优点、好处） CSS3 是 CSS 规范的最新版本，在 CSS2.1 的基础上增加了很多强大的新功能，以帮助开发人员解决一些实...
span、div标签（包含的超链接）根据条件设置可否点击
Hope_lee的博客
01-03 3610
项目中的前端页面总会有一些<span>、<div>标签包的超链接，但需求要求超链接不能随时都可以点击，比如：某一个超链接是在某个Function返回response之后才能点击，做法其实很简单，比如： 现在有这么一段代码 <span class="btn btn-link px-0" data-toggle="modal" data-target="" ng...
初学：什么是DIV＋CSS？有什么优势？
破烂坏男人
09-06 895
什么是CSS＋DIV？　CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。　　CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的
快速掌握CSS3 Grid布局
"10分钟理解CSS3 Grid布局" 在前端开发中，CSS3 Grid布局是一个极其重要的工具，它提供了一种强大的二维布局机制，能够帮助开发者更高效地创建响应式和自适应的网页设计。本篇文章将简明扼要地介绍CSS3 Grid布局的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值