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

思卿不见

已于 2022-05-25 16:07:15 修改

阅读量3.6k

点赞数 5

分类专栏： html 文章标签： HTML

于 2019-07-23 11:08:32 首次发布

本文链接：https://blog.csdn.net/weixin_44100210/article/details/96976143

版权

html 专栏收录该内容

4 篇文章 5 订阅

订阅专栏

代码如下，自需自看：

<!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>

完成后的效果图如下：
在这里插入图片描述

思卿不见

关注

5
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML第6章简答题3(制作北大青鸟网站的中心开班信息模板)

代码如下，自需自看：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0px; ...
复制链接

扫一扫