jq文档操作，bs引入

属性操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>属性操作</title>
</head>
<body>
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2808976292,2978436552&fm=26&gp=0.jpg" alt="">
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    let new_src = 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1751982463,1459940288&fm=26&gp=0.jpg'
    $('img').click(function () {
        // js
        // this.getAttribute() | this.setAttribute()
        // console.log(this.getAttribute('src'));  // 获取属性值
        // this.setAttribute('src', new_src);  // 设置属性值

        // jq
        // $(this).attr()
        // console.log($(this).attr('src'));  // 获取属性值
        $(this).attr('src', new_src);  // 设置属性值
    })
</script>
</html>

attr()和css()的区别

attr是操作元素的属性，比如img的src属性，a的href属性，input的title属性都可以修改
css是操作元素的style属性，其他的不行

jq的链式操作(灵魂)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq的链式操作</title>
</head>
<body>
    <h1>jq的链式操作</h1>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // jq函数的执行结果如果不是明确的 内容 | 子标签 | 属性值 ...，均返回的是对象本身
    $('h1').css('color', 'orange').click(function () {
        alert(1)
    }).attr('title', '呵呵').css({'background': 'pink'})

</script>
</html>

jq创建文档

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq创建文档</title>
    <style>
        .box {
             200px;
            height: 200px;
            background-color: orange;
            float: left;
        }
    </style>
</head>
<body>
    <h1>生成一个box</h1>
    <!--<div class="box"></div>-->
    <!--<div class="box"></div>-->
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    let randomNum = (min, max) => {
        return parseInt(Math.random() * (max - min + 1) + min)
    };

    let getRandomColor = () => {
        r = randomNum(0, 255);
        g = randomNum(0, 255);
        b = randomNum(0, 255);
        return 'rgba(' + r + ', ' + g + ', ' + b + ')';
    };

    $('h1').click(function () {
        // 点击一下，生成一个box

        // 1）创建一个标签节点
        let box = $('<div class="box"></div>');

        // 2）设置标签节点（样式、内容、事件）
        box.css('background', getRandomColor()).click(function () {
            console.log($(this).css('background-color'))
        });

        // 3）将标签节点添加到页面指定位置
        $('body').append(box);
    })
</script>
</html>

jq的文档操作

alert：弹出确认框
jqueryAPI

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文档操作</title>
</head>
<body>
    <b class="b1">加粗</b>
    <p class="p1">
        <span>原内容</span>
    </p>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 父在最后加子
    // 这里用的是已有的jq对象，所以是把.b1移动到.p1中去
    $('.p1').append($('.b1'));
    // 父在最前加子
    // $('.p1').prepend($('.b1'));

    // 产生一个副本(本体就不参与操作)，添加到父的最前
    // $('.b1').clone().prependTo($('.p1'));

    // 在后面添加兄弟
    // $('.p1').after($('.b1'));
    // 在前面添加兄弟
    // $('.p1').before($('.b1'));

    $('.b1').click(function () {
        alert(1)
    });
    // 清空内部内容与子标签
    // $('.p1').empty();

    // 不保留事件等的删除自身
    // let $b1 = $('.b1').remove();
    // 保留事件等的删除自身
    let $b1 = $('.b1').detach();
    $('.p1').append($b1);

</script>
</html>

jq文档关系

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq的文档关系</title>
</head>
<body>
    <div class="wrap">
        <p class="p0">0</p>
        <p class="p1">1</p>
        <p class="t">
            <a href="">2</a>
            <a href="">2</a>
        </p>
        <p class="p3">3</p>
        <p class="p4">4</p>
    </div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 1）从一个含有多个js对象的jq对象中取出只装有一个js对象的jq对象
    // $('p')中有三个p，只想拿第2个p，使用eq方法
    // console.log($('p'));
    // console.log($('p').eq(1));
    // console.log($($('p')[1]));
    // console.log($('p.t'));

    let $p = $('p.t');
    // 匹配的元素的子元素集合
    console.log($p.children());
    // 匹配一个父级元素
    console.log($p.parent());
    // 匹配所有父级元素
    console.log($p.parents());
    // 匹配下一个兄弟
    console.log($p.next());
    // 匹配下面的所有兄弟
    console.log($p.nextAll());
    // 匹配上一个兄弟
    console.log($p.prev());
    // 匹配上面的所有兄弟
    console.log($p.prevAll());
    // 匹配所有的兄弟
    console.log($p.siblings());
</script>
</html>

jq轮播图案例：包含定时器知识点

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>布局案例</title>
    <link rel="stylesheet" href="css/reset.css">

    <style>
        .scroll-view {
             1226px;
            height: 460px;
            background-color: orange;
            margin: 50px auto 0;

            position: relative;
        }

        .scroll-menu {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.5);
             234px;
            padding: 20px 0;
        }
        .scroll-menu a {
            display: block;
            /*height: 42px;*/
            line-height: 42px;
            color: white;
            /*padding-left: 30px;*/
            text-indent: 30px;
        }
        .scroll-menu a span {
            /*参考的不是a，是ul*/
            position: absolute;
            right: 20px;
        }
        .scroll-menu a:hover {
            background-color: red;
        }

        .scroll-menu-blank {
             calc(1226px - 234px);
            height: 460px;
            background-color: red;
            /*参考的是ul*/
            position: absolute;
            top: 0;
            left: 234px;
            display: none;
        }

        .scroll-menu li:hover ~ .scroll-menu-blank {
            display: block;
        }
        .scroll-menu-blank:hover {
            display: block;
        }
    </style>

    <style>
        .scroll-view {
             1226px;
            position: relative;
        }
        .scroll-scroll {
             1226px;
            height: 460px;
            position: absolute;
        }
        .scroll-img li {
            position: absolute;
        }
        .scroll-img a {
            display: block;
        }
        .scroll-img a img {
             100%;
        }
    </style>
    <style>
        .scroll-btn div {
            position: absolute;
             40px;
            height: 70px;
            font-size: 30px;
            line-height: 70px;
            text-align: center;
            color: rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }
        .scroll-btn div:hover {
            background-color: rgba(0, 0, 0, 0.4);
            color: white;
        }
        .scroll-btn-left {
            top: calc(50% - 35px);
            left: 234px;
        }
        .scroll-btn-right {
            top: calc(50% - 35px);
            right: 0;
        }
    </style>
    <style>
        .scroll-point {
             120px;
            height: 40px;
            /*background-color: orangered;*/
            position: absolute;
            right: 10px;
            bottom: 0;
        }
        .scroll-point li {
            float: left;
             10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid rgba(0, 0, 0, 0.6);
            margin-right: 10px;
            cursor: pointer;
            background-color: rgba(0, 0, 0, 0.3);
        }
        .scroll-point li:hover {
            background-color: white;
        }
    </style>
    <style>
        .scroll-menu, .scroll-btn div, .scroll-point {
            z-index: 2;
        }
        .scroll-img li {
            opacity: 0;
            /*transition: .5s;*/
        }
        .scroll-img li.active {
            opacity: 1;
            z-index: 1;
        }
        .scroll-point li.active {
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="scroll-view">
        <!--轮播图-->
        <div class="scroll-scroll">
            <ul class="scroll-img">
                <li class="active">
                    <a href="https://www.baidu.com">
                        <img src="img/001.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/002.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/003.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/004.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/005.png" alt="">
                    </a>
                </li>
            </ul>
            <div class="scroll-btn">
                <div class="scroll-btn-left">&lt;</div>
                <div class="scroll-btn-right">&gt;</div>
            </div>
            <ul class="scroll-point">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <!--菜单栏-->
        <ul class="scroll-menu">
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <div class="scroll-menu-blank">

            </div>
        </ul>
    </div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    let currentIndex = 0;

    // 上一张
    $('.scroll-btn-left').click(function () {
        console.log('上一张');
        currentIndex--;
        if (currentIndex < 0) currentIndex = 4;
        $('.scroll-point li').eq(currentIndex).addClass('active').siblings().removeClass('active');
        $('.scroll-img li').eq(currentIndex).addClass('active').siblings().removeClass('active');

    });

    // 下一张
    $('.scroll-btn-right').click(function () {
        console.log('下一张');
        currentIndex++;
        if (currentIndex >= 5) currentIndex = 0;
        $('.scroll-point li').eq(currentIndex).addClass('active').siblings().removeClass('active');
        $('.scroll-img li').eq(currentIndex).addClass('active').siblings().removeClass('active');
    });

    // 第几张
    $('.scroll-point li').click(function () {
        index = $(this).index();
        console.log('第%d张', index);
        currentIndex = index;
        $(this).addClass('active').siblings().removeClass('active');
        $('.scroll-img li').eq(index).addClass('active').siblings().removeClass('active');
    })

</script>
<script>
    // console.log(currentIndex);
    // 一次性定时器：setTimeout(fn, 时间)
    /*
    setTimeout(function () {
        currentIndex++;
        if (currentIndex >= 5) currentIndex = 0;
        $('.scroll-point li').eq(currentIndex).addClass('active').siblings().removeClass('active');
        $('.scroll-img li').eq(currentIndex).addClass('active').siblings().removeClass('active');
    }, 1000);
    */

    // 持续性定时器
    let timer = null;
    function startScroll() {
        timer = setInterval(function () {
            currentIndex++;
            if (currentIndex >= 5) currentIndex = 0;
            $('.scroll-point li').eq(currentIndex).addClass('active').siblings().removeClass('active');
            $('.scroll-img li').eq(currentIndex).addClass('active').siblings().removeClass('active');
        }, 3500);
    }

    startScroll();

    // 清除定时器
    // clearInterval(timer);
    // clearTimeout(timer);
    function stopScroll() {
        clearInterval(timer);
    }

    // 悬浮停止轮播
    $('.scroll-view').mouseover(function () {
        stopScroll();
    });

    // 移开重新轮播
    $('.scroll-view').mouseout(function () {
        startScroll();
    });

</script>
</html>

jq菜单切换

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .menu {
             1226px;
            margin: 0 auto;
        }
        .menu-title {
             100%;
            /*height: 40px;*/
            background-color: #ccc;
        }
        .menu-title:after {
            content: '';
            display: block;
            clear: both;
        }
        .menu-title .l {
            float: left;
        }
        .menu-title .r {
            float: right;
        }
        .menu-title .r li {
            float: left;
            margin-right: 20px;
            /*line-height: 40px;*/
            cursor: pointer;
            padding-top: 10px;
        }
        .menu-title .r li:hover, .menu-title .r li.active {
            color: orangered;
            border-bottom: 2px solid orangered;
        }

        .menu-context {
             100%;
            /*height: 220px;*/
            background-color: pink;
        }
        .menu-context:after {
            content: '';
            display: block;
            clear: both;
        }
        .menu-context li {
             50%;
            float: left;
            height: 220px;
            border-radius: 50%;
            background-color: cyan;
        }
        .menu-context li a {
            display: block;
            font: bold 60px/220px '微软雅黑';
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>
    <div class="menu">
        <ul class="menu-title">
            <li class="l">
                <h1>电子产品</h1>
            </li>
            <li class="r">
                <ul>
                    <li class="active">
                        <span>电视</span>
                    </li>
                    <li>
                        <span>手机</span>
                    </li>
                    <li>
                        <span>电脑</span>
                    </li>
                </ul>
            </li>
        </ul>
        <ul class="menu-context">
            <li>
                <a href="https://www.baidu.com">电视1</a>
            </li>
            <li>
                <a href="https://www.baidu.com">电视2</a>
            </li> 
        </ul>
    </div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    data = [
        [
            {
                ctx: '电视1',
                url: 'https://www.baidu.com'
            },
            {
                ctx: '电视2',
                url: 'https://www.baidu.com'
            },
        ],
        [
            {
                ctx: '手机1',
                url: 'https://www.sina.com.cn'
            },
            {
                ctx: '手机2',
                url: 'https://www.sina.com.cn'
            },
        ],
        []
    ];


    $('.menu-title .r li').mouseover(function () {
        $(this).addClass('active').siblings().removeClass('active');
        let index = $(this).index();
        let ul_data = data[index];
        let as = $('.menu-context li a');
        // console.log(ul_data);
        // console.log(as)
        // a个数与数据中字典的个数一致，依次赋值
        for (let i = 0; i < ul_data.length; i++) {
            as.eq(i).attr('href', ul_data[i].url).text(ul_data[i].ctx);
        }
    })
</script>
</html>

socket简易后台

所有的服务器，底层的核心代码都是这些

import socket
server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server.bind(('127.0.0.1', 8080))
print('浏览器访问：http://127.0.0.1:8080')
server.listen(5)

while True:
    conn, client_addr = server.accept()
    data = conn.recv(1024)
    # 响应一定要满足http协议,响应头
    conn.send(bytes('HTTP1.1 200 OK

', encoding='utf-8'))
    conn.send(bytes('hello world', encoding='utf-8'))

flask后台

为什么我的8801只能进根目录，进不去login和data

# pip3 install flask
# pip3 install Flask-Cors

from flask import Flask, request
from flask_cors import CORS
import json

# 声明服务
server = Flask(__name__)
# 解决ajax跨域无法拿到数据，没有提示，去源码中拿bool上面的内容
CORS(server, supports_credentials=True)

# 处理请求与响应的函数
@server.route('/')
def home():
    return '<h1>Home Page</h1>'

@server.route('/login')
def login():
    return '<h1>Login Page</h1>'

@server.route('/data')
def data():
    print(request.args)
    print(request.args.get('username'))
    print(request.args.get('password'))

    res_data = {
        'status': 0,
        'msg': 'request success',
        'data': {
            'name': 'Owen',
            'age': 18
        }
    }
    return json.dumps(res_data)

# 启动服务器
if __name__ == '__main__':
    server.run(host='localhost', port=8801)

jq的ajax请求

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ajax</title>
</head>
<body>
    <h1>ajax请求</h1>
    <input type="text" name="username" id="username">
    <input type="password" name="password" id="password">
    <button type="button" class="btn">发送请求</button>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $('.btn').click(function () {

        username = $('#username').val();
        password = $('#password').val();

        // 有输入框没内容，直接结束事件，不往后台发送请求
        // 在js中，if后面return也会终止整个块级代码

        if (!(username && password)) {
            return
        }

        // 代码如何往后台发送请求
        // ajax发送的数据，后台区分大小写，前台不区分
        $.ajax({
            // 请求的路径 - 接口
            // 在前台叫接口，在后台叫路由
            url: 'http://localhost:8801/data',
            // 请求的方式 - get|post
            type: 'get',
            // 请求的数据
            data: {
                username,
                password,
            },
            // 请求成功的响应
            // 只要返回了数据，就是success，即便你返回的是error
            success: function (response) {
                console.log(response, typeof response);
                // 相当于python中的json.loads()
                obj = JSON.parse(response);
                console.log(obj, typeof obj);
                let name = obj.data.name;
                $('h1').text(name)
            },
            // 请求失败的响应
            error: function (error) {
                console.log(error);
            }
        })

    })
</script>
</html>

bs引入

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bs的引入</title>
    <link rel="stylesheet" href="bs/css/bootstrap.css">
</head>
<body>
    <h1 class="bg-success">bs就是按照其规定的页面结构搭建标签</h1>
    <h2>给这些标签设置预定义好的类名，引入bs.css就可以直接获得提前写好的样式</h2>
    <h2>给这些标签设置预定义好的自定义属性，引入bs.js就可以直接获得提前写好的逻辑</h2>
    <h2>bs框架的js文件中采用的是jq语法，所以要使用bs.js要提前导入jq</h2>
    <h3>导入bs：本地导入 | CDN导入</h3>
    <div class="h1 bg-primary text-center">给.h1类名我就是h1样式</div>
    <div class="btn btn-primary btn-block">按钮</div>
</body>
</html>

bs运用

空填充：a标签的href中填javascript:viod(0)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bs运用</title>
    <link rel="stylesheet" href="bs/css/bootstrap.css">
    <style>
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        h1 {
            margin: 0;
            line-height: 60px;
        }

        .o-mn li {
             25%;
        }
        .o-i {
            font-size: 40px;
        }
    </style>
</head>
<body>
<h1 class="bg-primary text-center">bs运用</h1>
<h2>
    <!-- 用i标签，因为短 -->
    <i class="o-i glyphicon glyphicon-heart"></i>
    <div class="glyphicon glyphicon-envelope"></div>
</h2>
<div class="box">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="https://www.baidu.com">稻草人</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Owen</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">个人中心 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">信息</a></li>
                            <li><a href="#">修改密码</a></li>
                            <li><a href="#">详情页面</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">退出登录</a></li>
                        </ul>
                    </li>
                </ul>

                <form class="navbar-form navbar-right" action="https://www.baidu.com/s">
                    <div class="form-group">
                        <input name="wd" type="text" class="form-control" placeholder="搜索内容">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>

<div class="box">
    <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕</p>
        <p class="clearfix bg-primary"><a class="btn btn-primary btn-lg pull-right" href="#" role="button">Learn
            more</a></p>
    </div>
</div>

<ul class="o-mn clearfix">
    <li class="pull-left">
        <div class="thumbnail">
                    <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2633316981,1109819462&fm=26&gp=0.jpg" alt="">
                    <div class="caption">
                        <h3>美女</h3>
                        <p>美女海报</p>
                        <p>
                            <a href="javascript:viod(0)" class="btn btn-primary" role="button">购买</a>
                            <a class="btn btn-danger" href="javascript:viod(0)" role="button">打包</a>
                        </p>
                    </div>
                </div>
    </li>
    <li class="pull-left">
        <div class="thumbnail">
                    <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2633316981,1109819462&fm=26&gp=0.jpg" alt="">
                    <div class="caption">
                        <h3>美女</h3>
                        <p>美女海报</p>
                        <p>
                            <a href="javascript:viod(0)" class="btn btn-primary" role="button">购买</a>
                            <a class="btn btn-danger" href="javascript:viod(0)" role="button">打包</a>
                        </p>
                    </div>
                </div>
    </li>
    <li class="pull-left">
        <div class="thumbnail">
                    <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2633316981,1109819462&fm=26&gp=0.jpg" alt="">
                    <div class="caption">
                        <h3>美女</h3>
                        <p>美女海报</p>
                        <p>
                            <a href="javascript:viod(0)" class="btn btn-primary" role="button">购买</a>
                            <a class="btn btn-danger" href="javascript:viod(0)" role="button">打包</a>
                        </p>
                    </div>
                </div>
    </li>
    <li class="pull-left">
        <div class="thumbnail">
                    <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2633316981,1109819462&fm=26&gp=0.jpg" alt="">
                    <div class="caption">
                        <h3>美女</h3>
                        <p>美女海报</p>
                        <p>
                            <a href="javascript:viod(0)" class="btn btn-primary" role="button">购买</a>
                            <a class="btn btn-danger" href="javascript:viod(0)" role="button">打包</a>
                        </p>
                    </div>
                </div>
    </li>
</ul>


<!--栅格化系统: 将所有标签等分为12等分-->
<style>
    /*.box {*/
        /* 1000px;*/
    /*}*/
    .b1, .b2, .b3, .b4 {
        height: 100px;
    }
    .b1 {
        background-color: orangered;
    }
    .b2 {
        background-color: red;
    }
    .b3 {
        background-color: tomato;
    }
    .b4 {
        background-color: pink;
    }
</style>
<div class="box">
    <div class="b1 col-md-3 col-sm-6"></div>
    <div class="b2 col-md-6 col-md-offset-3 col-sm-6"></div>
    <div class="b3 col-xs-1"></div>
    <div class="b4 col-xs-11"></div>
</div>

</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="bs/js/bootstrap.js"></script>
</html>

待学：

字符串格式化，占位符只能在console.log()中使用

更换图标

<link rel="shortcut icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" />

bootcdn

CSS的两种高级语言： Less Sass

承认别人的优秀

不要做损人不利己的事

人要对自己上心

mysql锁机制，行级锁，表级锁