位置: IT常识 - 正文
推荐整理分享[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期末大作业源代码)
友情链接: 武汉网站建设