HTML和CSS控制视频到指定的电脑屏幕位置上cid1060-网页前端设计
html
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="laptop"> <img src="res/laptop.png" alt=""> <video src="res/video.mp4" controls></video> </div> </body> </html>
css
body{ margin: 0; padding: 0; background: #333; height: 100vh; display: flex; align-items: center; justify-content: center; } .laptop{ width: 100%; max-width: 1200px; position: relative; } .laptop img{ width: 100%; } .laptop video{ position: absolute; width: 67.7%; height: 81.3%; background: #000; top: 7.1%; left: 17.5%; }
