HTML第6章上机练习5(制作爱奇艺视频播放列表)

思卿不见

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

阅读量1.4w

点赞数 13

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

于 2019-07-23 11:23:26 首次发布

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

版权

html 专栏收录该内容

4 篇文章 5 订阅

订阅专栏

代码如下：

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

        .title {
            width: 1000px;
            margin: auto;
        }

        li {
            list-style: none;
            display: inline-block;
            padding: 10px;
            margin: 5px;
        }

        h3 {
            font-size: 18px;
            line-height: 40px;
        }

        img {
            border-radius: 10px;
        }

        ul li:hover {
            box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.2);
            border-radius: 10px;
        }

        /*以下属性自行设置的 题目无要求*/
        p:nth-child(2) {
            color: grey;
            font-weight: bolder;
        }

        p:nth-child(3) {
            color: #9b2d30;
        }

        p:nth-child(4) {
            color: #06329b;
        }

    </style>
</head>
<body>
<div class="title">
    <h3>热播</h3>
    <ul>
        <li>
            <img src="../img/img1.png" alt="">
            <p>神武赵子龙</p>
            <p>怒，林更新不抱网红抱美女</p>
            <p>点击次数：242445次</p>
        </li>
        <li>
            <img src="../img/img2.png" alt="">
            <p>旋风十一人</p>
            <p>胡歌变教练在撩前女友</p>
            <p>点击次数：242445次</p>
        </li>
        <li>
            <img src="../img/img3.png" alt="">
            <p>太阳的后裔</p>
            <p>宋慧乔吃嫩草</p>
            <p>点击次数：242445次</p>
        </li>
        <li>
            <img src="../img/img4.png" alt="">
            <p>山海经之赤影传说</p>
            <p>娜扎张翰再度联手</p>
            <p>点击次数：242445次</p>
        </li>
    </ul>
</div>
</body>
</html>

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

思卿不见

关注

13
点赞
踩
79

收藏

觉得还不错? 一键收藏
打赏
4
评论
HTML第6章上机练习5(制作爱奇艺视频播放列表)

代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { padding:...
复制链接

扫一扫