一.前言
这几天博主这的疫情比较严重，小区都封了，在家闲来无事，作为一个后端程序员的我，前端技术菜的一批，但是最近有写一个个人技术，博客情况和项目介绍的前端展示特效，让别人可以快速的了解我，对于前端知识之前也接触过一些基础的技术栈，勇敢的我决定还是要尝试一下，对于按钮展示框，我自己从0到1的写了一个，用到的技术就是基础的html+css+JavaScript+jqurey。
效果图如下：
二.想法设计/实现过程
秉持着最少空间可以展示更多内容的原则，我初步的想法是，设计三个按钮，点击不同的按钮会显示不同的内容。
1，介绍我的博客粉丝，浏览量。
2，介绍我做过的项目。
3，展示我现有的技术栈。
所以，我前期的设计图如下：
三.基本样式
3.1 先定义盒子模型：（最外面的大框）
代码如下，先设计一个大的盒子，为了好看，我们可以设计一个半角过渡：
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="transmit">
</div>
</div>
</body>
</html>
css：
.transmit {
width: 100%;
height: 600px;
background-color: #7174a6;
position: relative;
border-radius: 0px 120px 0px 0px;
}
运行截图如下：
3.2 定义按钮
已美观为原则，我们在外面的大盒子上面写下一排————ABOUT ME————，
下面分别设计三个按钮，目的是为了点击不同的按钮来显示不同的内容。
分别为：1.MCN矩阵 2.开源世界 3.技术栈
效果以及代码如下：
HTML代码段如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="transmit">
<div class="aboutme">————ABOUT ME————</div>
<div class="buttonx">
<span onclick="show1()">MCN矩阵</span>
<span onclick="show2()">开源世界</span>
<span onclick="show3()">技术栈</span>
</div>
</div>
</div>
</body>
</html>
css代码如下:
.transmit {
width: 100%;
height: 600px;
background-color: #7174a6;
position: relative;
border-radius: 0px 120px 0px 0px;
}
.aboutme {
position: absolute;
color: #FFFFFF;
font-size: 28px;
font-weight: 600;
top: 30px;
left: 50%;
margin-left: -213px;
}
.buttonx span:hover {
color: rgba(11, 113, 214, 0.9);
background-color: aliceblue;
}
.buttonx span {
margin-right: 20px;
border-radius: 20px;
padding: 15px;
font-size: 25px;
background-color: rgba(11, 113, 214, 0.9);
color: aliceblue;
}
.buttonx {
position: absolute;
left: 50%;
margin-left: -230px;
top: 105px;
cursor: pointer;
}
3.3 分栏格子效果
因为设计到我的博客平台和开源项目较多，我在大盒子下面设计了若干个小盒子，为了美观，我还写了鼠标悬浮效果。
HTML代码和CSS代码段如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/* 传递开始 */
.transmit {
width: 100%;
height: 600px;
background-color: #7174a6;
position: relative;
border-radius: 0px 120px 0px 0px;
}
/* 关于我 */
.aboutme {
position: absolute;
color: #FFFFFF;
font-size: 28px;
font-weight: 600;
top: 30px;
left: 50%;
margin-left: -213px;
}
.buttonx {
position: absolute;
left: 50%;
margin-left: -230px;
top: 105px;
cursor: pointer;
}
.buttonx span:hover {
color: rgba(11, 113, 214, 0.9);
background-color: aliceblue;
}
.buttonx span {
margin-right: 20px;
border-radius: 20px;
padding: 15px;
font-size: 25px;
background-color: rgba(11, 113, 214, 0.9);
color: aliceblue;
}
.textabout {
width: 900px;
height: 400px;
/* background-color: #008000; */
top: 165px;
left: 50%;
margin-left: -450px;
}
.textabout li {
background-color: rgba(255, 255, 255, 0.8);
width: 195px;
height: 195px;
list-style: none;
margin-right: 15px;
margin-bottom: 15px;
float: left;
border-radius: 30px;
}
/* 处理img大小不一问题 */
.textabout li img {
width: 190px;
/* max-width: 90%; */
}
.huawei {
top: 10px;
position: absolute;
}
.cto51,
.juejing,
.gowork {
left: 4px;
top: 20px;
position: absolute;
}
.textabout .zhihu {
position: absolute;
top: 20px;
left: 50px;
width: 100px;
}
.textabout .ali,
.gitee {
left: 4px;
width: 180px;
top: 20px;
position: absolute;
}
.textabout .infoq {
left: 15px;
width: 180px;
top: 20px;
position: absolute;
}
.textabout .tranimg {
position: absolute;
height: 100px;
/* background-color: #000000; */
}
.textabout {
position: absolute;
}
.textabout li span {
margin-top: 100px;
text-align: center;
display: block;
color: black;
font-size: 15px;
font-weight: 900;
}
.textabout li:hover {
background-color: rgba(255, 255, 255, 0.8);
width: 200px;
height: 200px;
list-style: none;
margin-right: 10px;
margin-bottom: 10px;
float: left;
border-radius: 30px;
color: red;
}
.textabout li:hover span {
color: #afb42b;
}
/* 技术栈 */
.textaboutx {
width: 900px;
height: 400px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 30px;
top: 165px;
left: 50%;
margin-left: -450px;
}
.b3title {
top: 10px;
position: absolute;
left: 50%;
font-size: 40px;
color: #00283a;
margin-left: -210px;
font-family: KaiTi;
}
.b3text {
font-size: 22px;
top: 60px;
position: absolute;
left: 5%;
font-family: STKaiti;
}
</style>
</head>
<body>
<!-- 传递开始 -->
<div class="transmit">
<div class="aboutme">————ABOUT ME————</div>
<div class="buttonx">
<span onclick="show1()">MCN矩阵</span>
<span onclick="show2()">开源世界</span>
<span onclick="show3()">技术栈</span>
</div>
<div id="button2" class="textabout">
<ul>
<a href="https://gitee.com/shangjinzhu/luck5" target="_blank">
<li>
<div class="tranimg"><img src="image/gitee.svg" class="gitee" /></div>
<span>
题小满_非原生开发前后端分离的移动端应用<br>前后端均已开源
</span>
</li>
</a>
<a href="#">
<li>
<div class="tranimg"><img src="image/gitee.svg" class="gitee" /></div>
<span>
IMUSTCTF_前后端一体开发<br>保密项目，暂不能开源
</span>
</li>
</a>
<a href="https://gitee.com/shangjinzhu/qingsan" target="_blank">
<li>
<div class="tranimg"><img src="image/gitee.svg" class="gitee" /></div>
<span>
遇见青山_包头政府活动网站<br>部分开源
</span>
</li>
</a>
<a href="https://gitee.com/shangjinzhu/qingsan" target="_blank">
<li>
<div class="tranimg"><img src="image/gitee.svg" class="gitee" /></div>
<span>
gowork.fit网站<br>后续逐步全开源
</span>
</li>
</a>
<li>
<div class="tranimg"><img src="image/giehub.png" class="gitee" /></div>
<span>
后续敬请期待更多开源项目。<br />
github同步开源，点击进入我的github主页。
</span>
</li>
</ul>
</div>
</body>
</html>
效果如下：非常的好看，大大的提升了与用户的友好性，鼠标悬浮会有选中过渡效果，非常的人性化。
3.4 JavaScript 控制效果
现在需要实现，点击不同的按钮来显示不同的内容，点击MCN矩阵显示，我的若干个博客，点击开源世界显示我的开源项目，点击技术栈，显示我的目前掌握的技术栈：
实现如下效果：
这里主要使用JavaScript控制器来控制。
window.onload = function() {
show1();
showtext1();
}
function show1() {
document.getElementById("button1").style.display = "block";
document.getElementById("button2").style.display = "none";
document.getElementById("button3").style.display = "none";
};
function show2() {
document.getElementById("button2").style.display = "block";
document.getElementById("button1").style.display = "none";
document.getElementById("button3").style.display = "none";
}
function show3() {
document.getElementById("button3").style.display = "block";
document.getElementById("button1").style.display = "none";
document.getElementById("button2").style.display = "none";
}
值得注意的是，因为网页加载的顺序，我们需要在刚运行js语言执行show1()函数，让其他俩个的内容隐藏，只显示第一个按钮的内容。
效果如下:
<script >
show1();
window.onload = function() {
show1();
}
</script >
<script >
window.onload = function() {
show1();
}
show1();
function show1() {
document.getElementById("button1").style.display = "block";
document.getElementById("button2").style.display = "none";
document.getElementById("button3").style.display = "none";
};
function show2() {
document.getElementById("button2").style.display = "block";
document.getElementById("button1").style.display = "none";
document.getElementById("button3").style.display = "none";
}
function show3() {
document.getElementById("button3").style.display = "block";
document.getElementById("button1").style.display = "none";
document.getElementById("button2").style.display = "none";
}
</script>
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看