Diseño de sitio web incluido
1. Diseño de imagen: hay imágenes y colores de fondo, y hay una imagen flotando al mismo tiempo.
2. Diseño de fuente: establezca el tamaño de fuente, el color y otros contenidos.
3. Diseño del botón: complete la función de mostrar la ventana de video después de hacer clic en el botón.
4. Ventana de video: la ventana de video incluye funciones como barra de progreso de video, ajuste de volumen, pantalla completa de ventana, ajuste de velocidad de reproducción de video e imagen en imagen.
Tabla de contenido
1. Visualización de la página web
2. Código fuente de la página web
<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. Material completo
El archivo completo del sitio web (incluidos los materiales) está aquí ----> diseño web HTML+CSS archivo completo de diseño web promocional simple
Puede descargarlo usted mismo si lo necesita.