侧边信息栏案例练习

Author Avatar
Ninefire 6月 06, 2018
  • 在其它设备中阅读本文章

网页侧边栏信息栏练习:

<!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;
                margin: 50px auto 0px;
            }

            /******标题******/
            .title {
                height: 43px;
                line-height: 43px;
                padding: 0 1em;
                background-color: #F3F3F3;
                border-top: 3px solid #039E86
            }

            .title a {
                float: right;
                color: red;
            }

            .title h3 {
                font: 16px/46px;
            }

            /******内容******/
            .content {
                border: 2px solid #E4E3E0;
                padding: 0 2em 0 1em;
            }

            .content h3 {
                margin: 1em 0 1.2em;
            }

            .content ul {
                list-style: none;
                border-bottom: 1px dashed #DEDDD9;
            }

            .content ul:last-of-type {
                border: none;
            }

            .content ul li {
                margin: 1em 0;
            }

            .content ul a {
                color: #000;
                text-decoration: none;
            }

            .content ul a:hover {
                text-decoration: underline;
                color: purple;
            }

            .content .red {
                color: red;
                font-weight: bold;
            }

            .content .right {
                float: right;
            }
        </style>
    </head>
    <body>
        <div class="outer">

            <div class="title">
                <a href="#">18年面授开班计划</a>
                <h3>近期开班</h3>
            </div>

            <div class="content">
                <h3><a>JavaEE+大数据-全程就业班</a></h3>
                <ul>
                    <li>开班时间:<a href="#"><span class="red">2018-08-08(北京)</span></a><a href="#" class="red right">预约报名</a></li>
                    <li>开班时间:<a href="#"><span class="red">2018-09-06(深圳)</span></a><a href="#" class="red right">预约报名</a></li>
                    <li>开班时间:<a href="#">2018-07-25(深圳)</a><a href="#" class="right">开班盛况</a></li>
                    <li>开班时间:<a href="#">2018-07-15(北京)</a><a href="#" class="right">开班盛况</a></li>
                </ul>

                <h3><a>大数据+机器学习-全程就业班</a></h3>
                <ul>
                    <li>开班时间:<a href="#"><span class="red">2018-08-08(北京)</span></a><a href="#" class="red right">预约报名</a></li>
                    <li>开班时间:<a href="#"><span class="red">2018-09-06(深圳)</span></a><a href="#" class="red right">预约报名</a></li>
                    <li>开班时间:<a href="#">2018-07-25(深圳)</a><a href="#" class="right">开班盛况</a></li>
                    <li>开班时间:<a href="#">2018-07-05</a><a href="#" class="right">开班盛况</a></li>
                </ul>

                <h3><a>HTML5前端+全栈-全程就业班</a></h3>
                <ul>
                    <li>开班时间:<a href="#"><span class="red">2018-08-10(北京)</span></a><a href="#" class="red right">预约报名</a></li>
                    <li>开班时间:<a href="#"><span class="red">2018-09-20(北京)</span></a><a href="#" class="red right">预约报名</a></li>
                    <li>开班时间:<a href="#">2018-07-15(深圳)</a><a href="#" class="right">开班盛况</a></li>
                    <li>开班时间:<a href="#">2018-07-10(北京)</a><a href="#" class="right">开班盛况</a></li>
                </ul>

                <h3><a>Python+人工智能-全程就业班</a></h3>
                <ul>
                    <li>开班时间:<a href="#"><span class="red">2018-08-10</span></a><a href="#" class="red right">预约报名</a></li>
                    <li>开班时间:<a href="#"><span class="red">2018-09-20</span></a><a href="#" class="red right">预约报名</a></li>
                    <li>开班时间:<a href="#">2018-07-10</a><a href="#" class="right">开班盛况</a></li>
                    <li>开班时间:<a href="#">2018-5-24</a><a href="#" class="right">开班盛况</a></li>
                </ul>
            </div>

        </div>
    </body>
</html>

你可以先按照样图自己动手编写 >>戳我查看样图<<

最终效果 >>请戳我<<

如发现错误请联系我,谢谢你。
本文链接:http://ninefire.tk/HTML&CSS.basics/50.html