视频网站网页Demo

最新推荐文章于 2022-11-09 17:37:58 发布

不是七七子

最新推荐文章于 2022-11-09 17:37:58 发布

阅读量4.3k

点赞数 9

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/weixin_43771998/article/details/113807247

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这是一个简单的HTML页面示例，展示了如何在鼠标悬停在图片上时使其放大并添加阴影效果，以及点击图片后在下方的iframe中切换播放相应的电影。页面包含多个电影封面，每个封面点击后都会在同一个iframe中加载对应电影的视频。页面布局简洁，适合移动端和桌面端浏览。

摘要由CSDN通过智能技术生成

先目睹下超级简陋的页面ヾ(๑╹◡╹)ﾉ"

在这里插入图片描述

主要技术点：
鼠标悬浮在图片上，图片变大且有阴影；
当点击图片的时候，在下方的 iframe 中切换图片对应的电影。

代码：

<!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>秒速5厘米</title>
    <style>
        video {
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <video controls autoplay>
        <source src="秒速五厘米 - 1.秒速5厘米(Av4433361,P1).mp4" type="video/mp4" />
        你的浏览器不支持video视频标签
    </video>
</body>

</html>

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: rgb(255, 249, 249);
        }

        img {
            width: 160px;
            height: 214px;
            border-radius: 5px;

        }

        img:hover {
            width: 178.2px;
            height: 235.4px;
            box-shadow: 0px 0px 4px 4px rgba(250, 54, 129, 0.308);
        }

        li,
        ul {
            list-style: none;
        }

        .img-item {
            width: 160px;
            height: 304px;
            margin-right: 20px;
            display: inline-block;
            vertical-align: top;
            cursor: pointer;
        }

        #img-div {
            position: relative;
            padding-top: 30px;
            padding-left: 220px;
            display: block;
            float: left;
        }

        h1 {
            text-align: center;
            padding-top: 40px;
            color: rgba(250, 54, 129, 0.562);
        }

        .img-title {
            color: rgba(250, 54, 129, 0.562);
            font-size: 14px;
            margin-top: 10px;
        }

        .img-a {
            text-decoration: none;
        }

        iframe {
            height: 500px;
            width: 60%;
            margin: 0 302px;
        }
    </style>
</head>

<body>
    <h1>视频列表</h1>
    <div id="img-div">
        <ul class="img-list">
            <li class="img-item">
                <a href="./miaosu5limi.html" class="img-a" target="movie">
                    <div>
                        <img src="./秒速5厘米.jpg" alt="秒速5厘米" title="秒速5厘米">
                    </div>
                    <div class="img-title">
                        秒速5厘米
                    </div>
                </a>
            </li>
            <li class="img-item">
                <a href="./dongjingjiaofu.html" class="img-a" target="movie">
                    <div>
                        <img src="./东京教父.jpg" alt="东方教父" title="东方教父">
                    </div>
                    <div class="img-title">
                        东京教父
                    </div>
                </a>
            </li>
            <li class="img-item">
                <a href="./jingjiedebifang.html" class="img-a" target="movie">
                    <div>
                        <img src="./境界的彼方.jpg" alt="境界的彼方" title="境界的彼方">
                    </div>
                    <div class="img-title">
                        境界的彼方
                    </div>
                </a>
            </li>
            <li class="img-item">
                <a href="./xiaridazuozhan.html" class="img-a" target="movie">
                    <div>
                        <img src="./夏日大作战.jpg" alt="夏日大作战" title="夏日大作战">
                    </div>
                    <div class="img-title">
                        夏日大作战
                    </div>
                </a>
            </li>
            <li class="img-item">
                <a href="./shaonvyuzhanche.html" class="img-a" target="movie">
                    <div>
                        <img src="./少女与战车.jpg" alt="少女与战车" title="少女与战车">
                    </div>
                    <div class="img-title">
                        少女与战车
                    </div>
                </a>
            </li>
            <li class="img-item">
                <a href="./guaiwuzhizi.html" class="img-a" target="movie">
                    <div>
                        <img src="./怪物之子.jpg" alt="怪物之子" title="怪物之子">
                    </div>
                    <div class="img-title">
                        怪物之子
                    </div>
                </a>
            </li>
        </ul>
    </div>

    <div class="iframe-div">
        <iframe src="" frameborder="0" name="movie" scrolling="no"></iframe>
    </div>
</body>

</html>

注意：在使用iframe时，name属性里的值要与超链接的target属性的值一致。

不是七七子

关注

9
点赞
踩
18

收藏

觉得还不错? 一键收藏
9
评论
视频网站网页Demo

先目睹下超级简陋的页面ヾ(๑╹◡╹)ﾉ"主要技术点：鼠标悬浮在图片上，图片变大且有阴影；当点击图片的时候，在下方的 iframe 中切换图片对应的电影。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m.
复制链接

扫一扫

专栏目录