欢迎来访
我们一直在努力

DIY精美页角

前两天在群里看到一个兄弟在问有没有酷炫的显示备案信息的页角代码,今天闲着没事自己写了一个,让各位见笑了。如图:

CSS内容如下:

@charset "UTF-8";
.class-a{
	text-decoration:none;/*去除超链接文字底部的横线*/
	color:#ffffff !important;/*字体颜色*/
	}
.class-front{
	color:#ffffff;/*字体颜色*/
	text-align:center;/*文字居中*/
	padding:3px 10px 3px 3px;/*数值顺序:上 右 下 左*/
	background:#6F6F6F;/*背景颜色*/
	border-top-left-radius:5px;/*左上角弧度*/
	border-bottom-left-radius:5px;/*左下角弧度*/
	}
.class-after{
	color:#ffffff;/*字体颜色*/
	text-align:center;/*文字居中*/
	padding:3px 10px 3px 3px;/*数值顺序:上 右 下 左*/
	background:RGB(0,167,235);/*背景颜色*/
	border-top-right-radius:5px;/*右上角弧度*/
	border-bottom-right-radius:5px;/*右下角弧度*/
	}
.class-after-name{
	color:#ffffff;/*字体颜色*/
	text-align:center;/*文字居中*/
	padding:3px 10px 3px 3px;/*数值顺序:上 右 下 左*/
	background:RGB(157,96,166);/*背景颜色*/
	border-top-right-radius:5px;/*右上角弧度*/
	border-bottom-right-radius:5px;/*右下角弧度*/
	}
.class-theme-right{
	float:right
	}

HTML源码如下:

<span>
<link rel="stylesheet" type="text/css" href="diy-footer01.css">
<span class="class-front">&copy;&nbsp;2020 Copyright&nbsp;</span><span class="class-after"><a class="class-a" target="_blank" href="http://www.beian.miit.gov.cn">鄂ICP备15019983号-1</a></span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="class-front"> 联系作者:</span><span class="class-after-name"><a class="class-a" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=200824732&site=qq&menu=yes">哀木六</a></span>&nbsp;&nbsp;
</span>

<span class="class-theme-right">
	<span class="class-front">Theme</span><span class="class-after"><a class="class-a" target="_blank" href="https://www.ihewro.com/archives/489/">handsome</a></span>
</span>

</span>

赞(1) 打赏
未经允许不得转载:斯普林网络 » DIY精美页角

评论 抢沙发

因为专注,所以我们能走的更远

联系我们