• 日期: 2028-02-26
  • 标签: 常规
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./ccc.css">
    <meta charset="UTF-8">
    <title>HTML 轮播图和网格布局示例</title>
</head>
<body>
<div class="zbj">
    <div class="out">
        <div class="biankuang">
            <div class="tp"><a href="#"><img src="./1.png"></a></div>
            <div class="tp"><a href="#"><img src="./2.png"></a></div>
            <div class="tp"><a href="#"><img src="./3.png"></a></div>
            <div class="tp"><a href="#"><img src="./4.png"></a></div>
        </div>
        <div class="dian">
            <span class="xuanzhong"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
<pre><code>&lt;div class=&quot;qwe&quot;&gt;
    &lt;div class=&quot;grid-container&quot;&gt;
      &lt;div class=&quot;grid-item&quot; id=&quot;grid-item1&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;./OIP-C (1).jpeg&quot; alt=&quot;Image 1&quot;&gt;&lt;/a&gt;&lt;h6&gt;游戏简介&lt;/h6&gt;&lt;/div&gt;
      &lt;div class=&quot;grid-item&quot; id=&quot;grid-item2&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;./OIP-C.jpeg&quot;     alt=&quot;Image 2&quot;&gt;&lt;/a&gt;&lt;h6&gt;新手教学&lt;/h6&gt;&lt;/div&gt;
      &lt;div class=&quot;grid-item&quot; id=&quot;grid-item3&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;./OIP-C (2).jpeg&quot; alt=&quot;Image 3&quot;&gt;&lt;/a&gt;&lt;h6&gt;进阶教学&lt;/h6&gt;&lt;/div&gt;
      &lt;div class=&quot;grid-item&quot; id=&quot;grid-item4&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;./OIP-C (3).jpeg&quot; alt=&quot;Image 4&quot;&gt;&lt;/a&gt;&lt;h6&gt;车辆选择&lt;/h6&gt;&lt;/div&gt;
      &lt;div class=&quot;grid-item&quot; id=&quot;grid-item5&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;./OIP-C (4).jpeg&quot; alt=&quot;Image 5&quot;&gt;&lt;/a&gt;&lt;h6&gt;摄影模式&lt;/h6&gt;&lt;/div&gt;
      &lt;div class=&quot;grid-item&quot; id=&quot;grid-item6&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;./OIP-C (5).jpeg&quot; alt=&quot;Image 6&quot;&gt;&lt;/a&gt;&lt;h6&gt;季节车辆&lt;/h6&gt;&lt;/div&gt;
      &lt;div class=&quot;grid-item&quot; id=&quot;grid-item7&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;./OIP-C (6).jpeg&quot; alt=&quot;Image 7&quot;&gt;&lt;/a&gt;&lt;h6&gt;四季变换&lt;/h6&gt;&lt;/div&gt;
      &lt;div class=&quot;grid-item&quot; id=&quot;grid-item8&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;./OIP-C (7).jpeg&quot; alt=&quot;Image 8&quot;&gt;&lt;/a&gt;&lt;h6&gt;好友联机&lt;/h6&gt;&lt;/div&gt;
      &lt;div class=&quot;grid-item&quot; id=&quot;grid-item9&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;./OIP-C (8).jpeg&quot; alt=&quot;Image 9&quot;&gt;&lt;/a&gt;&lt;h6&gt;地图探索&lt;/h6&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class=&quot;dh&quot;&gt;
    &lt;div class=&quot;dh1&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;./7143.png_300.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class=&quot;dh2&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;./7143.png_300.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class=&quot;dh3&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;./7143.png_300.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class=&quot;dh4&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;./7143.png_300.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class=&quot;leftdh&quot;&gt;
    &lt;!-- &lt;div class=&quot;tiao1&quot;&gt;
        &lt;h3&gt;&lt;a href=&quot;#&quot;&lt;/a&gt;&lt;/h3&gt;
        &lt;hr&gt;
    &lt;/div&gt;
    &lt;div class=&quot;tiao2&quot;&gt;
        &lt;h4&gt;&lt;a href=&quot;#&quot;&lt;/a&gt;&lt;/h4&gt;
        &lt;hr&gt;
    &lt;/div&gt;
    &lt;div class=&quot;tiao3&quot;&gt;
        &lt;h4&gt;&lt;a href=&quot;#&quot;&lt;/a&gt;&lt;/h4&gt;
        &lt;hr&gt;
    &lt;/div&gt; --&gt;
  &lt;/div&gt;
</code></pre>
</div>
    <script src="./j.js"></script>
</body>
</html>
*{ margin: 0px; padding: 0px; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; /* 以防止出现滚动条 */ }
.out{ width: 600px; height: 300px; margin: 30px auto; overflow: hidden; position: relative; }
.biankuang{ height: 100%; width: 100%; display: flex; }
.out .biankuang img{ width: 600px; height: 300px; }
.dian{ position: absolute; bottom: 5px; display: flex; left: 50%; transform: translateX(-50%); }
.dian span{ width: 20px; height: 20px; border: 2px solid white; border-radius: 50%; margin: 0px 10px; }
.xuanzhong{ background-color: white; }
<p>.qwe { display: flex; justify-content: center; /* 水平居中 <em>/ align-items: center; /</em> 垂直居中 */ }</p>
<p>.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); /* 划分为三列 <em>/ gap: 50px; /</em> 格子之间的间距 */ }</p>
<p>.grid-item { border-radius: 7%; text-align: center; /* 内容水平居中 <em>/ background-color: #949494; /</em> 格子的背景颜色 <em>/ height: 100px; /</em> 设置固定高度 */ }</p>
<p>.grid-item img { border-radius: 7%; width: 180px; /* 图片的最大宽度 <em>/ height: auto; /</em> 图片的高度自适应 <em>/ max-height: 100%; /</em> 设置最大高度为父元素高度 */ }</p>
<p>#grid-item1{ position: relative; top: 30px; display: inline-block; }
#grid-item1::after{ content: &quot;&quot;; position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: linear-gradient(to bottom, rgba(255, 49, 49, 0.2), rgb(255, 67, 38)); }
#grid-item1 h6{ background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 127, 127), rgb(94, 94, 94));  -webkit-background-clip: text; /*背景剪切到文字 <em>/  -webkit-text-fill-color: transparent;/</em> 文字透明渲染 */  z-index: 1; position: relative; top: -20px; }
#grid-item2{ position: relative; top: 30px; display: inline-block; }
#grid-item2::after{ content: &quot;&quot;; position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: linear-gradient(to bottom, rgba(176, 176, 176, 0.2), rgb(209, 206, 212)); }
#grid-item2 h6{ background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(255, 255, 255), rgb(176, 124, 82), rgb(94, 94, 94));  -webkit-background-clip: text; /*背景剪切到文字 <em>/  -webkit-text-fill-color: transparent;/</em> 文字透明渲染 */  z-index: 1; position: relative; top: -20px; }
#grid-item3{ position: relative; top: 30px; display: inline-block; }
#grid-item3::after{ content: &quot;&quot;; position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: linear-gradient(to bottom, rgba(52, 255, 62, 0.1), rgb(22, 119, 43)); }
#grid-item3 h6{ background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(255, 255, 255), rgb(8, 73, 30), rgb(94, 94, 94));  -webkit-background-clip: text; /*背景剪切到文字 <em>/  -webkit-text-fill-color: transparent;/</em> 文字透明渲染 */  z-index: 1; position: relative; top: -20px; }
#grid-item4{ position: relative; top: 30px; display: inline-block; }
#grid-item4::after{ content: &quot;&quot;; position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: linear-gradient(to bottom, rgba(207, 170, 255, 0.1), rgb(255, 53, 53)); }
#grid-item4 h6{ background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(255, 255, 255), rgb(232, 61, 61), rgb(94, 94, 94));  -webkit-background-clip: text; /*背景剪切到文字 <em>/  -webkit-text-fill-color: transparent;/</em> 文字透明渲染 */  z-index: 1; position: relative; top: -20px; }
#grid-item5{ position: relative; top: 30px; display: inline-block; }
#grid-item5::after{ content: &quot;&quot;; position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: linear-gradient(to bottom, rgba(207, 170, 255, 0.1), rgb(255, 172, 29)); }
#grid-item5 h6{ background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(251, 255, 165), rgb(255, 140, 0), rgb(94, 94, 94));  -webkit-background-clip: text; /*背景剪切到文字 <em>/  -webkit-text-fill-color: transparent;/</em> 文字透明渲染 */  z-index: 1; position: relative; top: -20px; }
#grid-item6{ position: relative; top: 30px; display: inline-block; }
#grid-item6::after{ content: &quot;&quot;; position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: linear-gradient(to bottom, rgba(83, 226, 255, 0.2), rgb(97, 213, 255)); }
#grid-item6 h6{ background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(225, 228, 255), rgb(4, 110, 208), rgb(94, 94, 94));  -webkit-background-clip: text; /*背景剪切到文字 <em>/  -webkit-text-fill-color: transparent;/</em> 文字透明渲染 */  z-index: 1; position: relative; top: -20px; }
#grid-item7{ position: relative; top: 30px; display: inline-block; }
#grid-item7::after{ content: &quot;&quot;; position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: linear-gradient(to bottom, rgba(65, 158, 230, 0.265), rgb(67, 115, 183)); }
#grid-item7 h6{ background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(255, 255, 255), rgb(44, 87, 151), rgb(29, 74, 163));  -webkit-background-clip: text; /*背景剪切到文字 <em>/  -webkit-text-fill-color: transparent;/</em> 文字透明渲染 */  z-index: 1; position: relative; top: -20px; }
#grid-item8{ position: relative; top: 30px; display: inline-block; }
#grid-item8::after{ content: &quot;&quot;; position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: linear-gradient(to bottom, rgba(207, 170, 255, 0.1), rgb(149, 22, 88)); }
#grid-item8 h6{ background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(255, 255, 255), rgb(250, 154, 195), rgb(94, 94, 94));  -webkit-background-clip: text; /*背景剪切到文字 <em>/  -webkit-text-fill-color: transparent;/</em> 文字透明渲染 */  z-index: 1; position: relative; top: -20px; }
#grid-item9{ position: relative; top: 30px; display: inline-block; }
#grid-item9::after{ content: &quot;&quot;; position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: linear-gradient(to bottom, rgba(255, 144, 144, 0.153), rgb(103, 48, 154)); }</p>
<p>#grid-item9 h6{ background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(255, 204, 234), rgb(119, 87, 179), rgb(94, 94, 94));  -webkit-background-clip: text; /*背景剪切到文字 <em>/  -webkit-text-fill-color: transparent;/</em> 文字透明渲染 */  z-index: 1; position: relative; top: -20px; }</p>
<p>.zbj { width: 700px; height: 100%; margin: 0 auto; background-image: linear-gradient(to bottom right, rgb(93, 176, 240), rgb(188, 57, 144), rgb(59, 74, 133), rgb(118, 48, 88)); }</p>
<p>.dh{ position: fixed; bottom: 0px; width: 700px; height: 8%; background: linear-gradient(to bottom, rgba(255, 58, 219, 0.523),rgb(129, 38, 215)); }
.dh1 img{ position: absolute; left: 00px; bottom: 0px; width: 80px; height: 80px; }
.dh2 img{ position: absolute; left: 200px; bottom: 0px; width: 80px; height: 80px; }
.dh3 img{ position: absolute; left: 400px; bottom: 0px; width: 80px; height: 80px; }
.dh4 img{ position: absolute; left: 620px; bottom: 0px; width: 80px; height: 80px; }
.leftdh{ z-index: 1; position: relative; top: 0px; left: 0px; height: 100%; width: 300px; background-color: aquamarine; }为什么leftdh与顶部距离很大
内容：根据代码，leftdh与顶部距离很大的原因可能是因为.qwe元素设置了justify-content: center; align-items: center;属性，使得.qwe元素垂直居中显示。如果想要调整leftdh与顶部的距离，可以通过修改.qwe的样式，将justify-content属性设置为flex-start或者flex-end来实现。</p>

原文地址: https://www.cveoy.top/t/topic/pFVc 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录