网页设计与网站规划作业20 为视频添加右侧功能区

最新推荐文章于 2024-08-25 09:57:22 发布

Rhyme_7

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量304

点赞数

分类专栏：网页设计与网站规划文章标签：前端 html5 css3

本文链接：https://blog.csdn.net/qq_54499870/article/details/121572635

版权

网页设计与网站规划专栏收录该内容

24 篇文章 16 订阅

订阅专栏

这个网页展示了梦幻仙境的唯美风景，通过HTML和CSS实现了一段全屏视频背景，配合半透明灰色遮罩，提升了视觉体验。页面中包含四个交互按钮，分别用于分享、调整画质、锁屏和赞赏内容。整体设计简洁而富有创意，提供了一种沉浸式的浏览体验。

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

<!DOCTYPE html>
<html>
<head>
	<title>梦幻仙境</title>
	<style type="text/css">
		*{
            margin:0;
            padding:0;}
		video{
			height:2000px;
		}
		
		.youlie{
			position: absolute;
			top: 450px;
			left: 2444px;

			}
		.dise{
			width:300px;
			height:1200px;
			background-color:#DCDCDC;
			opacity:0.5;
			position: absolute;
			left: 2364px;
			top: 400px;

		}
        p{
        	text-align:center;
        	font-size: 100px;

        }
	</style>
</head>
<body>
	
<video src="xianjing.webm" controls="controls"></video>
<source src="唯美风景梦幻仙境植物029.mov" type="mov"> 
<div class="dise"></div>
<div class="youlie">
	
	<table>
		<tr>
			<td>
				<img src="1.png">
				<p>分享</p>
			</td>
		</tr>
		<tr>
			<td>
				<img src="2.png">
				<p>画质</p>
			</td>
		</tr>
		<tr>
			<td>
				<img src="3.png">
				<p>锁屏</p>
			</td>
		</tr>
		<tr>
			<td>
				<img src="4.png">
				<p>赞赏</p>
			</td>
		</tr>
	</table>
	
</div>
</body>
</html>

Rhyme_7

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
网页设计与网站规划作业20 为视频添加右侧功能区

<!DOCTYPE html><html><head> <title>梦幻仙境</title> <style type="text/css"> *{ margin:0; padding:0;} video{ height:2000px; } .youlie{ position: absolute; top: 450px; left...
复制链接

扫一扫