【前端客栈】使用CSS制作爱奇艺视频播放列表

使用CSS制作爱奇艺视频播放列表；

IT辰柒_Java

1201人浏览 · 2023-04-30 11:06:22

IT辰柒_Java · 2023-04-30 11:06:22 发布

🏙哈喽，大家好，我是小浪。上篇博客我使用CSS制作了畅销书排行榜的页面，直接冲上了热榜第七，也是非常的意外和激动，不仅学习到了知识，也获得了很多的流量和粉丝，这给了我很大的动力继续创作一些前端的相关文章，让前端学习变得更加有趣和简单。⌛️⌛️

🌇昨日热榜：热榜博客。

📚📚那么我们今天来学习如何制作一个新的页面，今天的制作难度相较于昨天那个页面是有一点难度的，循序渐进，慢慢从易到难，这样学起来才是非常有效果的。

一、学习CSS相关语法

1、盒子模型

那么我们之前说过盒子模型使用div标签来制作，但是出来的样子我们却看不到盒子，原因就是我们没有去设置边框，导致看起来像没有设置盒子一样，那么关于盒子模型的基本语法可以看我这篇博客介绍的非常详细：CSS盒子模型语法；

2、边框

1、如果我们只给边框长、宽的话这个盒子是出现不了的；

        div{
            width:300px;
            height: 300px;
        }

结果：

2、那我们给出盒子的背景颜色看看效果

background-color: aqua;

3、给出边框设置函数

1、边框粗细

border-width: 13px 12px 14px 15px;

注意这里不同个数的值对应不同边的设置：

1个值全部边框；

2个值上下左右；

3个值上左右下；

4个值上右下左；

2、边框类型

border-style: solid;

我们直接输入border-style，VS会自动提示我们给边框设置类型；

掌握以下几种便可：

solid 直线， double 双线，dashed 虚线，dotted 点状线；

3、边框颜色

border-color: red blue green brown;

这三个都是跟上面同理，不同的个数对应不同的边；

4、整体边框样式

如果我们嫌上面写的太麻烦，可以直接来一个border，里面就可以我们的边框设置整体样式；

border: red solid 1px;

5、圆角边框

border-radius: 30px;

我们经常看到一些盒子的边框是圆角的而不是直角的，那如何设置呢？

6、图片居中

float: left;

如果我们想让图片居中的话，可以使用这个函数；

7、盒子阴影

下面依次对应：inset是内置阴影的意思，blue阴影颜色，X轴偏移量，Y轴偏移量，阴影大小；

box-shadow: inset blue 0px 0px 10px;

效果：

二、制作爱奇艺播放列表

1、制作要求

2、实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱奇艺播放列表</title>
    <style>
        h2{
            font-size: 18px;
            line-height: 20px;
        }
        dt{
            padding: 10px;
            margin-right: 5px;
        }
        img{
            border-radius:15px; 
        }
        div{
            width: 1200px;
        }
        #d1,#d2,#d3,#d4{
            width: 210px;
            height: 360px;
            margin: 0 auto;
            border-radius: 20px;
            padding: 20px;
            border: rgb(230, 216, 216) 5px;
            float: left;
        }
        #d1:hover,#d2:hover,#d3:hover,#d4:hover{
            /* 盒子阴影 
                inset 加上就是内阴影
            */
            box-shadow:  rgb(226, 226, 235) 2px 2px 5px;
        }
        .p1{
            font-family: "黑体";
            font-weight: bolder;
            line-height: 10px;
        }
        .p2{
            font-size: 14px;
            line-height: 10px;
            color: crimson;
        }
        .p3{
            line-height: 10px;
            font-size: 10px;
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <h2>热播</h2>
        <dl>
            <dt>
                <div id="d1">
                    <a href="#" id="a1"><img src="./爱奇艺播放列表素材/img1.png" alt=""></a>
                    <p class="p1">神武赵子龙</p>
                    <p class="p2">怒，林更新不抱网红抱女神</p>
                    <p class="p3">点击次数: 242445次</p>
                </div>
                <div id="d2">
                    <a href="#" id="a1"><img src="./爱奇艺播放列表素材/img2.png" alt=""></a>
                    <p class="p1">旋风十一人</p>
                    <p class="p2">胡歌变教练在撩前女友</p>
                    <p class="p3">点击次数:242445次</p>
                 </div>
                <div id="d3">
                    <a href="#" id="a1"><img src="./爱奇艺播放列表素材/img3.png" alt=""></a>
                    <p class="p1">太阳的后裔</p>
                    <p class="p2">宋慧不吃嫩草</p>
                    <p class="p3">点击次数: 242445次</p>
                </div>
                <div id="d4">
                    <a href="#" id="a1"><img src="./爱奇艺播放列表素材/img4.png" alt=""></a>
                    <p class="p1">山海经之赤影传说</p>
                    <p class="p2">娜扎张翰再度联手</p>
                    <p class="p3">点击次数:242445次</p>
                </div>
            </dt>
        </dl>
    </div>
</body>
</html>