signature

自定义博客园签名

弄了一个可以折叠（显示/隐藏）内容的签名。

网页源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.4.1.js"></script>
		<style type="text/css">
			#mySignature {
				background: #FEFEDD;
				font-size: 12px; 
				margin-top: 60px;
			}
			
			#mySignature h4 {
				color: #FF0000;
				margin: 5px 0 5px 0;
			}
			#mySignature p{
				line-height: 5px;
			}
			#mySignature .sec{
				color: #ADD8E6;/*青色*/ 
				/*color: darkgray; /* 灰色*/
				/* color: #e2d2cf; */
			}

			#mySignature a {
				text-decoration: none;
			}
			#mySignature button {
                margin-top:8px;
				background: #FAEBD7;
			}
			#mySignature div {
				display: none;
			}
		</style>
		<script>
			function raodDivToggle() {
				var raodDesc = document.getElementById("raodDiv");
				if (raodDesc.style.display === "none") {
					raodDesc.style.display = "block";
				} else {
					raodDesc.style.display = "none";
				}
			}
		</script>
		<!-- jquery实现 -->
		<script>
			$(function() {
				$("#jbtn").click(function() {
					$("#raodDiv").slideToggle(3000);
				})
			})
		</script>
	</head>
	<body>
		<!-- <div style="display: block;"> -->
		<div id="mySignature">
			<h4>爱生活，爱码字</h4>
			<p>dscr...</p>
			<p>dscr...</p>
			<p>dscr...</p>
			<p class="sec">dscr...</p>
			<p class="sec">dscr...</p>
			<p>dscr...</p>
			<p>dscr...</p>
			<button id="btn" onclick="raodDivToggle()">>>个人学习历程</button>
			<div id="raodDiv">
				<p><a href="https://www.cnblogs.com/ccoonngg/category/1508516.html">mybatis</a></p>
				<p><a href="https://www.cnblogs.com/ccoonngg/category/1507392.html">spring</a></p>
				<p><a href="https://www.cnblogs.com/ccoonngg/category/1510609.html">springmvc</a></p>
			</div>
		</div>
		<!-- </div> -->
		<button id="jbtn">jquery实现</button>
	</body>
</html>

将id为mySignature的div贴到书签处

css贴到页脚html代码（应该贴到定制css的，我的弄不了，不知道为什么）

将js贴到博客侧边栏公告（支持HTML代码） （支持 JS 代码）

posted @ 2019-12-15 06:06  匆匆、  阅读(492)  评论(0)    收藏  举报