HTML练习—开班信息

最新推荐文章于 2024-09-27 09:37:38 发布
悟大师
最新推荐文章于 2024-09-27 09:37:38 发布
阅读量184
点赞数
文章标签： html css 前端 css3 javascript
本文链接：https://blog.csdn.net/qq_46371399/article/details/126152077
版权
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>导航条</title>
    <style type="text/css">
        /*清除默认样式*/
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font: 12px/1宋体;
        }

        .outer {
            width: 300px;
            height: 553px;
            background-color: #bfa;
            margin: 50px auto;
        }

        /* 设置title的边框 */
        .title {
            /*设置上边框*/
            border-top: 2px #019e8b solid;
            /*设置盒子的高度*/
            height: 36px;
            /*设置背景样式*/
            background-color: #f5f5f5;
            /*设置title的行高*/
            line-height: 36px;
            /*设置title的内边距*/
            padding: 0px 22px 0px 16px;
        }

        /*设置title中的超链接*/
        .title a {
            float: right;
            /*设置字体颜色*/
            color: red;
        }

        /*设置h3*/
        .title h3 {
            font: 16px/36px 微软雅黑;
        }

        /*设置内容*/
        .content {
            font-size: 14px;
            border: 1px solid #deddd9;
            /*设置内边距*/
            padding: 0px 28px 0px 20px;
        }

        /*设置内容中的超链接*/
        .content a {
            color: black;
            /*去除超链接的下划线*/
            text-decoration: none;
            /*设置字体大小*/
            font-size: 12px;
        }

        /*为超链接添加一个hover伪类*/
        .content a:hover {
            color: red;
            /*为超链接添加下划线*/
            text-decoration: underline;
        }


        .content h3 {
            margin-top: 14px;
            margin-bottom: 16px;
        }

        /*设置内容中的红色字体*/
        .content .red {
            color: red;
            font-weight: bold;
        }

        /*设置内容中的li*/
        .content li {
            margin-bottom: 13px;
        }

        /*设置右侧的a的样式*/
        .content .right {
            /*设置向右浮动*/
            float: right;
        }

        /*设置u1的样式*/
        .content ul {
            /*去除项目符号*/
            list-style: none;
            /*为u1设置一个下边框*/
            border-bottom: 1px dashed#deddd9;
        }

        /*取消最后一个ul的边框*/
        .content .no-border {
            border: none;
        }
    </style>
</head>

<body>
    <!--创建一个外层div,容纳整个内容-->
    <div class="outer">
        <!--开班信息的头部-->
        <div class="title">
            <a href="#">16年面授开班计划</a>
            <h3>近期开班</h3>
        </div>
        <!--开班信息的主要内容-->
        <div class="content">
            <h3><a href="#"></a>JavaEE+云计算-全程就业班</h3>
            <ul>
                <li>
                    <a href="#">开班时间: <span class="red">2016-04-27</span></a>
                    <a class="right" href="#"><span class="red">预约报名</span></a>
                </li>
                <li>
                    <a href="#">开班时间: <span class="red">2016-04-07</span></a>
                    <a class="right" href="#"><span class="red">无座，名额爆满</span></a>
                </li>
                <li>
                    <a href="#">开班时间: <span>2016-03-15</span></a>
                    <a class="right" href="#"><span>开班盛况</span></a>
                </li>
                <li>
                    <a href="#">开班时间: <span>2016-02-25</span></a>
                    <a class="right" href="#"><span>开班盛况</span></a>
                </li>
                <li>
                    <a href="#">开班时间: <span class="red">2016-12-26</span></a>
                    <a class="right" href="#"><span>开班盛况</span></a>
                </li>
            </ul>
            <h3><a href="#"></a>Android+人工智能-全程就业班</h3>
            <ul>
                <li>
                    <a href="#">开班时间: <span class="red">2016-04-10</span></a>
                    <a class="right" href="#"><span class="red">预约报名</span></a>
                </li>
                <li>
                    <a href="#">开班时间: <span>2016-03-17</span></a>
                    <a class="right" href="#"><span>开班盛况</span></a>
                </li>
                <li>
                    <a href="#">开班时间: <span>2016-02-20</span></a>
                    <a class="right" href="#"><span>开班盛况</span></a>
                </li>
                <li>
                    <a href="#">开班时间: <span>2016-12-23</span></a>
                    <a class="right" href="#"><span>开班盛况</span></a>
                </li>
            </ul>
            <h3><a href="#"></a>前端+HTML5-全程就业班</h3>
            <ul class="no-border">
                <li>
                    <a href="#">开班时间: <span class="red">2016-05-10</span></a>
                    <a class="right" href="#"><span class="red">预约报名</span></a>
                </li>
                <li>
                    <a href="#">开班时间: <span>2016-03-16</span></a>
                    <a class="right" href="#"><span>开班盛况</span></a>
                </li>
            </ul>
        </div>
    </div>

</body>

</html>