HTML+CSS(4)

1.溢出设置

设置超出的部分:显示(默认)visible/隐藏hidden/滚动显示scroll
在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body>div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /*设置超出的部分:显示(默认)visible/隐藏hidden/滚动显示scroll*/
            overflow: scroll;
        }
        body>img {
            width: 100px;
            /*设置行内元素垂直对齐方式:
            top上对齐,
            middle中间对齐
            bottom下对齐,
            baseline基线对齐*/
            vertical-align: bottom;
        }
    style>
head>
<body>
<input type="text"><img src="../imgs/a.jpg" alt="">
<div>
    <img src="../imgs/a.jpg" alt="">
div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

2.层级显示

position使元素脱离文档流
z-index值越大层级越高
在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #d1{
            width: 100px;
            height: 50px;
            background-color: red;
            position: absolute;/*position会让div脱离文档流*/
            /*层级越大显示约靠前*/
            z-index: 1;
        }
        #d2{
            width: 50px;
            height: 100px;
            background-color: blue;
            position: absolute;
            z-index: 2;
        }
    style>
head>
<body>
<div id="d1">div>
<div id="d2">div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

3.网页盗图

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #i1{
            width: 21px;
            height: 21px;
            display: block;
            background-image: url("https://game.gtimg.cn/images/lol/v3/topfoot-spr.png");
            background-position: -381px -39px;
        }
        #i2{
            width: 16px;
            height: 24px;
            display: block;
            background-image: url("https://game.gtimg.cn/images/lol/v3/topfoot-spr.png");
            background-position: -303px -84px;
        }
        a{
            background-image: url("https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png");
            display: block;
            width: 200px;
            height: 54px;
        }
    style>
head>
<body>
<a href="">a>
<i id="i1">i>
<i id="i2">i>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

4.网页盗视频

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <video id="bg" poster="https://ys.mihoyo.com/main/_nuxt/img/47f71d4.jpg"
           loop muted AUTOPLAY CONTROLS
           style="width: 1576.89px; height: 887px;">
        <source src="https://ys.mihoyo.com/main/_nuxt/videos/3e78e80.mp4" type="audio/mp4">
        您的浏览器不支持播放此视频.
    video>
video>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

相关阅读:
开关、电机、断路器、电热偶、电表接线图大全
ubuntu操作系统之新手操作必看篇
【校招VIP 前端】后台接口说明和理解
二叉树题目：统计二叉树中好结点的数目
学习Vue的入门方法有哪些呢？
多线程入门
多种方法从尾部移除指定位置的链表节点
vue中ElementUi的el-table表格绑定行点击事件
IT行业哪个方向比较好就业?
Windows 修改系统默认字体

原文地址：https://blog.csdn.net/longgetaotao_06/article/details/126554820