位置: IT常识 - 正文
[vue]提供一种网站底部备案号样式代码(只用vue可以做网站不?)
发布时间：2024-01-12演示![[vue]提供一种网站底部备案号样式代码(只用vue可以做网站不?)](https://www.jiuchutong.com/image/20231126/1700985478.jpg)
vue组件型（可直接用）
本文链接地址:https://www.jiuchutong.com/zhishi/293136.html
转载请保留说明！
推荐整理分享[vue]提供一种网站底部备案号样式代码(只用vue可以做网站不?)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:只用vue可以做网站不?,vue.org,vue功能实现,vue提供的api,哪些网站是用vue做的,使用vue的网站,vue提供的api,哪些网站是用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>上一篇：web期末大作业--网页设计 HTML+CSS+JS（附源码）(web期末大作业源代码)
