手把手实现一个简约酷美美的版权声明模块

news2024/11/18 11:20:28

1. 导语

版权声明在很多网站都有用到，出场率还是很高的。所以今天就实现一个属于自己分风格的版权声明模块，技术上采用原生的前端三剑客:

  • HTML
  • CSS
  • JavaScript(可能会用到)

比如CSDN的版权声明是这样的

image-20240501135811558

2. 需求分析

先看看成品吧，这篇文字结束的时候，我们大概做出来的样子就是下面这样的:

目前这个版本已经用在了我的博客网站中，欢迎随时去look look，感受一下结合实际应用的效果。直通车

image-20240501135415704

从整体的效果来看，它的实现并不复杂，作为一个名后端开发者，我都能一眼看出来结构，甚至脑阔都能浮现出来大致的代码实现了。

整体就是一个外在的盒子，里面包含了几个简单的内容元素，用来声明版权信息，盒子内左侧有一个显眼包，一个大大的版 字贯穿带有一定宽度的竖条，显式的表达出它的中心立意：”劳资的作用就是版权声明！“。

大体就是这样子的啦，但在具体的实现中，还是有很多细节的，比如版权的版字的摆放位置的设计和代码中的计算方式等等。

3 . 代码实现

  • 整个模板先

为了方便阅读，这里采用外部JS和CSS导入的方式，分三个文件进行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>包含外部文件的HTML模板</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a simple example of including external JavaScript and CSS files in an HTML template.</p>
    <script src="script.js"></script>
</body>
</html>
  • 把结构草图搞出来

没什么技术含量，直接div>span*4加enter即可完成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>包含外部文件的HTML模板</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <script src="script.js"></script>
</body>
</html>

为了方便分析，先给盒子点颜色看看，并将版权的信息加上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>包含外部文件的HTML模板</title>
    <link rel="stylesheet" href="./copyright.css">
</head>
<body>
    <div class="info-box">
        <div>
            <span>本文作者:</span> Gemini48
        </div>
        <div>
            <span>授权公众号:</span> 八尺妖剑
        </div>
        <div>
            <span>博客地址:</span> <a href='https://www.ilikexff.cn' style='color: #3f60de'>https://www.ilikexff.cn</a>
        </div>
        <div>
            <span>声明:</span> 本博客所有文章除特别声明外，均采用 <a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' style='color: #3f60de'>©BY-NC-SA</a> 许可协议。转载请注明出处及本声明！
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

简单搞点样式，调整一下格式。这里有些样式不是必须的，只是为了方便查看结构用的，比如外边框的蓝色等等。

.info-box {
    margin: 20px;
    padding: 10px;
    border: 1px solid #3cb5ec;
}

.info-box div {
    margin-bottom: 10px;
    color: black;
    font-weight: bolder;
}

.info-box span, .info-box a {
    font-weight: bold;
    color: gray;
}

.info-box a {
    color: #3f60de;
}

效果如下:

image-20240501144945725

  • 设置左侧竖形的版权条，原理比较简单，其实就是一个设置一定宽度的div，因此我们需要再次调整整体的结构：
    <div class="post-html-copyright">
        <div>
        
        <div class="vertical-line">   

        <div class="square-box">
        版 
        
        </div>
        <!--版权条目信息-->
        <div>
            <span>本文作者:</span> Gemini48
        </div>
        <div>
            <span>授权公众号:</span> 八尺妖剑
        </div>
        <div>
            <span>博客地址:</span> <a href='https://www.ilikexff.cn' style='color: #3f60de'>https://www.ilikexff.cn</a>
        </div>
        <div>
            <span>声明:</span> 本博客所有文章除特别声明外，均采用 <a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' style='color: #3f60de'>©BY-NC-SA</a> 许可协议。转载请注明出处及本声明！
        </div>


        </div>

    </div>

image-20240501145743300

可以看到，大体的效果就是这样，现在主要是通过CSS样式进一步美化和结构调整。

先从最外层的盒子开始:

  • 加一个背景颜色，虽然这里默认就是FFFFFF白，但加上这个样式可以方便后续根据需求直接修改颜色即可
  • 处理一下边框弧度，仔细看实现好的贴图，它最外层边框其实是有一定弧度的，很微妙，不容易察觉而已。
  • 设置边框阴影效果
  • 注意到盒子上下边框固定位置分别有两条红颜色的线条效果，并且上下两条所处的位置都是绝对左右严格对齐的，而相对位置上，又具有一定的位移差，凸显出一种非对称偏差的美感。
  • 这个效果将会用到linear-gradient属性完成
  • 为了帮助理解，后续的代码都会加上注释，请结合注释食用。
/* 设置宽度为65% */
width: 65%;

/* 设置外边距为20px */
margin: 20px;

/* 设置内边距为10px */
padding: 10px;

/* 设置边框为2px宽，颜色为#e80e5a */
border: 2px solid #e80e5a;

/* 设置背景颜色为白色 */
background-color: #ffffff;

/* 设置边框圆角为1px */
border-radius: 1px;

/* 设置阴影效果 */
box-shadow: 12px 12px 15px rgb(155, 172, 186);

/* 设置变换效果的过渡时间为0.3秒，缓动函数为ease-in-out */
transition: transform 0.3s ease-in-out;

/* 设置边框图案 */
border-image: linear-gradient(45deg, transparent 30%, #e80e5a 30%, #e80e5a 70%, transparent 70%) 1;

/* 水平居中 */
margin: 0 auto;

实时效果:

image-20240501151054472

到此为止，距离最终的效果就一步之遥了，主要就是放在版字的处理上了。

对于这部分，我们先把左侧垂直的面条处理了

.vertical-line {
  /*相对定位*/  
  position: relative;
}

.vertical-line::before {
    /* 创建一个空内容的伪元素 */
    content: '';
    
    /* 使用绝对定位，相对于最近的已定位父元素 */
    position: absolute;
    
    /* 从父元素的顶部开始定位 */
    top: 0;
    
    /* 从父元素的左侧开始定位 */
    left: 0;
    
    /* 水平方向平移使竖线居中 */
    transform: translateX(-50%);
    
    /* 竖线的宽度 */
    width: 5px;
    
    /* 竖线的高度占据整个父元素的高度 */
    height: 100%;
    
    /* 竖线的背景颜色 */
    background-color: #e80e5a;
}

可以通过伪元素 ::before 在元素的内部插入一个空内容的元素，并对该伪元素应用样式来实现垂直线的效果。

  • content: '';：这个属性在伪元素中是必须的，用于指定伪元素的内容为空。
  • position: absolute;：将伪元素绝对定位，相对于最近的已定位父元素。
  • top: 0; 和 left: 0;：将伪元素放置在父元素的左上角。
  • transform: translateX(-50%);：通过 transform 属性将伪元素水平居中，translateX(-50%) 表示沿着 X 轴向左平移元素的宽度的一半。
  • width: 5px;：设置竖线的宽度为 5px。
  • height: 100%;：设置竖线的高度与父元素相同，即铺满整个父元素的高度。
  • background-color: #e80e5a;：设置竖线的背景颜色为 #e80e5a，这是竖线的颜色。

image-20240501152030387

最后一步，调整 版字的位置：

.square-box {
    /* 设置方块的宽度为20px */
    width: 20px;

    /* 设置方块的高度为20px */
    height: 20px;

    /* 设置方块的背景颜色为 #e80e5a */
    background-color: #e80e5a;;

    /* 设置文本颜色为白色 */
    color: white;

    /* 文本水平居中 */
    text-align: center;

    /* 设置行高为20px，使文本垂直居中 */
    line-height: 20px;

    /* 绝对定位 */
    position: absolute;

    /* 设置距离顶部距离为父元素高度的30% */
    top: 30%;

    /* 设置距离左侧距离为0 */
    left: 0;

    /* 将方块水平垂直居中 */
    transform: translate(-50%, -50%);
}

image-20240501152713876

从效果来看，似乎已经100%实现了贴图的效果，不过仔细观察还是会发现有一些瑕疵，比如竖条和右侧的文字信息的关系似乎过于亲密了，不行，得让它们明白什么叫距离产生美。

.post-html-copyright span {
    margin-left: 15px;
}

最终修改之后的成品和原图效果:

image-20240501154501727

其他细节就不全部贴这里了，最终的代码我会全部放在GitHub和CodePen上面，需要的自取。

4. 功能扩展

在实际的业务中，一般情况下，用户如果复制了携带版权声明的文章，这个版权声明也会一并被复制到剪切板。基于这个需求，我们在上面的基础上扩展一个版权信息的复制功能。

4.1 如何实现

  • 我们需要先获取到要复制的文本内容。这里可以使用选择器去实现。
  • 使用navigator.clipboard方法实现内容的复制，为了用户体验，建议在版权内容上面添加 **版权信息:**几个字。
  • 同时不能将竖条中的 版 字复制进去。这块可以使用replace函数解决。

下面是这个思路的实现:

// 获取版权信息
const originalCopyright = document.querySelector('.post-html-copyright .vertical-line').innerText.replace("复制","").replace("版","");

// 创建复制按钮
const copyButton = document.querySelector('.copy-button');
copyButton.addEventListener('click', async () => {
    try {
        // 将版权信息复制到剪贴板
        await navigator.clipboard.writeText('版权信息:\n' + originalCopyright);
        // 显示复制成功提示
        alert('版权信息已复制到剪贴板！');
    } catch (err) {
        // 处理复制失败的情况
        console.error('复制失败:', err);
        alert('复制失败，请手动复制！');
    }
});

复制之后粘贴出来的效果：

版权信息:

本文作者: Gemini48
授权公众号: 八尺妖剑
博客地址: https://www.ilikexff.cn
声 明: 本博客所有文章除特别声明外，均采用 ©BY-NC-SA 许可协议。转载请注明出处及本声明！

  • 优化

上面的代码虽然功能实现了，但是在提示上使用了alert()，这种方式需要用户每次都手动关闭，很影响用户的体验，因此下面将自定义一个通知函数，实现自动关闭的轻量化通知功能。

// 显示通知函数
function showNotification(type, message) {
    const notification = document.createElement('div');
    notification.classList.add('notification', type);
    notification.innerText = message;
    document.body.appendChild(notification);

    // 在一段时间后移除通知
    setTimeout(() => {
        document.body.removeChild(notification);
    }, 3000); // 3秒后移除通知
}

image-20240501163541941

显然，初步的效果是实现了，自动关闭也没问题，但提示的显示位置一般放在屏幕左右侧和顶部居中位置并且有一定的过度动画(参考Element-Plus框架中通知组件的设计)。所以针对这个问题再优化一下:

/*自定义通知*/
.notification {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: rgb(63, 223, 169);
    padding: 10px 20px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.5s;
}

.notification.show {
    opacity: 1;
}

调整通知函数：

// 显示通知函数
function showNotification(type, message) {
    const notification = document.createElement('div');
    notification.classList.add('notification', type);
    notification.innerText = message;
    document.body.appendChild(notification);

    // 触发重绘
    void notification.offsetWidth;

    notification.classList.add('show');

    // 在一段时间后移除通知
    setTimeout(() => {
        notification.classList.remove('show');
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 500); // 等待过渡动画结束后再移除通知
    }, 3000); // 3秒后移除通知
}

image-20240501165310953

嗯哼，差不多了，就实用和美感来说，已经达到 了一个业余前端码农的审美要求了，再继续美化就和Element-Plus一样了，那我为什么不直接用它？

现在还有个小瑕疵，注意看右小角的 复制 按钮，丑不拉吉!虽然这是写文章用的演示，但作为般完美主义的强迫症患者，实在是看不下去，再美化下吧。

此时此刻的美化思路有二：

  • 将复制按钮调整到右上角并简单加点样式；
  • 不用按钮，通过组合键的方式触发复制事件，用户鼠标移动到版权信息区域的时候给出提示，比如

请按下Space + C复制版权信息。

这里先采用第一种方案实现，后面这种留给有缘人当作家庭作业！！

/* 复制样式 */
.copy-button {
    position:absolute;
    top: -6px;
    right:405px;
    transform: translate(50%, 50%);
    background-color: rgba(255, 255, 255, 0.7); /* 使用rgba来设置背景颜色和透明度 */
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

image-20240501171923628

5. 小完结撒花

项目地址:

  • CodePen
  • GitHub
  • GitCode

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1637246.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

初始计算机网络

初始计算机网络

TCP/IP TCP/IP模型 TCP/IP网络模型&#xff1a;对于不同设备之间的通信&#xff0c;就需要网络通信&#xff0c;而设备是多样性的&#xff0c;所以要兼容多种多样的设备&#xff0c;就协商出了一套通用的网络协议。 TCP/IP分层 这个网络协议是分层的&#xff0c;每一层都有…
阅读更多...
向gitee推送项目

向gitee推送项目

步骤很详细&#xff0c;直接上教程 在gitee新建项目并复制链接 在当前项目目录打开git bash 输入以下指令进行初始化 git init配置个人信息 git config --global user.name 你的昵称 git config --global user.email 账号绑定的邮箱 5. 绑定远程仓库地址 git remote add ori…
阅读更多...
机器人正反向运动学（FK和IK）

机器人正反向运动学（FK和IK）

绕第一个顶点可以沿Z轴转动&#xff0c;角度用alpha表示 绕第二个点沿X轴转动&#xff0c;角度为Beta 第三个点沿X轴转动&#xff0c;记作gama 这三个点构成姿态&#xff08;pose&#xff09; 我们记第一个点为P0&#xff0c;画出它的本地坐标系&#xff0c;和世界坐标系一样红…
阅读更多...
Java面试八股之Java中数组有没有length()方法？String呢？为什么？

Java面试八股之Java中数组有没有length()方法？String呢？为什么？

Java中数组有没有length()方法&#xff1f;String呢&#xff1f;为什么&#xff1f; 数组&#xff1a; 数组没有名为length()的方法&#xff0c;但有一个属性叫做length。可以通过数组名直接访问这个属性来获取数组的长度&#xff08;即元素个数&#xff09;。这是一个整数值&…
阅读更多...
3-2 STM32c8t6实现流水灯

3-2 STM32c8t6实现流水灯

实物接线如下&#xff1a; 软件代码 #include "stm32f10x.h" // Device header #include "delay.h" int main(void) {RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA,ENABLE); //开启时钟GPIO_InitTypeDef GPIO_InitStructure;GPIO_Init…
阅读更多...
中国移动首批12个智算中心节点投产暨移动云智算产品体系正式发布

中国移动首批12个智算中心节点投产暨移动云智算产品体系正式发布

4月28日&#xff0c;中国移动在苏州隆重举办了2024中国移动算力网络大会。其中&#xff0c;以“智算凌云 慧联九州”为主题的一体化算力网络新基建论坛上&#xff0c;中国移动重磅发布了首批12个智算中心节点投产和智算产品体系。 中国移动响应国家号召&#xff0c;依托算力网络…
阅读更多...
深度学习之基于YOLOv5智慧交通拥挤预警检测系统

深度学习之基于YOLOv5智慧交通拥挤预警检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 随着城市化进程的加速和人口规模的不断增长&#xff0c;交通拥挤问题日益严重。传统的交通拥挤预警方…
阅读更多...
goget配置多个golang 运行环境

goget配置多个golang 运行环境

一台主机安装多个golang 运行环境 本环境 windows10 为 基础 mac linux也可以按照此方法操作 背景 开发不同的运维工具会用到不同版本的golang&#xff0c;但是开发者不能一直进行重装来处理 &#xff0c;因此 需要一个工具进行golang版本的管理 go管理工具介绍 gvm (Go V…
阅读更多...
【报错处理】ib_write_bw执行遇到Couldn‘t listen to port 18515原因与解决办法？

【报错处理】ib_write_bw执行遇到Couldn‘t listen to port 18515原因与解决办法？

要点 要点&#xff1a; ib默认使用18515端口 相关命令&#xff1a; netstat -tuln | grep 18515 ib_write_bw --help |grep port# server ib_write_bw --ib-devmlx5_1 --port88990 # client ib_write_bw --ib-devmlx5_0 1.1.1.1 --port88990现象&#xff1a; 根因&#xff…
阅读更多...
蓝桥杯如何准备国赛？

蓝桥杯如何准备国赛？

目录 一、赛前准备 1、如何刷题&#xff0c;刷哪些题&#xff1f; 2、记录&#xff08;主要看个人习惯&#xff09; CSDN博客 写注释 3、暴力骗分 4、从出题人的角度出发&#xff0c;应该如何骗分 二、赛中注意事项 一、赛前准备 1、如何刷题&#xff0c;刷哪些题&…
阅读更多...
24.什么是跨域？解决方案有哪些？

24.什么是跨域？解决方案有哪些？

为什么会出现跨域问题 存在浏览器同源策略&#xff0c;所以才会有跨域问题。那么浏览器是出于何种原因会有跨域的限制呢。其实不难想到&#xff0c;跨域限制主要的目的就是为了用户的上网安全。 同源策略导致的跨域是浏览器单方面拒绝响应数据&#xff0c;服务器端是处理完毕…
阅读更多...
OPC UA与IEC61499 在分布式智能电网中的应用

OPC UA与IEC61499 在分布式智能电网中的应用

储能系统的系统架构 CMC &#xff1a;Cell Management Controller 储能设备中的电池芯包与电池均衡系统构成电池模组&#xff0c;国内的电池芯包通常使用被动均衡技术&#xff0c;被动均衡芯片通常通过SPI 接口连接到CMC 控制器&#xff0c;CMC 以单片机为主构建&#xff0c;具…
阅读更多...
C语言——单链表实现数据增删查改

C语言——单链表实现数据增删查改

一.前言 嗨嗨嗨&#xff0c;我们又见面了。前面我们已经学习了关于数据结构中的顺序表&#xff0c;今天我们来学习数据结构中的单链表。废话不多说让我们直接开始吧。 二.正文 1.1链表的概念 链表是一种物理存储结构上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺…
阅读更多...
“云卷数潮”云原生数据库分论坛亮点回顾！

“云卷数潮”云原生数据库分论坛亮点回顾！

4月29日&#xff0c;2024中国移动算力网络大会“云卷数潮”云原生数据库分论坛在江苏苏州举行。本次论坛不仅是技术交流的盛宴&#xff0c;更是行业发展趋势的风向标。论坛汇聚了众多企业领袖、专家学者及行业精英&#xff0c;共话云原生数据库技术发展&#xff0c;探讨行业最新…
阅读更多...
无人机+大载重+长航时：油电混动多旋翼无人机技术详解

无人机+大载重+长航时：油电混动多旋翼无人机技术详解

多旋翼无人机是一种具有三个及以上旋翼轴的特殊的无人驾驶旋翼飞行器。具有稳定性强、操控简单、勤务性高、价格便宜等优势&#xff0c;因此在市场上的应用非常广泛。此外&#xff0c;利用地面供电的绳系多旋翼通过电缆向多旋翼持续传输电能&#xff0c;可以大大提高多旋翼的空…
阅读更多...
QT程序通过GPIB-USB-HS转接线控制数字万用表

QT程序通过GPIB-USB-HS转接线控制数字万用表

1、硬件准备 1.1、数字万用表 型号 &#xff1a;Agilent 34401A 前面图示&#xff1a; 后面图示&#xff1a;有GPIB接口 1.2、GPIB-USB-HS转接线 2、GPIB协议基础了解 2.1、引脚 8条数据线&#xff1a;DIO1 ~ DIO8 5条管理线&#xff1a;IFC、ATN、REN、EOI、SRQ 3条交握线…
阅读更多...
2024年五一杯高校数学建模竞赛（C题） 建模解析| 冲击地压危险预测 |小鹿学长带队指引全代码文章与思路

2024年五一杯高校数学建模竞赛（C题） 建模解析| 冲击地压危险预测 |小鹿学长带队指引全代码文章与思路

我是鹿鹿学长&#xff0c;就读于上海交通大学&#xff0c;截至目前已经帮200人完成了建模与思路的构建的处理了&#xff5e; 本篇文章是鹿鹿学长经过深度思考&#xff0c;独辟蹊径&#xff0c;通过滑动平均法解决冲击地压危险预测问题。实现综合建模。独创复杂系统视角&#xf…
阅读更多...
Android滑动冲突解决方案面试问题及回答

Android滑动冲突解决方案面试问题及回答

问题 1: 什么是滑动冲突&#xff1f;在Android开发中常见哪些类型&#xff1f; 答案: 滑动冲突通常发生在多个滑动组件&#xff08;如ScrollView, ListView, ViewPager等&#xff09;嵌套使用时&#xff0c;各个组件对同一个滑动事件的响应发生冲突。常见的类型包括垂直滑动冲…
阅读更多...
Flask教程1：flask框架基础入门，路由、模板、装饰器

Flask教程1：flask框架基础入门，路由、模板、装饰器

文章目录 一、 简介二、 概要 一、 简介 Flask是一个非常小的Python Web框架&#xff0c;被称为微型框架&#xff1b;只提供了一个稳健的核心&#xff0c;其他功能全部是通过扩展实现的&#xff1b;意思就是我们可以根据项目的需要量身定制&#xff0c;也意味着我们需要学习各…
阅读更多...
算法：双指针题目练习

算法：双指针题目练习

目录 题目一&#xff1a;移动零 题目二&#xff1a;复写零 题目三&#xff1a;快乐数 题目四&#xff1a;盛最多水的容器 题目五&#xff1a;有效三角形的个数 题目六&#xff1a;和为s的两个数字(剑指offer) 题目七&#xff1a;三数之和 题目八&#xff1a;四数之和 常…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023