css Potherca的页脚

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css Potherca的页脚相关的知识，希望对你有一定的参考价值。

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>✿ Dabblet</title>
    <link href="./dabblet.css" rel="stylesheet" />
    <script src="http://dabblet.com/code/prefixfree.min.js"></script>
</head>
<body>
    <script src="http://pother.ca/JsBase/add-on/load-dabblet-on-bl.ocks.org.js" id="dabblet-html-goes-here"></script>
</body>
</html>
/**/
<div></div>

<p><a href="http://pother.ca/" class="created-by">Created by <span class="potherca">Potherca</span></a></p>
/**
 * Footer for Potherca
 */
@import url(http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono);

.created-by{
	background-color:rgb(255,255,255);
	border-radius:0.35em;
	color:inherit;
	font-family:'Droid Sans', Arial, sans-serif;
	padding:1.15em 0.25em 2.2em;
	text-decoration:none;
	width:9.1em;
}
.potherca{
	border-bottom:1px solid rgb(220,50,50);
	border-bottom-color:rgba(220,50,50,1);
	color:rgb(220, 50, 47);
	position:relative;
	transition:border 0.350s ease-out;
}
.created-by:hover .potherca{
	border-color:transparent;
	border-bottom-color:rgba(220,50,50,0);
}
.potherca::after{
	background:no-repeat url(http://pother.ca/images/avatars/ben-cartoon-background-red-252-square.png);
	background-size:100%;
	border-radius:2em;
	content:" ";
	display:block;
	height:4em;
	position:absolute;
	right:0;
	top:-0.85em;
	transform:rotateX(90deg);
	transition:transform 0.350s ease-out;
	width:4em;
}
.created-by:hover .potherca::after{
	height:4em;
	transform:rotateX(0deg);
}
/***************************************************************************************/
html, body{
	height:100%;
	background:rgb(245,245,235);
}
div{
	height:50%;
	margin-top:-4em;
}
p{
	display:block;
	margin:1em auto;
	text-align:center;
}

/*EOF*/

以上是关于css Potherca的页脚的主要内容，如果未能解决你的问题，请参考以下文章

CSS：页面底部的页脚重叠内容并具有更高的宽度

html CSS网格的页脚

CSS CSS - 给你的页脚一个固定的位置 - 位置：固定

使用元素 ui 的带有 css 的页脚按钮组

如何强制我的页脚粘在 CSS 中任何页面的底部？

最后打印页的页脚