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

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

翻译: 什么是ChatGPT 通过图形化的方式来理解 Transformer 架构 深度学习一

翻译: 什么是ChatGPT 通过图形化的方式来理解 Transformer 架构 深度学习一

合集 ChatGPT 通过图形化的方式来理解 Transformer 架构 翻译: 什么是ChatGPT 通过图形化的方式来理解 Transformer 架构 深度学习一翻译: 什么是ChatGPT 通过图形化的方式来理解 Transformer 架构 深度学习二翻译: 什么是ChatGPT 通过图形化的方式来理解 Transformer 架构 深…
阅读更多...
强网杯 2019]随便注解题方式

强网杯 2019]随便注解题方式

先来看题 这里只有一个提交&#xff0c;那我们就先提交看看情况找找思路 这里提交以后发现也没有什么有用的信息 这样我们只能根据我们的经验先试试 输入1发现有报错 有报错信息就可以试试报错注入了&#xff0c;但是这种ctf题通常会有限制字符所以我使用 1 select 1,2# 来…
阅读更多...
c#数据库: 4.修改学生成绩

c#数据库: 4.修改学生成绩

将4年级的学生成绩全部修改为100分,。修改前的学生信息表如图所示: using System; using System.Collections.Generic; using System.Data.SqlClient; using System.Linq; using System.Text; using System.Threading.Tasks;namespace StudentUpdate {internal class Program{s…
阅读更多...
Apache SeaTunnel k8s 集群模式 Zeta 引擎部署指南

Apache SeaTunnel k8s 集群模式 Zeta 引擎部署指南

SeaTunnel提供了一种运行Zeta引擎(cluster-mode)的方法&#xff0c;可以让Kubernetes在本地运行Zeta引擎&#xff0c;实现更高效的应用程序部署和管理。在本文中&#xff0c;我们将探索SeaTunnel k8s运行zeta引擎(cluster-mode模式)的更多信息&#xff0c;了解如何更好地利用Ze…
阅读更多...
JavaScript基础(二)

JavaScript基础(二)

JS语法结构——引入方式 js很明显可以是一个后缀名为js的文件&#xff0c;js的引入方式和css一样&#xff0c;也有三种方式。 1.外部 使用script表现&#xff0c;只不过增加一个src属性&#xff0c;把js文件的路径src属性中。 <script src "js文件路径">&l…
阅读更多...
h5+Vant左滑删除

h5+Vant左滑删除

介绍&#xff1a;这是一个上拉加载下拉刷新的列表&#xff0c;外加左滑删除。废话不多说&#xff0c;直接上代码&#xff01;&#xff01;&#xff01;&#xff01; <template><div class"info-list"><div class"top-bar"><van-nav-…
阅读更多...
深入解析Floyd Warshall算法：原理、Java实现与优缺点

深入解析Floyd Warshall算法：原理、Java实现与优缺点

Floyd Warshall算法的简介 在我们的日常生活中&#xff0c;常常会遇到需要找出两点之间最短路径的问题。比如&#xff0c;从家到公司的最短路线&#xff0c;或者在旅行时&#xff0c;从一个景点到另一个景点的最快路线。 为了解决这类问题&#xff0c;科学家们设计出了许多算法…
阅读更多...
利用大型语言模型提升数字产品创新：提示，微调，检索增强生成和代理的应用

利用大型语言模型提升数字产品创新：提示，微调，检索增强生成和代理的应用

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
code-server容器webpack的ws无法连接解决方法

code-server容器webpack的ws无法连接解决方法

TLDR 通过指定client的wsrul去连接ws devServer.client.webSocketURL ‘wss://<Forwarded uri>/ws’ 拓扑 1、code-server: 用于编写代码、启动webpack dev-server 服务&#xff1b;[https://<domain>:8001] 2、webpack: 用于浏览dev-server服务&#xff1b;[ht…
阅读更多...
spring-boot示例

spring-boot示例

spring-boot版本&#xff1a;2.0.3.RELEASE 数据库: H2数据库 &#xff08;嵌入式内存性数据库&#xff0c;安装简单&#xff0c;方便用于开发、测试&#xff0c;不适合用于生产&#xff09; mybatis-plus框架&#xff0c;非常迅速开发CRUD
阅读更多...
如何去掉引用网址的小尾巴

如何去掉引用网址的小尾巴

引用文章的链接时会出现很长冗余信息&#xff0c;删&#xff0c;删&#xff0c;删……&#xff0c;直到从平流层删到地平线 使用 Neat URL&#xff08;支持 google 系、Firefox&#xff09;扩展中的【拦截参数】可以去除的这类百无聊赖的小尾巴。 安装后&#xff0c;点击【Pr…
阅读更多...
C语言——单链表实现数据增删查改

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

一.前言 嗨嗨嗨&#xff0c;我们又见面了。前面我们已经学习了关于数据结构中的顺序表&#xff0c;今天我们来学习数据结构中的单链表。废话不多说让我们直接开始吧。 二.正文 1.1链表的概念 链表是一种物理存储结构上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺…
阅读更多...
【C#】基础知识

【C#】基础知识

0.参考 C#语言入门详解 1.几种打印hello_world的方式 1.1 console控制台 新建一个console&#xff0c;直接打印&#xff1a; Console.WriteLine("Hello_world");启动一闪而过&#xff0c;在vs调试中选择开始执行不调试&#xff08;without debug&#xff09;。 …
阅读更多...
算法效率的判断及一些典型例题的讲解

算法效率的判断及一些典型例题的讲解

一.算法效率 1.用处&#xff1a;判断算法的好坏&#xff0c;好的算法应该是高效的 2算法效率取决于时间复杂度和空间复杂度 <1>时间复杂度 1.1概念&#xff1a;算法中基本操作的执行次数就是算法的时间复杂度 1.2表示&#xff1a;大O的渐进表示法&#xff0c;例如O(N)…
阅读更多...
java技术栈快速复习02_前端基础知识总结

java技术栈快速复习02_前端基础知识总结

前端基础 经典三件套&#xff1a; html&#xff08;盒子&#xff09;css&#xff08;样式&#xff09;JavaScript&#xff08;js&#xff1a;让盒子动起来&#xff09; html & css HTML全称&#xff1a;Hyper Text Markup Language(超文本标记语言)&#xff0c;不是编程语…
阅读更多...
记一次生产事故的排查和解决

记一次生产事故的排查和解决

一. 事故概述 春节期间, 生产系统多次出现假死不可用现象, 导致绝大部分业务无法进行. 主要表现现象为接口无法访问. 背景为900W客户表和近实时ES, 以及春节期间疫情导致的普通卖菜场景近似秒杀等. 二. 排查过程 优先排查了info, error, catalina日志, 发现以下异常: 主要的…
阅读更多...
边循环边删除List中的数据

边循环边删除List中的数据

List边循环&#xff0c;边删除&#xff1b;这种一听感觉就像是会出问题一样&#xff0c;其实只要是删除特定数据&#xff0c;就不会出问题&#xff0c;你如果直接循环删除所有数据&#xff0c;那可能就会出问题了&#xff0c;比如&#xff1a; public static void main(String[…
阅读更多...
公考学习平台|基于SprinBoot+vue的公考学习平台(源码+数据库+文档)

公考学习平台|基于SprinBoot+vue的公考学习平台(源码+数据库+文档)

公考学习平台目录 目录 基于SprinBootvue的公考学习平台 一、前言 二、系统设计 三、系统功能设计 5.1用户信息管理 5.2 视频信息管理 5.3公告信息管理 5.1论坛信息管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&…
阅读更多...
React的useEffect

React的useEffect

概念&#xff1a;useEffect是一个React Hook函数&#xff0c;组件渲染之后执行的函数 参数1是一个函数&#xff0c;可以把它叫做副作用函数&#xff0c;在函数内部可以放置要执行的操作参数2是一个数组&#xff08;可选参&#xff09;&#xff0c;在数组里放置依赖项&#x…
阅读更多...
Liunx发布tomcat项目

Liunx发布tomcat项目

Liunx在Tomcat发布JavaWeb项目 1.问题2.下载JDK3.下载Tomcat4.Tomcat本地JavaWeb项目打war包、解压、发布5.重启Tomcat,查看项目 1.问题 1.JDK 与 Tomcat 版本需匹配&#xff0c;否则页面不能正确显示 报错相关&#xff1a;Caused by: java.lang.ClassNotFoundException: java…
阅读更多...
最新文章

Copyright @ 2022~2023