【网页设计】HTML+CSS 实现简单宣传网页设计展示

柔情只为你懂 2023-09-23 20:28 163阅读 0赞

> 网站设计包含。  
> 1、图片设计:有背景图片和颜色，同时有一张图片悬浮。  
> 2、字体设计:设置字体大小、颜色等内容。  
> 3、按钮设计:完成点击按钮后弹出视频窗口的功能。  
> 4、视频窗口:视频窗口包括视频进度条、调节音量、窗口全屏、调节视频播放速度以及画中画等功能。

#### 目录 ####

*  一、网页展示
 *  二、网页源码
 *  三、完整素材

--------------------

## 一、网页展示 ##

![在这里插入图片描述][d026640ae9be470d879b00675ca806fd.png]

--------------------

## 二、网页源码 ##

<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 简单宣传网页设计完整文件][HTML_CSS]

需要可以自行下载获取。

[d026640ae9be470d879b00675ca806fd.png]: https://img-blog.csdnimg.cn/d026640ae9be470d879b00675ca806fd.png
[HTML_CSS]: https://download.csdn.net/download/weixin_57807777/87352316