首页IT科技网站备案图标及编号([vue]提供一种网站底部备案号样式代码)

网站备案图标及编号([vue]提供一种网站底部备案号样式代码)

时间2025-07-03 15:16:04分类IT科技浏览9561
导读:演示 vue组件型(可直接用)...

演示

vue组件型(可直接用)

组件代码:copyright-icp.vue

<template> <div class="icp">{{`© ${year} ${author} `}}<a href="http://beian.miit.gov.cn/" target="_blank">{{ record }}</a></div> </template> <script setup> let year = new Date().getFullYear(); // 一般都是最新的一年 let author = alsoeasy; // 作者名 let record = 湘ICP备2023xxxxxx号; // 备案号 </script> <style> .icp { position: absolute; bottom: 0px; padding: 10px 0; width: 100%; text-align: center; color: gray; } .icp > a { color: gray; text-decoration: none; } .icp > a:hover { color: aqua; text-decoration: none; } </style>

直接在页面中调用(注意这里是setup写法)

<script setup> import CopyrightIcp from @/components/copyright-icp.vue; </script> <template> <router-view /> <!-- 配置备案号 --> <CopyrightIcp></CopyrightIcp> </template>

html代码型

注意如果要设置为绝对定位,记得设为bfc或者添加占位块,防止阻挡问题

<html> <style> .icp { /* position: absolute; bottom: 0px; */ padding: 10px 0; width: 100%; height: 36px; text-align: center; color: gray; z-index: 1000; } .icp > a { color: gray; text-decoration: none; } .icp > a:hover { color: aqua; text-decoration: none; } </style> <body> <div>这里是内容部分</div> <div class="icp">© 2023 alsoeasy <a href="http://beian.miit.gov.cn/" target="_blank"> 湘ICP备2023xxxxxx号</a></div> </body> </html>

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
怎样提高网站(怎样提高网站排名) 如何提高网站的流量(提高网站用户粘度的方法有)