网站设计包含。
1、图片设计:有背景图片和颜色，同时有一张图片悬浮。
2、字体设计:设置字体大小、颜色等内容。
3、按钮设计:完成点击按钮后弹出视频窗口的功能。
4、视频窗口:视频窗口包括视频进度条、调节音量、窗口全屏、调节视频播放速度以及画中画等功能。
一、网页展示
二、网页源码
<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>
三、完整素材
完整网站文件（包含素材）在这里 ---->网页设计 HTML+CSS 简单宣传网页设计完整文件
需要可以自行下载获取。