织梦CMS页面如何加浮动图片？-织梦建站-盈思创科技

使用后台自定义HTML（最简单、最推荐）

这是最直接、最安全的方法，适合添加简单的浮动图片，并且不会影响模板文件。

（图片来源网络，侵删）

适用场景：添加一个固定的客服图片、二维码等。

操作步骤：

登录织梦后台：使用你的管理员账号登录织梦CMS后台。
进入自定义页面：在左侧菜单栏中，找到并点击 【核心】 -> 【网站栏目管理】。
（图片来源网络，侵删）
选择“自定义”栏目：在栏目列表中，找到名为 “自定义” 的栏目（系统自带，通常在列表最下面），点击它进入。

如果找不到“自定义”栏目，你可能需要先创建一个，点击“添加顶级栏目”，选择“频道封面”，栏目类型选“普通栏目”，然后确定即可。
添加自定义内容页：
- 点击进入“自定义”栏目后，点击右上角的 【增加一个自定义页面】 按钮。
- 页面名称：给你的浮动图片起个名字，浮动客服图片”。
- 会显示在浏览器标签页上，可以写“在线客服”。
- SEO关键词：可以写“在线客服,QQ客服”等，对SEO有益。
- SEO描述：简要描述页面内容。
- 这是最关键的一步,在这里输入实现浮动效果的 HTML和CSS代码。

粘贴代码：将下面的代码复制并粘贴到“内容”编辑器中。

（图片来源网络，侵删）

<!-- HTML 结构 -->
<div id="float-img-container">
    <a href="https://wpa.qq.com/msgrd?v=3&uin=你的QQ号码&site=qq&menu=yes" target="_blank">
        <img src="/images/kefu.png" alt="在线客服" title="点击咨询">
    </a>
</div>
<!-- CSS 样式 (可以直接放在HTML的style标签里) -->
<style>
    #float-img-container {
        position: fixed; /* 固定定位 */
        right: 20px;     /* 距离右边20px */
        bottom: 100px;   /* 距离底部100px */
        z-index: 9999;   /* 确保图片在最上层，不被其他元素遮挡 */
    }
    #float-img-container img {
        width: 100px;    /* 设置图片宽度 */
        height: auto;    /* 高度自适应，保持比例 */
        border-radius: 8px; /* 可选：添加圆角 */
        box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 可选：添加阴影效果 */
        transition: transform 0.3s ease; /* 可选：添加鼠标悬停放大效果 */
    }
    #float-img-container img:hover {
        transform: scale(1.1); /* 鼠标悬停时放大1.1倍 */
    }
</style>

代码说明：

id="float-img-container"：给浮动容器一个唯一的ID，方便CSS定位。
position: fixed;：这是实现“浮动”效果的核心CSS属性，它会让元素相对于浏览器窗口固定位置，即使页面滚动也不会移动。
right 和 bottom：控制图片在窗口中的位置，你可以根据需要调整数值。
z-index: 9999;：设置一个很高的层级，确保你的图片会显示在页面所有内容的上方。
href="..."：将图片链接到你的客服QQ或联系方式，请务必将 你的QQ号码 替换成真实的QQ号。
src="/images/kefu.png"：这是图片的路径，请确保你的图片已经上传到网站服务器的 /images/ 目录下，并替换成你自己的图片路径。

生成HTML：
- 填写完所有信息后,点击页面底部的 【更新】 或 【生成】 按钮。
- 系统会提示你生成页面,点击确定。
查看效果：
- 清空浏览器缓存,或者按 Ctrl + F5 强制刷新你的网站首页，你应该能看到右下角出现了一个浮动的图片。

修改模板文件（更灵活、更专业）

如果你想让浮动图片在网站的所有页面都显示，或者它和你的网站主题设计紧密相关，那么直接修改模板文件是更好的选择。

适用场景：全站通用的返回顶部按钮、全站客服等。

操作步骤：

找到模板文件：织梦的首页模板文件通常位于 templets/你的默认模板文件夹/ 目录下，文件名为 index.htm，如果你想让浮动图片在所有栏目页都显示，则需要修改 list_article.htm。
编辑模板：使用代码编辑器（如VS Code, Sublime Text, Dreamweaver）打开你想要修改的模板文件。

插入代码：在模板文件的 <head> 标签内插入CSS代码，在 <body> 标签内的最底部（在 </body> 之前）插入HTML代码。

示例：修改 index.htm

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{dede:global.cfg_webname/}</title>
    <link rel="stylesheet" href="/templets/default/style.css">
    <!-- 在这里插入CSS代码 -->
    <style>
        #float-img-container {
            position: fixed;
            right: 20px;
            bottom: 100px;
            z-index: 9999;
        }
        #float-img-container img {
            width: 100px;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <!-- 这里是你网站原有的所有内容 -->
    {dede:include filename="head.htm"/}
    <div class="main">
        <!-- 首页内容... -->
    </div>
    {dede:include filename="footer.htm"/}
    <!-- 在</body>标签之前插入HTML代码 -->
    <div id="float-img-container">
        <a href="https://wpa.qq.com/msgrd?v=3&uin=你的QQ号码&site=qq&menu=yes" target="_blank">
            <img src="/images/kefu.png" alt="在线客服" title="点击咨询">
        </a>
    </div>
</body>
</html>

保存并更新：
- 保存修改后的模板文件。
- 登录织梦后台,点击 【生成】 -> 【更新主页HTML】（或更新对应页面）。
查看效果：刷新网站，即可看到浮动图片。

使用JS调用（动态、可交互）

如果你的浮动图片需要更复杂的交互,比如滚动一定距离后才显示，或者点击后有关闭功能，那么使用JavaScript会更合适。

操作步骤：

创建JS文件：在你的模板目录下（/templets/default/js/）创建一个新的JS文件，命名为 float-ad.js。

编写JS代码：在 float-ad.js 文件中写入以下代码（这是一个“滚动显示/隐藏”的例子）：

document.addEventListener('DOMContentLoaded', function() {
    // 获取浮动图片元素
    const floatImg = document.getElementById('float-img-container');
    // 如果找不到元素，则不执行后续代码
    if (!floatImg) return;
    let lastScrollTop = 0;
    const scrollThreshold = 100; // 滚动超过100px才触发
    window.addEventListener('scroll', function() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        // 向下滚动时隐藏，向上滚动时显示
        if (scrollTop > lastScrollTop && scrollTop > scrollThreshold) {
            // 向下滚动
            floatImg.style.transform = 'translateY(150%)'; // 向下移出屏幕
        } else {
            // 向上滚动
            floatImg.style.transform = 'translateY(0)';    // 回到原位
        }
        lastScrollTop = scrollTop;
    });
    // 点击关闭按钮的功能
    const closeBtn = floatImg.querySelector('.close-btn');
    if (closeBtn) {
        closeBtn.addEventListener('click', function() {
            floatImg.style.display = 'none';
        });
    }
});

修改模板文件：在模板的 <head> 标签内引入这个JS文件，并确保HTML结构包含关闭按钮。

<head>
    <!-- ... 其他head内容 ... -->
    <script src="/templets/default/js/jquery.min.js"></script> <!-- 如果需要用到jQuery -->
    <script src="/templets/default/js/float-ad.js"></script>   <!-- 引入我们的JS文件 -->
</head>
<body>
    <!-- ... 网站原有内容 ... -->
    <!-- 在</body>前添加HTML -->
    <div id="float-img-container">
        <span class="close-btn" style="position:absolute; top:-10px; right:-10px; width:20px; height:20px; background:#f00; color:#fff; text-align:center; line-height:20px; cursor:pointer; border-radius:50%;">×</span>
        <a href="https://wpa.qq.com/msgrd?v=3&uin=你的QQ号码&site=qq&menu=yes" target="_blank">
            <img src="/images/kefu.png" alt="在线客服">
        </a>
    </div>
</body>

更新并查看：保存模板和JS文件，然后在后台生成页面，当你向下滚动页面时，图片会隐藏；向上滚动时，图片会显示，点击右上角的 "×" 可以关闭它。

总结与建议

方法	优点	缺点	适用场景
自定义HTML	简单、安全、不修改模板，适合非技术人员。	只能作用于单个页面（自定义页面）。	添加单个客服、二维码、广告等。
修改模板	灵活、专业，可作用于全站或特定页面。	需要修改文件，有一定风险（操作不当可能导致网站错乱）。	全站通用的返回顶部、固定导航等。
JS调用	功能强大、交互性好，可实现复杂动态效果。	需要一定的JS知识，代码稍复杂。	需要滚动触发、点击关闭等高级交互的场景。

对于大多数用户来说,方法一 是最简单、最实用的选择，如果你是网站开发者或管理员，熟悉模板结构，方法二 会让你更得心应手。方法三 则是当你需要更酷炫效果时的进阶选择。

织梦CMS页面如何加浮动图片？

使用后台自定义HTML（最简单、最推荐）

修改模板文件（更灵活、更专业）

使用JS调用（动态、可交互）

总结与建议

相关文章

目录[+]