近期开班

作者: 儿懵 | 来源:发表于2018-11-05 08:58 被阅读0次

近期开班
近期开班
开班信息 - - - 网页图片
前端-第六天-作业
2019-03-28 26号作业
5月30日作业：“开班信息”
开班信息
2019-05-30
2019-03-27第七天作业
2019-05-30第五天作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>近期开班</title>
    <style type="text/css">
        *{
            list-style: none;
            text-decoration: none;/*去掉下划线*/
            margin:0 ;
        }
        .top{
            width: 300px;
            height: 2px;
            background-color: #019e8b;
            margin:0 auto;
            margin-top: 10px;
        }
        .wenzi{
            width: 300px;
            height: 36px;
            background-color: #f5f5f5;
            margin:0 auto;
        }
        h3{
            width: 268px;
            height: 40px;
            margin: 0 auto;
            padding-lift:16px;
            padding-right: 16px;
            line-height: 36px;
        }
        h3 a{
            color:red;
            display: block;/*转换成块儿元素*/
            float: right;
            text-decoration: underline;/*加下划线*/
        }
    </style>


    <style type="text/css">
        *{
            list-style: none;
            margin:0 auto;
        }
        .title_bottom{
            width: 298px;
            height: 430px;
            border: 1px solid #deddd9;
        }
        span{
            color:red;
        }
        .rengong{
            width: 268px;
            height: 170px;
            margin: 0 auto;
            padding-left: 16px;
            padding-right: 16px;
        }
        .kaifa{
            width: 268px;
            height: 160px;
        }
        .shuju{
            width: 268px;
            height: 200px;
        }
        h4{
            line-height: 40px;
        }
        .hong{
            display: block;
            float: right;
            color:red;
        }
        .hei{
            display: block;
            float: right;
            color: black;
        }
        p{
            margin-top: 5px;
        }
        .a{
            width: 265px;
            height: 12px;
            border-bottom: 1px dashed #deddd9;
        }/*虚线*/
        .b{
            width: 256px;
            height: 18px;
            border-bottom: 1px dashed #deddd9;
        }
    </style>
</head>

<body>
    <div><!--头-->
        <div class="top"></div>
        <div class="wenzi">
            <h3>近期开班<a href="#">18年面授开班计划</a></h3>
        </div>
    </div>
    <div class="title_bottom"><!--身子-->
        <div class="rengong">
            <h4>人工智能+Python-高薪就业班</h4>
            <p>开班时间:<span>2018-04-26</span><a href="#"><span class="hong">预约报名</span></a></p>
            <p>开班时间:<span>2018-03-23</span><span class="hong">无座,名额爆满</span></p>
            <p>开班时间:2018-04-26<a href="#"><span class="hei">开班盛况</span></a></p>
            <p>开班时间:2017-12-20<a href="#"><span class="hei">开班盛况</span></a></p>
            <p>开班时间:2017-11-18<a href="#"><span class="hei">开班盛况</span></a></p>
            <div class="a"></div>
        </div>
        <div class="kaifa">
            <h4>Android开发+测试</h4>
            <p>开班时间:<span>2010-04-26</span><a href="#"><span class="hong">预约报名</span></a></p>
            <p>开班时间:2018-03-23<a href="#"><span class="hei">开班盛况</span></a></p>
            <p>开班时间:2018-01-23<a href="#"><span class="hei">开班盛况</span></a></p>
            <p>开班时间:2017-12-20<a href="#"><span class="hei">开班盛况</span></a></p>
            <div class="b"></div>
        </div>
        <div class="shuju">
            <h4>大数据软件-青芒工作室</h4>
            <p>开发时间:<span>2018-04-26</span><a href="#"><span class="hong">预约报名</span></a></p>
            <span>开发时间:2018-01-23<a href="#"><span class="hei">开班盛况</a></span></p>
        </div>
    </div>

</body>
</html>