仿土豆播放盒子-绝对定位相对定位练习

太过爱你忘了你带给我的痛 2023-02-20 07:22 109阅读 0赞

### 效果图： ###

![在这里插入图片描述][20200624170318460.gif]

### 代码： ###

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>土豆播放案例</title> <style> * { 
    			margin: 0;
    			padding: 0;
    		}
    		.movie { 
    			position: relative;
    			width: 448px;
    			height: 672px;
    			margin:50px auto;
    		}
    		.mask { 
    			position: absolute;
    			display: none;
    			top: 0px;
    			left: 0px;
    			width: 448px;
    			height: 672px;
    			background: rgba(0,0,0,.3) url(arr.png) no-repeat center;
    		}
        	.movie a:hover .mask { 
    			display: block;
    		}
    	</style>
    </head>
    <body>
    	<div class="movie">
    		<a href="#">
    			<img src="bg.jpg" alt="">
    			<div class="mask">
    			</div>
    		</a>
    	
    	</div>
    
    </body>
    </html>

### 素材 ###

bg.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]  
arr.png  
![在这里插入图片描述][20200624170435895.png]

[20200624170318460.gif]: https://img-blog.csdnimg.cn/20200624170318460.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200624170415549.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1,size_16,color_FFFFFF,t_70
[20200624170435895.png]: https://img-blog.csdnimg.cn/20200624170435895.png

发表评论取消回复

表情：

评论列表（有 0 条评论，109人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTMLCSS小白——盒子模型，绝对定位和相对定位

<!DOCTYPE html> <html> <head> <title></title> <style type="text/cs

水深无声/ 2023年07月10日 08:10/ 0 赞/ 129 阅读

相关 CSS绝对定位，相对定位

CSS绝对定位，相对定位 1、在绝对定位上显示内容(在要显示的内容上面设置相对定位) <image class="back" src="../../../../

心已赠人/ 2023年07月06日 08:59/ 0 赞/ 116 阅读

相关 duilib绝对定位与相对定位

前言 duilib中窗口，布局，控件等在屏幕上的显示位置都是按照配置好的xml文件规则显示的，每个显示元素的位置大小也需要显式指定，才能呈现出更好看的界面效果，显示元素的

叁歲伎倆/ 2023年03月06日 03:58/ 0 赞/ 106 阅读

相关仿土豆播放盒子-绝对定位相对定位练习

效果图： ![在这里插入图片描述][20200624170318460.gif] 代码： <!DOCTYPE html> <html lang="en">

太过爱你忘了你带给我的痛/ 2023年02月20日 07:22/ 0 赞/ 110 阅读

相关 CSS定位（相对定位，固定定位，绝对定位）

在CSS中，可以使用position属性来定位元素。position 属性规定元素的定位类型。属性值： absolute：生成绝对定位的元素，相对于 static

刺骨的言语ヽ痛彻心扉/ 2023年01月11日 09:15/ 0 赞/ 286 阅读

相关 CSS定位—静态定位、相对定位、固定定位、绝对定位、粘性定位

CSS定位定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。定位的组成定位是将盒子定位在某一位置。按照定位的方式

悠悠/ 2022年12月19日 01:18/ 0 赞/ 277 阅读

相关 css绝对定位和相对定位

定位的专业解释（1）语法 position : static | absolute | fixed | relative ( 2 ) 说明从上面语法可以看出，

左手的ㄟ右手/ 2022年09月21日 05:43/ 0 赞/ 443 阅读

相关绝对定位和相对定位详解

层级关系为： <div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物 <div—————————-没有设置为定位元素

蔚落/ 2022年08月20日 07:25/ 0 赞/ 417 阅读

相关相对定位、绝对定位、z-index

相对定位(relative) 1、相对于原来的位置进行定位 2.、元素原来在文档流的位置还会被保留着注意：左和上市正方向，右和下是负方向，相对定位可以理解成完全脱离文档

布满荆棘的人生/ 2022年06月14日 01:11/ 0 赞/ 402 阅读

相关相对定位与绝对定位

什么是文档流？将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。只有三种情况会使得元素脱离文档流，分别是：浮动绝对定位和相对定位。对pos

叁歲伎倆/ 2022年04月08日 12:24/ 0 赞/ 486 阅读