HTML CSS 梦幻仙境图片显示在视频上方

最新推荐文章于 2023-03-15 17:11:37 发布

Dogboss233

最新推荐文章于 2023-03-15 17:11:37 发布

阅读量1.5k

点赞数 2

分类专栏：网页设计 CSS 文章标签：网页设计 html5 css

本文链接：https://blog.csdn.net/m0_51393229/article/details/121532040

版权

网页设计同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

实例：制作视频界面

效果：

HTML　CSS　代码实现：

<html>
   <head>
       <title>文字段落</title>
<style type="text/css">
   .father{
       width:600px;
       height:450px;
   }
    .css1 {
        width:10px;
        height:10px;
        position:absolute;
        left:570px;
        top:140px;
        z-index:3
    }
    .css2 {
        font-size:14px;
        color: #ffffff;
        position: absolute;
        left: 575px;
        top: 170px;
        z-index: 3
    }
    .css3 {
        width: 10px;
        height: 10px;
        position: absolute;
        left: 570px;
        top: 187px;
        z-index: 3
    }
    .css4 {
        font-size: 14px;
        color: #ffffff;
        position: absolute;
        left: 575px;
        top: 215px;
        z-index: 3
    }
    .css5 {
        width: 10px;
        height: 10px;
        position: absolute;
        left: 570px;
        top: 235px;
        z-index: 3
    }
    .css6 {
        font-size: 14px;
        color: #ffffff;
        position: absolute;
        left: 575px;
        top: 265px;
        z-index: 3
    }
    .css7 {
        width: 10px;
        height: 10px;
        position: absolute;
        left: 570px;
        top: 285px;
        z-index: 3
    }
    .css8 {
        font-size: 14px;
        color: #ffffff;
        position: absolute;
        left: 575px;
        top: 315px;
        z-index: 3
    }
</style>
   </head>
   <body>
       <div class="father">
           <video controls="controls" width="600" height="450">
               <source src="media/xianjing.webm" />
           </video>
           <div class="css1"><img src="images/1.png" width="30" height="30" /> </div>
           <div class="css2">分享</div>
           <div class="css3"><img src="images/2.png" width="30" height="30" /></div>
           <div class="css4">画质</div>
           <div class="css5"><img src="images/3.png" width="30" height="30" /></div>
           <div class="css6">锁屏</div>
           <div class="css7"><img src="images/4.png" width="30" height="30" /></div>
           <div class="css8">赞赏</div>
       </div>
</body>
</html>

网页制作材料

网页制作图片材料

(视频传不上去😰)

小结:

    **我直接插入图片让其浮现在视频的上面了,我这个写起来就非常麻烦了,最好是用表格或列表来写.这样排版就很方便了.这个代码虽能实现,但是很冗杂.就像是每一个图片都是同样的设置大小,但是我却写了四遍.(印象中是有解决办法的我还没学😢)**
   不同的浏览器解析代码会不同,对padding或margin的参数进行调整就可以了.如果用的是DreamWeaver,一定要在浏览器中显示,不要轻易相信实时显示.
   貌似不同的软件CSS的标签还不太一样,DreamWeaver css是可以包含background-position属性的,但是VS2019就不识别这个属性.

Dogboss233

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
HTML CSS 梦幻仙境图片显示在视频上方

实例：制作视频界面效果：HTML　CSS　代码实现：<html> <head> <title>文字段落</title><style type="text/css"> .father{ width:600px; height:450px; } .css1 { width:10px; height:10px; position:a
复制链接

扫一扫