视频网站网页Demo

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

主要技术点：
鼠标悬浮在图片上，图片变大且有阴影；
当点击图片的时候，在下方的 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属性的值一致。

视频网站网页Demo相关推荐

将视频作为网站背景html,将视频作为网页背景
一些门户网站采用视频作为网页背景,具有很好的展示效果,而随着HTML5技术的发展和浏览器支持程序的提升,采用视频作为网页背景也变得越来越容易. 技术分析 CSS里的background-image属性 ...
随心下载网页中嵌套的视频（各大视频网站并不适用）
随着HTML5的广泛普及,网页中嵌入的多媒体越来越多,有时候我们在浏览某个网页时对其中某个视频很感兴趣,便想Down下来,但是鼠标放在视频上右击后并不会出现"另存为"这种选项. 在 ...
mysql教学磁力链_【python小项目】网页爬虫+mysql数据库储存，爬虫xx视频网站视频磁力链接...
#!/usr/bin/python3 # coding=utf8 import requests from bs4 import BeautifulSoup import pymysql import ...
优酷html版,优酷视频网页版_优酷视频网站版_优酷视频网页
最迅速的视频搜索:在自主开发的定向搜索技术和海量数据精准处理方式支持下,达到方便的专辑分类交叉搜索. 多元化内容:从网剧.网络小说.网络综艺.资讯栏目等多样化内容组合贯穿,创新的栏目式,优酷出品再度掀 ...
为什么视频网站的视频链接地址是blob
自从HTML5提供了video标签,在网页中播放视频已经变成一个非常简单的事,只要一个video标签,src属性设置为视频的地址就完事了.由于src指向真实的视频网络地址,在早期一般网站资源文件不怎么 ...
为什么视频网站的视频链接地址是blob？
自从HTML5提供了video标签,在网页中播放视频已经变成一个非常简单的事,只要一个video标签,src属性设置为视频的地址就完事了.由于src指向真实的视频网络地址,在早期一般网站资源文件不怎么 ...
Python异步解析主流视频网站视频信息框架
aioVextractor Python异步解析主流视频网站视频信息框架开发文档 docker便捷部署 git clone https://github.com/panoslin/aioVextra ...
python网络爬虫_Python网络爬虫——爬取视频网站源视频！
原标题:Python网络爬虫--爬取视频网站源视频! 学习前提 1.了解python基础语法 2.了解re.selenium.BeautifulSoup.os.requests等python第三方库 ...
支持在iPad中播放的HTML5视频网站推荐
YouTube是最早支持HTML5视频的网站,随着iPad等平板电脑的流行,越来越多的视频网站开始支持HTML5视频播放.下面就向大家分享一些国内的HTML5视频网站,是根据网上信息整理而成,欢迎大家 ...

视频网站网页Demo

视频网站网页Demo相关推荐

最新文章

热门文章