Website design incl.
1. Picture design: There are background pictures and colors, and there is a picture floating at the same time.
2. Font design: set font size, color and other content.
3. Button design: complete the function of popping up the video window after clicking the button.
4. Video window: The video window includes functions such as video progress bar, volume adjustment, window full screen, video playback speed adjustment, and picture-in-picture.
Table of contents
1. Web page display
2. Web page source code
<html><head>
<style>
body {
background-color: #e6e6e6;
font-family: "Helvetica Neue", sans-serif;
background-image: url("background.jpg");
background-size: cover;
background-position: center;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 30px;
text-align: center;
}
h1 {
color: #FF9933;
font-size: 36px;
margin: 10px 0;
}
p {
color: #FFFF99;
font-size: 18px;
line-height: 1.5;
}
.image-container {
width: 600px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
img {
position: absolute;
bottom: 100;
left: 36.5%;
width: 100%;
max-height: 500px;
max-width: 400px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
a {
display: inline-block;
margin: 20px 0;
padding: 12px 24px;
color: #fff;
background-color: #3498db;
border-radius: 5px;
text-decoration: none;
transition: all 0.3s;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
a:hover {
background-color: #2980b9;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
font-weight: bold;
text-transform: uppercase;
border: 2px solid #333;
}
/* 添加的部分 */
.video-container {
/* 居中放置 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 与图片一样大小 */
width: 600px;
height: 400px;
/* 隐藏视频窗口 */
display: none;
/* 允许关闭 */
overflow: hidden;
}
/* 播放视频 */
.video-container video {
width: 100%;
height: 100%;
}
/* 关闭按钮 */
.video-container .close {
position: absolute;
top: 10px;
right: 10px;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.video-container {
/* 在所有元素之上 */
z-index: 999;
}
</style>
</head>
<body>
<div class="container">
<h1>圣罗兰小金条</h1>
<p>YSL圣罗兰小金条口红 哑光新色35金琥珀1966红棕色21</p>
<div class="image-container" style="display: flex; justify-content: center; align-items: center;">
<img src="image.jpg" alt="image">
<a href="#" onclick="document.querySelector('.video-container').style.display='block'">点我查看视频</a>
</div>
<div class="video-container">
<video src="video.mp4" controls=""></video>
<div class="close">X</div>
</div>
</div>
<script>
document.querySelector('.close').addEventListener('click', function() {
document.querySelector('.video-container').style.display = 'none';
});
</script></body></html>
3. Complete material
The complete website file (including materials) is here ----> web design HTML+CSS simple promotional web design complete file
You can download it yourself if you need it.