HTML第6章上机练习3(制作京东快报页面)

思卿不见

已于 2022-05-25 16:08:41 修改

阅读量8.3k

点赞数 10

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

于 2019-07-22 09:54:20 首次发布

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

版权

html 专栏收录该内容

4 篇文章 5 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作京东快报页面</title>
    <style>
        .title{
            height: 186px;
            width: 230px;
            box-sizing: border-box;
            border: 1px solid gainsboro;
        }
        .one{
            background-image: linear-gradient(to bottom, gainsboro, #ffffff);
            color: gray;
            font-size: 16px;
            line-height: 43px;
            vertical-align: center;
            padding: 0px 0px 1px 10px;
        }
        p{
            border:  gainsboro 2px dotted;
            margin: 0px;
            padding: 0px;
        }
        ul{
            margin: 0px;
            padding: 5px 0px ;
        }
        li{
            list-style: none;
            line-height: 26px;
            padding: 0px 26px;
            font-size: 12px;
        }
        ul a{
            text-decoration: none;
            color: gray;
        }
        a:hover{
            color: #640000;
        }
    </style>
</head>
<body>
<div class="title">
    <div class="one">京东快报</div>
    <p></p>
    <div class="two">
        <table>
            <tr>
                <ul>
                    <li><a href="">[特惠]海飞丝去屑又去油 超清爽</a></li>
                    <li><a href="">[公告]京东公益支持鲁甸新动作</a></li>
                    <li><a href="">[特惠]4688元抢iPhone 6</a></li>
                    <li><a href="">[公告]小米电视携豪礼高调入驻京东</a></li>
                </ul>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

效果图如下：
在这里插入图片描述
鼠标移上文字后的效果图如下：

ps：说一下，近期会把以前作业的代码都完善下，再把以前以图片形式发出来的文章，还有在现在看来不太合格的文章代码修一下，免得误人子弟我可担不起这罪名，快跑。哈哈哈哈哈