index.html

{% extends "base.html" %}
{% block content %}

<div class="container pt-5">
    <h3 class="text-success">普通爬虫</h3>
    <hr>
    <div class="row align-items-stretch">
        <div class="col mt-2">
            <div class="card  border-info rounded-5 shadow-sm" style="min-height:268px;min-width:300px;">
                <div class="card-header text-center">
                    <h4 class="card-title">单页爬虫</h4>
                </div>
                <div class="card-body">
                    <p class="card-text">目标数据呈现在单一页面中，使用最简单的爬虫库可以直接采集，一般用正则表达式即可完成数据提取。</p>
                    <p class="card-text text-left">难度：⭐</p>
                    <p class="card-text">
                        案例：
                        <a href="/general/news" class="card-link text-success">新闻页</a>
                        <a href="/general/imgs" class="card-link text-success">图片清单</a>
                        <a href="/general/table" class="card-link text-success">表格</a>
                    </p>
                </div>
                <div class="card-footer text-end">

                    <a href="#" class="btn btn-primary card-link ">学习博客</a>

                </div>
            </div>
        </div>
        <div class="col mt-2">
            <div class="card border-info rounded-5 shadow-sm" style="min-height:268px;min-width:300px;">
                <div class="card-header text-center">
                    <h4 class="card-title">分页爬虫</h4>
                    <div class="bg-danger text-white rounded p-1"
                         style="transform: rotate(20deg); position:absolute;right:0;top:0.5rem;">最新更新
                    </div>
                </div>
                <div class="card-body">
                    <p class="card-text">本案例是由 2760 条数据组成的分页爬虫，数据为国内学校清单，主要用于练习分页数据采集。</p>
                    <p class="card-text text-left">难度：⭐</p>
                    <p class="card-text">
                        案例：
                        <a href="/ss/list" class="card-link text-success">学校分页数据</a>
                    </p>
                </div>
                <div class="card-footer text-end">
                    <a href="#" class="btn btn-primary card-link ">学习博客</a>
                </div>
            </div>
        </div>
        <div class="col mt-2">
            <div class="card border-info rounded-5 shadow-sm" style="min-height:268px;min-width:300px;">
                <div class="card-header text-center">
                    <h4 class="card-title">二进制文件采集</h4>
                    <div class="bg-danger text-white rounded p-1"
                         style="transform: rotate(20deg); position:absolute;right:0;top:0.5rem;">最新更新
                    </div>
                </div>
                <div class="card-body">
                    <p class="card-text">本案例用于大家学习文件和视频文件内容采集，重点掌握 M3U8 格式视频下载，掌握二进制内容保存。</p>
                    <p class="card-text text-left">难度：⭐</p>
                    <p class="card-text">
                        案例：
                        <a href="/file/c" class="card-link text-success">普通</a>
                        <a href="/file/mp4" class="card-link text-success">MP4文件</a>
                        <a href="/file/m3u8" class="card-link text-success">M3U8文件</a>
                    </p>
                </div>
                <div class="card-footer text-end">
                    <a href="#" class="btn btn-primary card-link ">学习博客</a>
                </div>
            </div>
        </div>
        <div class="col mt-2">
            <div class="card  border-secondary rounded-5 shadow-sm" style="min-height:268px;min-width:300px;">
                <div class="card-header text-center">
                    <h4 class="card-title">单页爬虫</h4>
                </div>
                <div class="card-body">
                    <p class="card-text">目标数据呈现在单一页面中，使用最简单的爬虫库可以直接采集，一般用正则表达式即可完成数据提取。</p>
                    <p class="card-text text-left">难度：⭐</p>
                    <p class="card-text">
                        案例：
                        <a href="/general/news" class="card-link text-success">新闻页</a>
                        <a href="/general/imgs" class="card-link text-success">图片清单</a>
                        <a href="/general/table" class="card-link text-success">表格</a>
                    </p>
                </div>
                <div class="card-footer text-end">

                    <a href="#" class="btn btn-primary card-link ">学习博客</a>

                </div>
            </div>
        </div>
    </div>

</div>
<div class="container pt-5">
    <h3>普通爬虫</h3>
    <hr>
    <div class="row align-items-stretch">
        <div class="col-sm-6 col-md-3 mt-2">
            <div class="card text-center border-secondary rounded-5 shadow-sm" style="height:268px;">
                <div class="card-header">
                    <h4 class="card-title">单页爬虫</h4>
                </div>
                <div class="card-body">
                    <p class="card-text">单独一个网页数据展示，可直接采集，单独一个网页数据展示，可直接采集</p>

                </div>
                <div class="card-footer">
                    <a href="#" class="card-link">学习博客</a>
                    <a href="#" class="card-link">案例详情</a>

                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3 mt-2">
            <div class="card text-center border-secondary rounded-5 shadow-sm" style="height:268px;">
                <div class="card-header">
                    <h4 class="card-title">单页爬虫</h4>
                </div>
                <div class="card-body">
                    <p class="card-text">单独一个网页数据展示，可直接采集，单独一个网页数据展示，可直接采集</p>

                </div>
                <div class="card-footer">
                    <a href="#" class="card-link">学习博客</a>
                    <a href="#" class="card-link">案例详情</a>

                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3 mt-2">
            <div class="card text-center border-secondary rounded-5 shadow-sm" style="height:268px;">
                <div class="card-header">
                    <h4 class="card-title">单页爬虫</h4>
                </div>
                <div class="card-body">
                    <p class="card-text">单独一个网页数据展示，可直接采集，单独一个网页数据展示，可直接采集</p>

                </div>
                <div class="card-footer">
                    <a href="#" class="card-link">学习博客</a>
                    <a href="#" class="card-link">案例详情</a>

                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3 mt-2">
            <div class="card text-center border-secondary rounded-5 shadow-sm" style="height:268px;">
                <div class="card-header">
                    <h4 class="card-title">单页爬虫</h4>
                </div>
                <div class="card-body">
                    <p class="card-text">单独一个网页数据展示，可直接采集，单独一个网页数据展示，可直接采集</p>

                </div>
                <div class="card-footer">
                    <a href="#" class="card-link">学习博客</a>
                    <a href="#" class="card-link">案例详情</a>

                </div>
            </div>
        </div>
    </div>
    <div class="row align-items-stretch">

        <div class="col-sm-6 col-md-3 mt-2">
            <div class="card text-center border-secondary rounded-5 shadow-sm" style="height:268px;">
                <div class="card-header">
                    <h4 class="card-title">单页爬虫</h4>
                </div>
                <div class="card-body">
                    <p class="card-text">单独一个网页数据展示，可直接采集，单独一个网页数据展示，可直接采集</p>

                </div>
                <div class="card-footer">
                    <a href="#" class="card-link">学习博客</a>
                    <a href="#" class="card-link">案例详情</a>

                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3 mt-2">

            <div class="card text-center border-secondary rounded-5 shadow-sm" style="height:268px;">
                <div class="card-header">
                    <h4 class="card-title">单页爬虫</h4>
                </div>
                <div class="card-body">
                    <p class="card-text">单独一个网页数据展示，可直接采集，单独一个网页数据展示，可直接采集</p>

                </div>
                <div class="card-footer">
                    <a href="#" class="card-link">学习博客</a>
                    <a href="#" class="card-link">案例详情</a>

                </div>
            </div>

        </div>
        <div class="col-sm-6 col-md-3 mt-2">

            <div class="card text-center border-secondary rounded-5 shadow-sm" style="height:268px;">
                <div class="card-header">
                    <h4 class="card-title">单页爬虫</h4>
                </div>
                <div class="card-body">
                    <p class="card-text">单独一个网页数据展示，可直接采集，单独一个网页数据展示，可直接采集</p>

                </div>
                <div class="card-footer">
                    <a href="#" class="card-link">学习博客</a>
                    <a href="#" class="card-link">案例详情</a>

                </div>
            </div>

        </div>
    </div>
</div>

{% endblock %}