master

分支 (1)

管理

管理

master

alipay-platform
/
learn.html

<!--
    支付宝社区里面的学习专区
 * @Author: 陈茂冬
 * @Date: 2021-08-09 20:45:06
 * @LastEditTime: 2021-08-17 08:30:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \支付宝\js\learn.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习专区</title>
    <!-- 外部引入：公共的    对应的学习专区 -->
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/learn.css">
    <link rel="stylesheet" href="font/css/font-awesome.css">
    <link rel="stylesheet" href="css/animate.css">
    <style>
        body {
            width: 1263.33px;
            padding: 0;
            margin: 0 auto;
            background-color: #f3f5f6;
        }

        .header {
            height: 60px;
            background-color: #151a29;
            padding: 180x 20px 20px 26px;
        }

        .logo {
            width: 60px;
            height: 22px;
            padding-top: 20px;
            padding-left: 20px;
            float: left;
        }

        .menu {
            float: left;
            box-sizing: border-box;
            font-size: 14px;
            float: left;
            margin-left: 60px;
            margin-top: 20px;
        }

        /* .community {
            color: #fff;
        } */
        .communication {
            color: #fff;
            margin-left: 50px;
        }

        .learn {
            color: #1890ff;
            margin-left: 50px;
        }

        .search {
            float: right;
            margin-top: 10px;
            margin-right: 20px;
        }

        .banner {
            width: 100%;
            height: 272px;
            background-image: url('img/banner2.png');
            background-size: cover;
            background-position: center;
        }

        .biaoti {
            float: left;
            margin-top: 50px;
            margin-left: 40px;
        }

        .card {
            margin-top: 50px;
        }

        .card>div {
            width: 28%;
            height: 288px;
            background-color: #fff;
            float: left;
            margin-left: 4%;
            margin-bottom: 30px;
            border-radius: 4px;
            overflow: hidden;
        }

        .card>div::after {
            content: '';
            display: block;
            clear: both;
        }

        .img {
            width: 100%;
            height: 184px;
            background-size: cover;
        }

        .img1 {
            background-image: url('img/1.jpg');
        }

        .img2 {
            background-image: url('img/2.jpg');
        }

        .img3 {
            background-image: url('img/3.jpeg');
        }

        .img4 {
            background-image: url('img/4.jpg');
        }

        .img5 {
            background-image: url('img/5.jpg');
        }

        .img6 {
            background-image: url('img/6.png');
        }

        .img7 {
            background-image: url('img/7.jpg');
        }

        .img8 {
            background-image: url('img/8.jpg');
        }

        .img9 {
            background-image: url('img/9.jpg');
        }

        .img10 {
            background-image: url('img/10.png');
        }

        .img11 {
            background-image: url('img/11.jpg');
        }

        .img12 {
            background-image: url('img/12.jpg');
        }

        .img:hover {
            animation: pulse 2s forwards;
            cursor: pointer;
        }


        .card-title {
            text-align: left;
            margin-left: 25px;
            margin-top: 20px;
            color: rgba(0, 0, 0, 0.85);
            font-size: 18px;

        }

        .card-description {
            text-align: left;
            margin-left: 25px;
            margin-top: -8px;
            color: #999;
            font-size: 16px;
        }


        .footer {
            text-align: center;
            font-size: 12px;
            color: #999;
            margin-top: -10px;
            height: 60px;
            line-height: 60px;
        }

        #back {
            width: 24px;
            height: 24px;
            position: fixed;
            z-index: 10000;
            right: 25px;
            bottom: 100px;
        }
    </style>
</head>

<body>
    <div class="header" id="pu">
        <div class="logo">
            <a href="Homepage.html"><img
                    src="https://gw.alipayobjects.com/zos/bmw-prod/7061fe82-8281-41c2-9f92-86188ced7159.svg"
                    style="width: 140px; height: 20px;"></a>
        </div>
        <div class="menu">
            <!-- <span class="community">开放社区</span> -->
            <span class="communication"><a href="communication.html"
                    style="color: #fff;text-decoration: none;">交流专区</a></span>
            <span class="learn">学习专区</span>
        </div>
        <div class="search">
            <input type="text" placeholder="搜索你需要的内容" style="width: 200px;height: 32px;">
            <a href="login.html"><span style="color: #f3f5f6;margin-left: 10px;">登录</span></a>
        </div>
        <img src="img/搜索--1.png" style="width: 30px;height: 30px;float: right;margin-right: 10px;margin-top: 10px;">
    </div>
    <div class="banner">
        <div class="biaoti">
            <p style="font-size: 36px;color: #f3f5f6;">技术学习</p>
            <p style="font-size: 20px;color: #f3f5f6;">每天学习一点点，疑惑不解少一点</p>
        </div>
    </div>
    <div class="card">
        <div class="card1">
            <div class="img img1">

            </div>
            <div>
                <p class="card-title">
                    三方业务基础教程
                </p>
                <p class="card-description">
                    小程序三方业务相关基础教程讲解
                </p>
            </div>
        </div>
        <div class="card2">
            <div class="img img2">

            </div>
            <div>
                <p class="card-title">
                    开放能力接入系统教程
                </p>
                <p class="card-description">
                    开放能力六大级别讲解
                </p>
            </div>
        </div>
        <div class="card3">
            <div class="img img3">

            </div>
            <div>
                <p class="card-title">
                    社区每周FAQ推荐解法
                </p>
                <p class="card-description">
                    这里集合社区每周的FAQ推荐解法，并持续更新，欢迎大家关注哦~
                </p>
            </div>
        </div>
        <div class="card4">
            <div class="img img4">

            </div>
            <div>
                <p class="card-title">
                    小程序技术技能合集
                </p>
                <p class="card-description">
                    多种小程序开发技能
                </p>
            </div>
        </div>
        <div class="card5">
            <div class="img img5">

            </div>
            <div>
                <p class="card-title">
                    小程序开发基础教程
                </p>
                <p class="card-description">
                    小程序开发的基础课，共包含6节课
                </p>
            </div>
        </div>
        <div class="card6">
            <div class="img img6">

            </div>
            <div>
                <p class="card-title">
                    友盟学院｜数据埋点系列课程
                </p>
                <p class="card-description">
                    友盟+ 助你1小时成为埋点专家！
                </p>
            </div>
        </div>
        <div class="card7">
            <div class="img img7">

            </div>
            <div>
                <p class="card-title">
                    多端发布教程集锦
                </p>
                <p class="card-description">
                    多端发布相关教程
                </p>
            </div>
        </div>
        <div class="card8">
            <div class="img img8">

            </div>
            <div>
                <p class="card-title">
                    服务商（ISV）教程集锦
                </p>
                <p class="card-description">
                    服务商相关教程集锦
                </p>
            </div>
        </div>
        <div class="card9">
            <div class="img img9">

            </div>
            <div>
                <p class="card-title">
                    小程序运营基础教程集锦
                </p>
                <p class="card-description">
                    小程序运营基础教程
                </p>
            </div>
        </div>
        <div class="card10">
            <div class="img img10">

            </div>
            <div>
                <p class="card-title">
                    【规则有约】小程序/生活号规则解读
                </p>
                <p class="card-description">
                    学好规则规范，轻松上手小程序/生活号运营开发。
                </p>
            </div>
        </div>
        <div class="card11">
            <div class="img img11">

            </div>
            <div>
                <p class="card-title">
                    【开发者说】小程序云开发系列课程
                </p>
                <p class="card-description">
                    小程序云开发从创建到实践
                </p>
            </div>
        </div>
        <div class="card12">
            <div class="img img12">

            </div>
            <div>
                <p class="card-title">
                    支付宝服务市场教程
                </p>
                <p class="card-description">
                    支付宝服务市场相关视频教程
                </p>
            </div>
        </div>
    </div>
    <div id="back"><i class="fa fa-arrow-circle-up" aria-hidden="true" style="width: 50px;"></i><a href="#pu">返回顶部</a>
    </div>
    <div class="footer">
        <p>Copyright © 2021 支付宝（杭州）信息技术有限公司 ｜ ICP证浙B2-20160559</p>
    </div>
</body>

</html>