网站banner代码怎么写？-凌峰创科服务平台

下面我将为你提供从最简单到最常用的几种 Banner 代码示例,并附上详细解释。

（图片来源网络，侵删）

最简单的纯图片 Banner

这是最基础的 Banner，仅显示一张静态图片，它通常用作整个网站的“头图”或欢迎区域。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">纯图片 Banner 示例</title>
    <style>
        /* 基础样式重置 */
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: Arial, sans-serif;
        }
        /* Banner 容器样式 */
        .banner-container {
            /* 宽度占满整个屏幕 */
            width: 100%;
            /* 设置一个固定高度，也可以使用 vh 单位 (e.g., height: 80vh;) */
            height: 400px; 
            /* 背景图片，这里使用一张示例图片 */
            background-image: url('https://images.unsplash.com/photo-1507675557594-2173dba999ef?q=80&w=1974&auto=format&fit=crop');
            /* 背景图片如何覆盖容器 */
            background-size: cover;
            /* 背景图片在容器中的位置 */
            background-position: center;
            /* 背景图片是否随页面滚动而固定 */
            background-attachment: fixed;
            /* 可选：添加文字居中效果 */
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
        }
        /* Banner 内部文字样式 */
        .banner-text h1 {
            font-size: 3em;
            margin: 0;
        }
        .banner-text p {
            font-size: 1.2em;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="banner-container">
        <div class="banner-text">
            <h1>欢迎来到我们的网站</h1>
            <p>探索无限可能</p>
        </div>
    </div>
    <div style="padding: 20px; text-align: center;">
        <h2>这里是网站的其他内容</h2>
        <p>向下滚动以查看背景固定效果。</p>
    </div>
</body>
</html>

代码解释

HTML:
- <div class="banner-container">: 创建一个 div 元素作为 Banner 的容器。
- <div class="banner-text">: 在容器内创建一个 div 用于放置文字内容。
CSS:
- .banner-container: 这是核心样式。
  - width: 100%: 宽度自适应屏幕。
  - height: 400px: 设置一个固定高度，你也可以使用 height: 80vh; (视口高度的80%),这样在不同设备上看起来更协调。
  - background-image: 指定要显示的图片 URL。请务必替换成你自己的图片链接。
  - background-size: cover: 确保图片会缩放以覆盖整个容器，不会留白,但可能会导致图片部分区域被裁剪。
  - background-position: center: 将图片的中心对准容器的中心。
  - background-attachment: fixed: 让背景图片在页面滚动时保持固定，产生视差效果，如果不需要,可以删除这行。
- .banner-text: 使用 Flexbox (display: flex, justify-content: center, align-items: center) 将其内部的文字完美地居中显示。

带有链接和悬停效果的图片 Banner

这是最常见的 Banner 类型，点击整个 Banner 或其中的某个元素可以跳转到指定页面。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">带链接的 Banner 示例</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
        }
        .banner-link {
            display: block; /* 关键：让 a 标签可以设置宽高 */
            width: 100%;
            height: 350px;
            background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop');
            background-size: cover;
            background-position: center;
            text-decoration: none; /* 去掉链接的下划线 */
            position: relative; /* 为绝对定位的子元素提供参考 */
        }
        .banner-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
            color: white;
            padding: 20px;
            text-align: center;
            transform: translateY(100%); /* 初始状态：遮罩移出可视区域 */
            transition: transform 0.3s ease-in-out; /* 添加过渡动画 */
        }
        .banner-link:hover .banner-overlay {
            transform: translateY(0); /* 悬停时：遮罩移入可视区域 */
        }
        .banner-link:hover {
            opacity: 0.9; /* 悬停时整体变暗一点 */
        }
    </style>
</head>
<body>
    <!-- 整个 Banner 作为一个可点击的链接 -->
    <a href="https://www.example.com/products" class="banner-link">
        <div class="banner-overlay">
            <h2>查看我们的新品</h2>
            <p>立即探索，限时优惠！</p>
        </div>
    </a>
</body>
</html>

代码解释

HTML:
- <a href="...">: 将整个 Banner 容器包裹在一个链接标签中,这样点击任何地方都会跳转。
- <div class="banner-overlay">: 在链接内部创建一个用于放置文字的遮罩层。
CSS:
- .banner-link:
  - display: block: 这是关键，默认 <a> 是行内元素，不能直接设置宽高。display: block 使其变成块级元素,可以应用宽高样式。
- .banner-overlay:
  - position: absolute: 使其相对于父容器 .banner-link 进行定位。
  - background-color: rgba(0, 0, 0, 0.5): 创建一个半透明的黑色背景,让文字在图片上更清晰可读。
  - transform: translateY(100%): 使用 CSS transform 将遮罩层向下移动自身100%的高度，使其初始时隐藏在 Banner 下方。
- 悬停效果:
  - .banner-link:hover .banner-overlay: 当鼠标悬停在 .banner-link 上时，选择其内部的 .banner-overlay 元素。
  - transform: translateY(0): 将遮罩层移回原位,实现从下方滑入的效果。
  - transition: 为 transform 属性添加平滑的过渡动画,让效果不那么生硬。

多图轮播 Banner

轮播 Banner 可以展示多张图片或内容，并自动或手动切换，非常适合展示促销活动、产品亮点等。

实现方式：使用纯 CSS（简单）

这种方法不依赖 JavaScript，通过 CSS 的 checked 伪类和 target 伪类来实现切换,但交互性稍差。

（图片来源网络，侵删）

更推荐使用 JavaScript 或现成的轮播图库，如 Swiper.js 或 Owl Carousel，它们功能强大、兼容性好且易于使用。

下面是一个使用 Swiper.js 的示例,这是目前最流行和推荐的做法。

代码示例 (使用 Swiper.js)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">轮播 Banner 示例 (Swiper.js)</title>
    <!-- 1. 引入 Swiper 的 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .swiper {
            width: 100%;
            height: 500px; /* 轮播图高度 */
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover; /* 确保图片填充整个 slide */
        }
    </style>
</head>
<body>
    <!-- 2. 定义轮播图结构 -->
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-1.jpg" alt="Banner 1">
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-2.jpg" alt="Banner 2">
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-3.jpg" alt="Banner 3">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <!-- 3. 引入 Swiper 的 JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <!-- 4. 初始化轮播图 -->
    <script>
        var swiper = new Swiper(".mySwiper", {
            // 可以在这里配置各种参数
            loop: true, // 循环模式
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            // 自动播放
            autoplay: {
                delay: 2500, // 切换延迟时间，单位毫秒
                disableOnInteraction: false, // 用户操作后是否停止自动播放
            },
        });
    </script>
</body>
</html>

代码解释

引入资源: 在 <head> 中引入 Swiper 的 CSS 文件，在 <body> 结束前引入 Swiper 的 JS 文件，我们使用 CDN (内容分发网络) 链接,方便快捷。
HTML 结构:
- <div class="swiper mySwiper">: 这是轮播图的主容器。
- <div class="swiper-wrapper">: 包含所有轮播项的包装器。
- <div class="swiper-slide">: 单个轮播项，里面可以放图片、文字、视频等任何内容。
- 其他可选组件如分页器 (.swiper-pagination)、导航按钮 (.swiper-button-next/prev)、滚动条 (.swiper-scrollbar)。
初始化 (JavaScript):
- 在 <script> 标签中，new Swiper(".mySwiper", {...}) 是初始化轮播图的核心代码。
- ".mySwiper" 是你想要初始化的那个轮播图容器的 CSS 类名。
- 内部是配置对象，你可以在这里设置轮播图的行为，如是否循环 (loop)、是否显示分页器 (pagination)、是否自动播放 (autoplay) 等。

总结与建议

Banner 类型	优点	缺点	适用场景
纯图片 Banner	代码最简单，加载快	功能单一，无交互	网站首页头图、品牌展示
带链接的 Banner	增加了可点击性，引导用户	需要写一点 CSS 悬停效果	产品推广、活动宣传、广告位
轮播 Banner	信息量大，动态吸引眼球	代码复杂，依赖 JS 或库	展示多个产品、新闻、合作伙伴

给你的建议：

新手或简单需求：从 第1种 或 第2种 开始，它们能解决80%的 Banner 需求。
需要展示多张图片：强烈推荐使用 第3种 (Swiper.js)，不要自己从头写轮播逻辑，直接使用成熟的库可以节省大量时间并避免各种 bug。
响应式设计：无论选择哪种方式，都请确保你的 Banner 在手机、平板和电脑上都能良好显示，通常使用 width: 100% 和 height: auto 或 vh 单位可以实现基本响应式。

（图片来源网络，侵删）

网站banner代码怎么写？

最简单的纯图片 Banner

代码示例

代码解释

带有链接和悬停效果的图片 Banner

代码示例

代码解释

多图轮播 Banner

实现方式：使用纯 CSS（简单）

代码示例 (使用 Swiper.js)

代码解释

总结与建议

99ANYc3cd6

ecshop网站报价

网站更换banner

新电脑怎么装系统win10

网站制作规划的核心要点有哪些？

ubuntu配置samba服务器

极品五笔输入法官方下载电脑版，哪里能安全下载？

建一个网站要花多少钱？

emule xtreme服务器怎么连接？稳定吗？

联想电脑亮度怎么调？

济南哪家网站公司做得好？

网站更换banner

android 上传文件到服务器

笔记本CPU能随意更换吗？

笔记本电脑4000左右推荐

Windows系统如何搭建PPPoE服务器？

Win10如何添加此电脑图标到桌面？

网站banner代码怎么写？

最简单的纯图片 Banner

代码示例

代码解释

带有链接和悬停效果的图片 Banner

代码示例

代码解释

多图轮播 Banner

实现方式：使用纯 CSS（简单）

代码示例 (使用 Swiper.js)

代码解释

总结与建议

相关推荐

极品五笔输入法官方下载电脑版，哪里能安全下载？