day12-html

最新推荐文章于 2024-10-01 23:46:18 发布

金火水木土

最新推荐文章于 2024-10-01 23:46:18 发布

阅读量92

点赞数

分类专栏： python自动化运维-py27 文章标签： html 数据库 sql

本文链接：https://blog.csdn.net/qq_41383195/article/details/125987007

版权

python自动化运维-py27 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

内容回顾

# 课程安排
# 13\20\27 前端的内容
# 13 html + css
# 20 js bom dom
# 27 jq bootstrap

# 数据库
# 什么是关系型数据库 非关系型数据库(no-sql)
# mysql oracle       redis mongodb

# 数据库的操作
    # 创建库 create database 库的名字
    # 切换到库下 use 库名
    # 修改库的编码 alter database charset=utf8
    # 查看当前有哪些库 show databases
# 数据表的操作
    # 存储引擎 : Innodb Myisam
    # 创建表 create table
        # 基本数据类型 数字(int,float,tinyint) 字符串(char,varchar)
            # 时间(datetime date time) set和enum
        # 约束条件 非空not null,默认default,唯一unique,auto_increment自增
                #  主键primary key,外键 foreign key
    # 删除表 drop table
    # 查看表 desc 表名 / show create table 表名
    # 修改表 alter table
# 数据的操作
    # 增 insert into 表名(字段1,字段2) values(值1,值2),(第二行的数据1,line2data2)
    # 删 delete from 表 where 条件
    # 改 update 表名 set 字段1=新的值,字段2=新的值 where 条件
    # 查
        # 单表查询 : select distinct 字段 from 表 where 条件 group by 字段 having 过滤条件 order by 排序 limit n;
        # 多表查询 :
            # 连表
                # where / select * from 表1 inner join 表2 on 表1.字段 = 表2.字段
                # left join
                # right join
            # 子查询
                # select * from 表 where 字段 = (select ...)
    # 聚合函数 : count sum avg max min
# 数据库的备份\还原
    # mysqldump -u用户名 -p密码 数据库名 > 地址/xxx.sql
    # 进数据库,source 地址/xxx.sql
# python操作数据库
    # pymysql
    # 先建立链接
    # 获取游标
    # 执行sql
    # 获取结果
    # 关闭游标和链接
# 事务\锁\索引
    # begin;
    # select * from 表 where id <5 for update;
    # update 表 set age= age+1 where id <5;
    # commit;

    # 索引 : 会加速查询 会拖慢写的速度 索引不要建立不合适的索引
    # 创建索引 : create index 索引名 on 表名(字段名)  给字段创建一个叫做(索引名)的索引
    # 删除索引 : drop index 索引名 on 表名
    # 主键 和 唯一 是自带索引的
    # 我们自己创建索引 :除了主键 和 唯一约束之外的,区分度比较大的,经常被作为条件查询的

今日内容

html
css

Html

# B/S架构
# socket
# html 约束文档中文字的框架的(字体大小 是否换行)
# css 给这些基础文字框架加上好看的样式
# javascript -js 能够让网页动起来

# 双边标记 有开始就有闭合
# 单边标记 只有一个标记,自闭和

# html页面的结构
    # head :在网页部分不显示的
        # meta 编码 渲染需要的引擎 搜索关键字 显示的简介
        # title 网页的标签栏的显示
    # body
        # 空白折叠 对换行符和空格都不敏感
            # <br>  &nbsp;
        # 块级标签(h1) 内联标签(span)
        # 内联标签
            # br  span
            # <img src="timg.jpg" alt="荷官图片">
                # src 可以使用本地的路径,也可以使用网络地址
                # alt 在图片加载失败的时候显示概要信息
                # height="400px"  图片的高
                # width="481px"   图片的宽
                # align
            # <a href="http://www.baidu.com" title="baidu知道" target="_blank">百度一下</a>
                # href 就是链接的地址
                # title 是鼠标悬浮的时候显示提示内容
                # target  _blank表示在新的页面打开,_self默认的,表示在当前页面打开
                # 锚链接 在整个页面上埋下一个锚点,在点击a标签的时候可以跳转到页面的锚点中去
                    # <a href="#top" title="back">回到顶部</a>
                    # 在整个页面中必须有一个叫做top的id对应的标签
        # 块级标签
            # 标题标签 h1-h6
            # 列表
                # ul标签 无序的列表  type(disc 默认实心圆,square 实心方,circle 空心圆,none无符号)
                #           <ul type="disc">
                #             <li>立立</li>
                #             <li>松松</li>
                #             <li>老王</li>
                #             <li>查查</li>
                #         </ul>

                # ol标签 有序列表 type(1 A a i I) start表示开始的位置
                #         <ol start='2'>
                #             <li>立立</li>
                #             <li>松松</li>
                #             <li>老王</li>
                #             <li>查查</li>
                #         </ol>

                # dl标签 定义列表
'''
                        <dl>
                            <dt>姓名</dt>
                            <dd>alex</dd>
                            <dd>wusir</dd>
                            <dd>小强</dd>
                            <dt>性别</dt>
                            <dd>不详</dd>
                            <dd>女</dd>
                            <dd>男</dd>
                        </dl>
'''
            # 表格
                # <table border='1px' cellpadding='10px' cellspacing='5px'>
                    # <thead>
                        # <tr>
                            #<th>标题内容</th>
                            #<th>标题内容</th>
                            #<th>...</th>
                        #</tr>
                    # </thead>
                    # <tbody>
                        # <tr>  一个tr代表一行
                        #     <td colspan = 2>表格内容</td>
                        #     <td rowspan = 2>表格内容</td>
                        #     <td>...</td>
                        # </tr>
                    # </tbody>
                # </table>
           # div标签

Socket_server

import socket

sk = socket.socket()
sk.bind(('127.0.0.1',9000))
sk.listen()

conn,addr = sk.accept()
ret = conn.recv(1024)
conn.send(b'HTTP/1.1 200 OK \r\n\r\n')
conn.send(b'<h1>hello,world</h1>')
print(ret)
conn.close()
sk.close()

demo1

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>27期皇家赌场</title>
</head>
<body>
    <!--<div>你好</div> 容器标签-->
    <div>你好</div>
    <div>你好</div>
    <div>你好</div>
    <div>你好</div>
    <table border="1px" cellpadding="5px" cellspacing="10px">
        <thead>
            <tr>
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">alex</td>

            </tr>
            <tr>
                <td>wusir</td>
                <td rowspan="2">66666</td>
            </tr>
             <tr>
                <td>yuan</td>

            </tr>
        </tbody>
    </table>


    <dl>
        <dt>姓名</dt>
        <dd>alex</dd>
        <dd>wusir</dd>
        <dd>小强</dd>
        <dt>性别</dt>
        <dd>不详</dd>
        <dd>女</dd>
        <dd>男</dd>
    </dl>

    <ol type="i" start='1'>
        <li>立立</li>
        <li>松松</li>
        <li>老王</li>
        <li>查查</li>
    </ol>
    <ul type="disc">
        <li>编外人员</li>
        <ul>
                <li>张三</li>
                <li>李四</li>
                <li>王五</li>
            </ul>
        <li>松松</li>
        <li>老王</li>
        <li>查查</li>
    </ul>

    <h1 >27期皇家赌场正式开业</h1>
    <h2 id="top">性感荷官在线发牌</h2>
    <h3>性感荷官在线发牌</h3>
    <h4>性感荷官在线发牌</h4>
    <h5>性感荷官在线发牌</h5>
    <h6>性感荷官在线发牌</h6>
    <h1>性感荷官在线发牌</h1>
    <h1>性感荷官在线发牌</h1>
    <img src="timg.jpg" alt="荷官图片">
    <a href="http://www.sina.com" title="baidu知道" target="_blank">百度一下</a>
    <a href="#top" title="back">回到顶部</a>
    <!--<span>立&nbsp;&nbsp;&nbsp;&nbsp;立</span>-->
    <del>松松</del>
    <span>老王</span>


</body>
</html>

demo2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:9000">
    <!--用户名 : <input type="text" name="username" placeholder="请输入手机号或邮箱进行登录">-->
    <div>
        <label for="user">用户名 :</label>
         <input id="user" type="text" name = 'username' value = 'alex'></div>
    <div> 密  码 : <input type="password" name = 'passwd'  readonly></div>
    <div>性别 :
        <input type="radio" name = 'sex' value="m" checked> 男
        <input type="radio" name = 'sex' value="f"> 女
    </div>
    <div>
        <input type="checkbox" name = 'hobby' value="1" checked disabled> 抽烟
        <input type="checkbox" name = 'hobby' value="2"> 喝酒
        <input type="checkbox" name = 'hobby' value="3"> 烫头
    </div>
    <input type="submit">
    <input type="button" value="按钮">
    <input type="reset">
    <input type="hidden">
    <input type="file">z
    <input type="date">
    <button>submit按钮</button>
    <textarea name="content" cols="30" rows="10"></textarea>

    <select name="" size="3" multiple>
        <option value="">北京</option>
        <option value="" selected>上海</option>
        <option value="">天津</option>
        <option value="">广州</option>
    </select>
</form>

<button>普通按钮</button>
</body>
</html>

html模板

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

CSS

# css语言
    # 专门配合着html标签使用的
    # 能够给丑陋的标签加上适当的美观样式

# 引入css样式的方式
    # 行内引入 尽量避免使用
        # <span style="color: green;background-color: red;">你好,世界</span>
    # style标签引入
        # <style>
        #     span{
        #         color: green;
        #         background-color: red;
        #     }
        # </style>
    # link引入外部的css文件  推荐使用的
        # <link rel="stylesheet" href="demo1.css">
        # demo1.css
            # span{
            #      color: green;
            #      background-color: red;
            #  }
    # 样式引入的优先级 行内样式优先，link和style的样式谁写在后面谁优先生效

# 基础样式
    # span{
    #     color: pink;       设置字体颜色
    #     background-color: blue;
    #     width: 300px;     不生效（行内元素）
    #     height: 200px;    不生效（行内元素）
    # }
    # div{
    #     background-color: #ffe0ff;  设置背景色
    #     width: 400px;      设置宽度
    #     height: 200px;     设置高度
    # }

# html中的颜色 ：rgb表示  red  green blue 光谱三原色
    # 单词表示 ： red green blue yellow pink purple
    # 十六进制表示法 : #FFFFA3  #FFDDAA -简写->#FDA
    # rgb表示法 : rgb(255,255,163)
    # rgba表示法 : rgba(0,0,0,0.5)  表示透明度

# 选择器 用来从body的大量标签中筛选出我想改变样式的标签
    # 标签选择器 span div p input a li ul
    # 类选择器 class='类名'  .类名
    # id选择器 id = '唯一标识'  #id名    id在全网页不能重复
    # 优先级 : 行内1000 > id100 > class类10 > 标签1 > 继承0

# 高级的选择器
    # 后代选择器 div p  表示div中的所有p标签都被选择
    # 子代选择器 div>span  表示div子代中的所有span标签都被选择
    # 毗邻选择器 p+span 只找p标签后面一个span标签
    # 弟弟选择器 p~span 找到p之后的所有span
    # 并集选择器 ul,ol,p 找到这三个标签,给他们设置统一的样式
    # 交集选择器 div.div2 表示类名必须是div2的div标签才能使用这个样式
    # 属性选择器
'''
         a[title]{
            color: lightgreen;
        }
        a[href='http://www.jd.com']{
            color: lightblue;
        }
'''
    # 伪类选择器 html4
        # a:link a标签没有被访问的时候   a:visited a标签被访问的时候   a:active 鼠标按下a的时候
        # input:focus input获取到鼠标的焦点时
        # :hover 鼠标悬浮时
    # 伪元素选择器
        # after
        # first letter
        # before

# 更多样式
    # 字体样式
        # font-family
        # font-weight :字体粗细
        # font-size :控制字体大小
    # 文本样式
        #.title{
        #     text-align: center;   /*控制文本水平居中*/
        #     text-decoration: line-through; /*underline overline*/
        #     /*text-indent: 2em;     !*缩进*!*/
        #     line-height: 100px;    /*控制文本在line-height的高度上垂直就居中*/
        #     height: 100px;
        #     background-color: lightgoldenrodyellow;
        # }
    # 背景图片
        # 背景图片
        # div{
#             height: 500px;
#             background-color:lightgoldenrodyellow;
#             background-image: url('p0.jpg');
#             background-repeat: no-repeat;
#             /*background-repeat: repeat-x;*/
#             /*background-repeat: repeat-y;*/
#             background-position: right bottom ;   /* right/left/center  top/center/bottom*/
#             background-size: 400px;
#         }

    # 边框 border
'''
        div{
            height: 300px;
            width: 200px;
            background-color:lightgoldenrodyellow;
            /*border: solid red 10px;*/
            /*border-style: solid;*/
            /*border-style: dashed;*/
            /*border-style: dotted;*/
            /*border-style: double;*/
            /*border-color: palevioletred blue yellow gray;*/
            /*border-width: 10px 5px 20px 30px;*/
            border-top:solid blue 5px;
            border-left:solid gray 5px;
            border-right:solid gray 5px;
            border-bottom:solid gray 5px;
            }
'''

    # 圆角 border_radius
        # border-radius: 50%; 调整圆角
        # border-radius: 40px; 调整圆角

    # 块 行内块和 内联的互相转换
        # 很少把块或者行内块 转换成内联
        # 内联转块/行内块
        # display : inline/inline-block/block
'''
       a{
            background-color: rgb(51,51,51);
            color: lightgoldenrodyellow;
            height: 38px;
            width: 80px;
            display: inline-block;
            /*display: block;*/
            line-height: 38px;
            text-align: center;
            text-decoration: none;
        }
        li{
            display: inline-block;
        }
'''
    # 盒模型
        # width height 表示内容部分的宽\高
        # padding  表示内边距部分的宽度
        # border 表示边框的宽度
        # width +2*padding+2border = 盒子的整体宽度
        # height +2*padding+2border = 盒子的整体高度
        # margin 表示盒子的外边距
            # 上下盒子之间设置会发生塌陷
            # 父子盒子之间设置也会发生塌陷
    # 浮动
        # 脱离标准文档流 脱标
        # 浮动到独立的位置上
        # float:left/right
        # 清除浮动,避免父元素缩水
            # clear:both
            # 伪元素清除发 自定义cleardix类
    # 定位
        # 相对定位(relative) : 移动但还是占有原来的位置 相对于自己原来的位置进行移动
        # 绝对定位(absolute) : 相对于上一级设置了position的元素移动,如果上一级没有设置,会相对于整个页面移动
        # 固定定位(fixed): 相对于整个浏览器窗口固定在一个位置上,不随着滚动条的移动发生位置变化
    # z-index
    # opacity
        # 标签的背景和内容整体变透明
        # rgba 是背景颜色变透明

demo1

 span{
            color: green;
            background-color: red;
}

Demo1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*.title{*/
            /*color: pink;*/
            /*background-color: blue;*/
            /*width: 300px;*/
            /*height: 200px;*/
        /*}*/

        *{
            color: gray;
        }

        /*#w1{*/
            /*color: aquamarine;*/
        /*}*/

        div{
            /*background-color: rgb(255,255,163);*/
            /*background-color: #000000;*/
            color:red;
            /*background-color: rgba(0,0,0,0.5);*/
            /*width: 400px;*/
            /*height: 200px;*/
        }
    </style>

</head>
<body>
    <div>
        我是一个div
        <p>你是一个p</p>
    </div>
    <!--<span id="w1">你好,世界</span>-->
    <!--<span class="title">你好,世界</span>-->
    <!--<span>你好,世界</span>-->
    <!--<span class="title">你好,世界</span>-->
    <!--<span>你好,世界</span>-->
    <!--<span>你好,世界</span>-->
    <!--<span>你好,世界</span>-->
    <!--<div>你好,世界</div>-->
</body>
</html>

Demo2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*.title{*/
            /*color: pink;*/
            /*background-color: blue;*/
            /*width: 300px;*/
            /*height: 200px;*/
        /*}*/

        *{
            color: gray;
        }

        /*#w1{*/
            /*color: aquamarine;*/
        /*}*/

        div{
            /*background-color: rgb(255,255,163);*/
            /*background-color: #000000;*/
            color:red;
            /*background-color: rgba(0,0,0,0.5);*/
            /*width: 400px;*/
            /*height: 200px;*/
        }
    </style>

</head>
<body>
    <div>
        我是一个div
        <p>你是一个p</p>
    </div>
    <!--<span id="w1">你好,世界</span>-->
    <!--<span class="title">你好,世界</span>-->
    <!--<span>你好,世界</span>-->
    <!--<span class="title">你好,世界</span>-->
    <!--<span>你好,世界</span>-->
    <!--<span>你好,世界</span>-->
    <!--<span>你好,世界</span>-->
    <!--<div>你好,世界</div>-->
</body>
</html>

Demo3-高级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div{*/
            /*background-color: lightcoral;*/
        /*}*/

        /*div.div2.d2{*/
            /*background-color: lightblue;*/
        /*}*/
        /*div p{*/
            /*color: pink;*/
            /*background-color: yellow;*/
        /*}*/
        /*div span{*/
            /*color:red*/
        /*}*/
        /*div>span{*/
            /*color : green*/
        /*}*/
        /*p+span{*/
            /*color:darkmagenta;*/
        /*}*/
        /*p~span{*/
            /*color: #54a4d7;*/
        /*}*/
    /*ul,ol,p{*/
        /*margin: 0;   !*外边距*!*/
    /*}*/
        a[title]{
            color: lightgreen;
        }
        a[href='http://www.jd.com']{
            color: lightblue;
        }
    </style>
</head>
<body>
<div>
    <h1>属性选择器</h1>
    <a href="http://www.baidu.com" title="baidu">baidu</a>
    <a href="http://www.jd.com">jd</a>
</div>



<div>第一个div</div>
<div class="div2 d2">第二个div</div>
<div class ='div2'>

    <ul>
        <li>第一项</li>
        <li>第二项</li>
    </ul>


    <span>p之前的span</span>
    <p>
        <span>我是 div p span标签</span>
    </p>
    <span>div中的span</span>
    <span>div中的span</span>
    <span>div中的span</span>
    <span>div中的span</span>
    <span>div中的span</span>
    <p>这是一个div中的p</p>
    <p>这是一个div中的p</p>
    <p>这是一个div中的p</p>
    <p>这是一个div中的p</p>
    <p>这是一个div中的p</p>
    <p>这是一个div中的p</p>
</div>
<span>div后面的span</span>
<p>是一个独立的p</p>
</body>
</html>

Demo3-伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color: greenyellow;
        }
        a:visited{
            color: red;
        }
        a:active{
            color: pink;
        }
        input:focus{
            background-color: tomato;
        }
        div{
            background-color: yellow;
            width: 100px;
            height: 100px;
        }
        div:hover{
            background-color: lightblue;
            width: 110px;
            height: 110px;
        }
    </style>
</head>
<body>
<a href="http://www.sogou.com">sogou</a>
<input type="text">
<div></div>

</body>
</html>

Demo5-伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            font-size: 48px;
        }
        /**{*/
            /*font-family : "Microsoft Yahei","微软雅黑", "Arial", "sans-serif";*/
            /*font-weight : 100;*/
            /*font-size:100px*/
        /*}*/
        /*p:first-letter{*/
            /*color: tomato;*/
        /*}*/
        /*p:before{*/
            /*content: '***';*/
            /*color: lightblue;*/
        /*}*/
        /*p:after{*/
            /*content: '***';*/
            /*color: red !important;*/
        /*}*/
        span{
            font-size: 1.5em;
        }
        .title{
            text-align: center;   /*控制文本水平居中*/
            text-decoration: line-through;
            /*text-indent: 2em;     !*缩进*!*/
            height: 100px;
            line-height: 100px;    /*控制文本在line-height的高度上垂直就这样红*/
            background-color: lightgoldenrodyellow;
        }
        div{
            height: 200px;
            width: 200px;
            background-color:darkorchid;
            border-radius: 50%;
            /*border: solid red 10px;*/
            /*border-style: solid;*/
            /*border-style: dashed;*/
            /*border-style: dotted;*/
            /*border-style: double;*/
            /*border-color: palevioletred blue yellow gray;*/
            /*border-width: 10px 5px 20px 30px;*/
            /*border-top:solid blue 5px;*/
            /*border-left:solid gray 5px;*/
            /*border-right:solid gray 5px;*/
            /*border-bottom:solid gray 5px;*/


            /*background-image: url('p0.jpg');*/
            /*background-repeat: no-repeat;*/
            /*background-repeat: repeat-x;*/
            /*background-repeat: repeat-y;*/
            /*background-position: right bottom ;   !* right/left/center  top/center/bottom*!*/
            /*background-size: 400px;*/
        }

    </style>
</head>
<body>
<p><span>h</span>ello,world</p>
<p class="title">27期洗脚城</p>
<div>

</div>
</body>
</html>

Demo6-块行内块的转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            background-color: rgb(51,51,51);
            color: lightgoldenrodyellow;
            height: 38px;
            width: 80px;
            display: inline-block;
            /*display: block;*/
            line-height: 38px;
            text-align: center;
            text-decoration: none;
        }
        li{
            display: inline-block;
        }
    </style>
</head>
<body>
<!--<a href="http://www.baidu.com">baidu</a>-->
<!--<a href="http://www.sogou.com">sogou</a>-->
<ul type="none">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>
</body>
</html>

Demo7-盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 150px;
            background-color: lightgoldenrodyellow;
            /*padding: 10px;*/
            /*padding-left: 10px;*/
            padding-top: 50px;
            /*padding-right: 10px;*/
            /*padding-bottom: 20px;*/
        }
        .d1{
            margin-bottom: 100px;
        }
        .d2{
            margin-top: 200px;
        }
        .d3{
            padding-top: 0px;
            width: 100px;
            height: 100px;
            background-color: red;
            /*margin-top: 50px;*/
            /*margin-left: 50px;*/
        }


    </style>
</head>
<body>
<div class="d1">
    <!--这是我要写的内容blablabla-->
    <div class='d3'>
        内部div
    </div>
</div>

<div class="d2">
    这是第二个div
</div>
</body>
</html>

Demo8-浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .foo{
            background-color:yellow;
        }
        .c1{
            width: 100px;
            height: 100px;
            background-color: palevioletred;
            float: right;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
        .c3{
            clear: both;
        }
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<!--<div class="foo">-->
    <!--<div class="c1"></div>-->
    <!--<div class="c2"></div>-->
    <!--<div class="c3"></div>-->
<!--</div>-->
<div class="foo clearfix">
    <div class="c1"></div>
    <div class="c2"></div>
</div>
</body>
</html>

Demo9-定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 100px;
        }
        div{
            width: 100px;
            height: 100px;
        }
        .c1{
            background-color: lightcyan;
        }
        .c2{
            background-color: yellow;
            position: fixed;
            top: 100px;
            left: 50px;
            z-index: 0;
            /*bottom: 100px;*/
            /*right: 100px;*/
        }
        .c3{
            background-color: yellowgreen;
            z-index: 1000;
            position: relative;
            color: black;
            opacity: 0.5;
        }
        .foo{
            width: 800px;
            height: 1500px;
            /*background-color: yellow;*/

            position: absolute;
            top: 500px;

        }
    </style>
</head>
<body>
<div class="foo">
<div class="c1"></div>
<div  class="c2"></div>
<div  class="c3">你好你好你好</div>
    </div>
</body>
</html>