当前位置：网站首页>Open source summer | I have nothing to do during the epidemic, I made a button display box special effect to display my blog
Open source summer | I have nothing to do during the epidemic, I made a button display box special effect to display my blog
2022-08-08 17:18:00 【InfoQ】
一.前言
这几天博主这的疫情比较严重,小区都封了,在家闲来无事,作为一个后端程序员的我,前端技术菜的一批,但是最近有写一个个人技术,博客情况和项目介绍的前端展示特效,让别人可以快速的了解我,对于前端知识之前也接触过一些基础的技术栈,勇敢的我决定还是要尝试一下,对于按钮展示框,我自己从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>
/* Pass to start */
.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;
}
/* 处理imgSize problem */
.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>
<!-- Pass to start -->
<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>
题小满_Non-native end separation before and after the development of mobile terminal applications<br>Front and back end are open source
</span>
</li>
</a>
<a href="#">
<li>
<div class="tranimg"><img src="image/gitee.svg" class="gitee" /></div>
<span>
IMUSTCTF_Front and back end development<br>保密项目,Can not open
</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>
遇见青山_Baotou government web site<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>Subsequent gradually all open source
</span>
</li>
</a>
<li>
<div class="tranimg"><img src="image/giehub.png" class="gitee" /></div>
<span>
Subsequent please look more open source projects.<br />
githubThe synchronization source,点击进入我的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>
边栏推荐
猜你喜欢
离线安装 Anaconda + TensorFlow
leetcode：306. 累加数
Appium 自动化测试环境搭建
JVM-简介＆垃圾回收＆内存泄漏分析
1.初识MySQL数据库
Cholesterol-PEG-DBCO,CLS-PEG-DBCO,胆固醇-聚乙二醇-二苯基环辛炔一种环炔烃
LeetCode_Binary Tree_Medium_515. Find the maximum value in each tree row
史上最强IDEA工具使用教程，你想要的全都有！
【20210923】Choose the research direction you are interested in?
DSPE-PEG-NH2,DSPE-PEG-amine,474922-26-4,磷脂-聚乙二醇-氨基科研试剂
随机推荐
多线程-并发编程
李沐：机器学习者进阶学习建议
linux安装部署redis＆配置远程连接
Cy5反式环辛烯，TCO-Cy5，Cy5 trans-cyclooctene标记生物分子
软件工程基础知识--认识软件工程
Tensorflow教程(二)——基本概念与搭建流程
五、jmeter脚本的基本构成＆断言
【TypeScript】函数类型：返回值类型和参数类型到底如何定义？
【8.7】代码源 - 【抽卡】【LCM与GCD】
LeetCode_Binary Tree_Medium_515. Find the maximum value in each tree row
Tensorflow教程(三)——获取数据 feed 和 fetchn
DSPE-PEG-Biotin,385437-57-0,磷脂-聚乙二醇-生物素用于生物分子的检测和纯化
WPF StepBar
c语言指针运算
leetcode：294.翻转游戏
4. S32K14X study notes: S32 Design Studio new and imported projects
Tensorflow教程(四)——MNIST项目入门
dp, dpi, px knowledge supplement
L2-027 名人堂与代金券 (25 分)
The difference between B+ tree and B- tree