代码如下，自需自看：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .title {
            width: 252px;
            margin: auto;
            border: #acacac 1px solid;
            border-radius: 10px;
            background: linear-gradient(to bottom, #5bbcf5, #ffff, #FFFFFF, #FFFFFF);
        }

        .one {
            border-radius: 5px 5px 0px 0px;
            color: white;
        }


        li {
            list-style: none;
            margin-right: 22px;
            padding: 8px 0px 5px 20px;
            background: url("../img/dotBg.gif") no-repeat 0px 4px;
        }

        p {
            background: url("../img/bg.gif") no-repeat 11px;
            color: #FFFFFF;
            font-weight: bold;
            padding: 11px 48px;
            border-bottom: 1px white solid;
        }
        li a{
            text-decoration: none;
            color: #797c78;
            padding-bottom: 10px;
        }
        li:nth-last-child(1){
            margin-bottom: 12px;
        }
    </style>
</head>
<body>
<div class="title">
    <p>中心开班信息</p>
    <div class="one">
        <ul>
            <li><a href="">8月12日：学历+技能班</a></li>
            <li><a href="">8月16日：高考特招班</a></li>
            <li><a href="">8月23日：Java精英班</a></li>
            <li><a href="">8月31日：学士后强化班</a></li>
            <li><a href="">9月5日：大学生就业班</a></li>
            <li><a href="">9月9日：企业定向委培班</a></li>
            <li><a href="">9月16日：网络营销强化班</a></li>
        </ul>
    </div>
</div>
</body>
</html>

完成后的效果图如下：

更多推荐

HTML第6章简答题3(制作北大青鸟网站的中心开班信息模板)