家人们，我把B站首页写出来了！！！
在学习HTML5和CSS3的过程中，总是感觉没有一个完全自己做出来的页面，一直在各大网站上面寻找合适的适合自己去仿写的页面代码，奈何找了很久都没有找到，在CSDN上找的各种什么电商页面，小米商城页面之类的，点进去发现博主给出的代码只有一部分的，很多其他的代码都没有给出，这样仿写就完全没办法进行，而在博客园中找到的可以仿写的页面，有些太过于简单，只有一个很基础的页面展示，实在是想找到一个页面稍微长一点的，适合尝试自己写页面的人看的，没找到就没有办法了，只好硬着豆皮自己去尝试写一下了。
因为比较喜欢b站，就决定尝试一下将b站的首页布局页面写一下，没有犹豫就直接开写了，也打算将这个作为自己真正完全独立写页面的第一次，话不多说，直接上代码吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="zijixie.css" type="text/css">
</head>
<body>
<div class="head">
<!-- 外侧div -->
<div class="cont1">
<!-- 左上超链接 -->
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">番剧</a></li>
<li><a href="#">直播</a></li>
<li><a href="#">游戏中心</a></li>
<li><a href="#">会员购</a></li>
<li><a href="#">漫画</a></li>
<li><a href="#">赛事</a></li>
<li><a href="#">周年庆</a></li>
<li><a href="#">下载客户端</a></li>
</ul>
<!-- 搜索框 -->
<div class="search">
<form action="">
<input class="biaodan" type="text" name="search" placeholder="搜索...">
</form>
</div>
<!-- touxiang -->
<div class="touxiang">
<img src="https://i2.hdslb.com/bfs/face/a3f06b22bcaaae794b6711a93a0e29dc2fcfef91.jpg@240w_240h_1c_1s_!web-avatar-nav.avif" alt="touxiang">
</div>
<!-- 右边超链接 -->
<ul class="menuright">
<li>
<a href="#"> <img src="./zijixie/member line.svg" alt="小图标"><br><span class="sp1">大会员</span></a>
</li>
<li>
<a href="#"> <img src="./zijixie/wechat line.svg" alt="小图标"><br><span class="sp">消息</span></a>
</li>
<li>
<a href="#"> <img src="./zijixie/wechat channel line.svg" alt="小图标"><br><span class="sp">动态</span></a>
</li>
<li>
<a href="#"> <img src="./zijixie/favorite line.svg" alt="小图标"><br><span class="sp">收藏</span></a>
</li>
<li>
<a href="#"> <img src="./zijixie/cart line.svg" alt="小图标"><br><span class="sp">历史</span></a>
</li>
<li>
<a href="#"> <img src="./zijixie/like line.svg" alt="小图标"><br><span class="sp2">创作中心</span></a>
</li>
</ul>
<!-- 投稿 -->
<a class="tougao" href="#"><span class="tougao1">投稿</span></a>
<!-- logo -->
<a class="logo" href="https://www.bilibili.com/" target="_blank">
<img src="./zijixie/bilibili.webp" alt="2233">
<img src="./zijixie/2233.jpg" alt="bilibili">
</a>
</div>
</div> <!-- 内容一 -->
<div class="bozi">
<!-- 外侧div -->
<div class="cont2"> <!-- 左边三个按钮 -->
<div class="zuosan"> <a class="zuoa1" href="#">
<div class="zuo1">
<img src="./zijixie/menu菜单3.svg">
</div>
<div class="zuo11">动态</div>
</a> <a class="zuoa1" href="#">
<div class="zhong1">
<img src="./zijixie/star收藏-星.svg">
</div>
<div class="zhong11">热门</div>
</a> <a class="zuoa1" href="#">
<div class="you1">
<img src="./zijixie/send发送.svg">
</div>
<div class="you11">频道</div>
</a>
</div> <!-- 中间全部按钮 -->
<div class="zhongjian">
<ul>
<li>
<a href="#">番剧</a>
</li>
<li>
<a href="#">国创</a>
</li>
<li>
<a href="#">综艺</a>
</li>
<li>
<a href="#">动画</a>
</li>
<li>
<a href="#">鬼畜</a>
</li>
<li>
<a href="#">舞蹈</a>
</li>
<li>
<a href="#">娱乐</a>
</li>
<li>
<a href="#">科技</a>
</li>
<li>
<a href="#">美食</a>
</li>
<li>
<a href="#">电影</a>
</li>
<li>
<a href="#">电视剧</a>
</li>
<li>
<a href="#">纪录片</a>
</li>
<li>
<a href="#">游戏</a>
</li>
<li>
<a href="#">音乐</a>
</li>
<li>
<a href="#">影视</a>
</li>
<li>
<a href="#">知识</a>
</li>
<li>
<a href="#">咨询</a>
</li>
<li>
<a href="#">生活</a>
</li>
<li>
<a href="#">时尚</a>
</li>
<li>
<a href="#">更多</a>
</li>
</ul>
</div> <!-- 竖直线 -->
<div class="shuxian"></div> <!-- 右边六个按钮 -->
<div class="youliu">
<ul>
<li>
<a href="#"><img src="./zijixie/报告.svg">
<div class="wenzi">专栏</div>
</a>
</li>
<li>
<a href="#"><img src="./zijixie/活动.svg">
<div class="wenzi">活动</div>
</a>
</li>
<li>
<a href="#"><img src="./zijixie/社区中心.svg">
<div class="wenzi">社区</div>
</a>
</li>
<li>
<a href="#"><img src="./zijixie/直播.svg">
<div class="wenzi">直播</div>
</a>
</li>
<li>
<a href="#"><img src="./zijixie/课堂.svg">
<div class="wenzi">课堂</div>
</a>
</li>
<li>
<a href="#"><img src="./zijixie/新歌热榜.svg">
<div class="wenzi">热榜</div>
</a>
</li>
</ul>
</div>
</div>
</div> <!-- banner -->
<div class="banner">
<ul>
<li><img src="http://img.netbian.com/file/2023/0705/232649Zh1mG.jpg"></li>
<li><img src="http://img.netbian.com/file/2023/0707/235106Yxqlc.jpg"></li>
<li><img src="http://img.netbian.com/file/2023/0704/163037oy7Cf.jpg"></li>
<li><img src="http://img.netbian.com/file/2023/0522/235702c1FPG.jpg"></li>
<li><img src="http://img.netbian.com/file/2023/0705/232649Zh1mG.jpg"></li>
</ul>
</div> <!-- youdaliu -->
<div class="youdaliu">
<ul>
<li>
<a href="#"><img src="https://i0.hdslb.com/bfs/archive/5a0cdfa6b546fe7a44f3074cd7b0b0ce0b4b62d6.jpg@672w_378h_1c_!web-home-common-cover.avif">
<br>【鸡你太美】级不要笑挑战！吃饭喝<br> 水慎入！笑喷了
</a>
</li>
<li>
<a href="#"><img src="https://i0.hdslb.com/bfs/archive/ed3da4db21439cbc6bc87316e17aea2f310a9fe8.jpg@672w_378h_1c_!web-home-common-cover.avif">
<br>【罗翔】村民修桥收费被判处寻衅滋<br> 事，这件事应该如何看？
</a>
</li>
<li>
<a href="#"><img src="https://i0.hdslb.com/bfs/archive/2abf09944636bba41ef10bd1b5c4cee21e4d19bd.jpg@672w_378h_1c_!web-home-common-cover.avif">
<br>【全球经典纯音乐】全站最全纯音乐<br> 合集！直击你的灵魂深处！
</a>
</li>
<li>
<a href="#"><img src="https://i2.hdslb.com/bfs/archive/76b76c832a0283feccf7ba64993fae7dee5a5cbe.jpg@672w_378h_1c_!web-home-common-cover.avif">
<br>27年前，4个高中女生随口一唱，竟<br> 成了几代人的“毕业神曲”
</a>
</li>
<li>
<a href="#"><img src="https://i2.hdslb.com/bfs/archive/b7ebe00d0106c68267606a87389c82f7b4d0aceb.jpg@672w_378h_1c_!web-home-common-cover.avif">
<br>【四大名著最燃版】速度与激情pro <br> 群英战吕布
</a>
</li>
<li>
<a href="#"><img src="https://i2.hdslb.com/bfs/archive/412701ccffa2602e0038bb30d2ebb216116ed01d.jpg@672w_378h_1c_!web-home-common-cover.avif">
<br>网易云超火古风歌曲TOP30，开口跪<br> 系列，戏腔太惊艳了！！
</a>
</li>
</ul>
</div> <!-- xiashi -->
<div class="xiashi">
<ul>
<li>
<a href="#">
<img src="https://i1.hdslb.com/bfs/archive/e1ecac877a1475104534d9bc46d94f769e19ac31.jpg@672w_378h_1c_!web-home-common-cover.avif" alt="tu">
<br>【海芋恋】就得蹦～出110斤的震感
</a>
</li>
<li>
<a href="#">
<img src="https://i1.hdslb.com/bfs/archive/a495bec4a385934c11aedb750d3a299e135bd044.jpg@672w_378h_1c_!web-home-common-cover.avif" alt="tu">
<br>一次看完【100部】经典高分港片，开局高能香港经典诡片
</a>
</li>
<li>
<a href="#">
<img src="https://i0.hdslb.com/bfs/archive/0f43161d81d6105cd0c19ce64f76dd862c710792.png@672w_378h_1c_!web-home-common-cover.avif" alt="tu">
<br>史上著名的轻音乐~听听有没有你熟悉的
<br>
</a>
</li>
<li>
<a href="#">
<img src="https://i0.hdslb.com/bfs/live/new_room_cover/f6f203ed6f3851337af6e38204e27eb7f5acc320.jpg@412w_232h_1c.avif" alt="tu">
<br>砂糖苹果童话故事 银砂糖师与黑妖精
</a>
</li>
<li>
<a href="#">
<img src="https://i0.hdslb.com/bfs/archive/6cb2a51a3a2f49b263b3632e69fd3832e022e525.jpg@412w_232h_1c.avif" alt="tu">
<br>爱一定是相互的
</a>
</li>
<li>
<a href="#">
<img src="https://i0.hdslb.com/bfs/archive/33ca184f631524c1124cde5c5fd095e7c4a6b6c9.jpg@672w_378h_1c_!web-home-common-cover.avif" alt="tu">
<br>完整版！一口气看完《泰囧》全集解说，天使与魔鬼的灵魂爱恋
</a>
</li>
<li>
<a href="#">
<img src="https://i0.hdslb.com/bfs/archive/41e9c562be052197a1f008f16f2284706b4a7342.png@412w_232h_1c.avif" alt="tu">
<br>死的时候，还在这条路上就对了！
</a>
</li>
<li>
<a href="#">
<img src="https://i0.hdslb.com/bfs/archive/0413d02fe83849d8b51b527479a01c44bd1846a2.jpg@672w_378h_1c_!web-home-common-cover.avif" alt="tu">
<br>全长133分钟，全程高能！一口气看完沙雕视频《遮天》
</a>
</li>
<li>
<a href="#">
<img src="https://i0.hdslb.com/bfs/archive/3546473ce856a6bf043ca163af7e74b694a4bf64.jpg@672w_378h_1c_!web-home-common-cover.avif" alt="tu">
<br>【动画短片】小城车站
</a>
</li>
<li>
<a href="#">
<img src="https://i0.hdslb.com/bfs/archive/c390ef7a1201bc9a06ab30ee8e8c84b48951d730.jpg@412w_232h_1c.avif" alt="tu">
<br>逆天战纪
</a>
</li>
</ul>
</div>
<div class="foot">
<p>页面作者：Mickeybo<br>
联系方式：16730229302
  邮箱：mingnaibo@126.com</p>
</div>
</body>
</html>
以上就是html的代码，图片资源都是直接复制的b站上的图片的资源链接，代码结构比较烂，但是好在终于是实现了页面。
CSS代码如下，样式中可能比较要学习的点就是轮播图这个了，花了很多时间去找如何不使用js,仅用h5和css3就实现轮播图的效果，（其实是自己js学的很烂，还不会用）,终于是找到了用动画的功能可以实现图片轮播的效果，最终效果感觉上也还不错。
*{
margin: 0;
padding: 0;
}
.head{
margin: 0;
padding: 0;
}
.cont1{
width: auto;
height: 160px;
background-image: url("./zijixie/bilibili14.avif");
background-position: center;
}
.menu{
width: 480px;
height: 30px;
padding-top: 20px;
margin-left: 50px;
float: left;
}
.menu>li{
list-style-type: none;
float: left;
margin-left: 12px;
}
.menu>li>a{
text-decoration: none;
color: white;
font-size: small;
}
.menu>li>a:hover{
color: red;
font-size: medium;
}
.search{
width: 310px;
height: 50px;
padding-top: 10px;
margin-left: 80px;
overflow: hidden;
float: left;
}
.search>form>input{
padding: 15px 120px 10px 5px;
margin-left: 10px;
border-radius: 8px;
}
.touxiang{
width: 40px;
height: 40px;
margin: 15px 0 0 50px;
float: left;
}
.touxiang>img{
width: 40px;
height: 40px;
border-radius: 50%;
}
.menuright{
width: 360px;
height: 30px;
float: left;
margin-left: 20px;
margin-top: 15px;
}
.menuright>li{
margin-left: 30px;
list-style-type: none;
float: left;
}
.menuright>li>a{
font-size: small;
color: white;
text-decoration: none;
}
.menuright>li>a:hover{
color: red;
}
.menuright>li>a>img{
width: 25px;
height: 25px;
}
.sp1{
margin-left: -8px;
}
.sp2{
margin-left: -12px;
}
.tougao{
display: block;
width: 80px;
height: 30px;
background-color:#FB7299;
float: right;
border-radius: 8px;
margin-right: 30px;
margin-top:15px;
text-decoration: none;
color: white;
}
.tougao:hover{
background-color: #e99eb2;
}
.tougao1{
margin-left: 23px;
line-height: 30px;
}
.logo{
display: block;
width: 220px;
height: 70px;
clear: both;
margin-left: 100px;
}
.logo>img{
width: 100px;
height: 70px;
border-radius: 50%;
}
.bozi{
margin: 0;
padding: 0;
}
.cont2{
width: auto;
height: 110px;
background-color: #FFFFFF;
}
.zuosan{
width: 200px;
height: 80px;
float: left;
margin-left: 60px;
margin-top: 13px;
}
.zuoa1{
display: block;
text-decoration: none;
margin-top: 8px;
float: left;
}
.zuo1{
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid white;
background-color: #FF9314;
}
.zuo1>img{
width: 30px;
height: 30px;
margin-left: 10px;
margin-top: 10px;
}
.zuo11{
width: 35px;
height: 20px;
margin-left: 10px;
}
.zhong1{
width: 50px;
height: 50px;
border-radius: 50%;
margin-left: 20px;
border: 1px solid white;
background-color: #F07775;
}
.zhong1>img{
width: 30px;
height: 30px;
margin-top: 10px;
margin-left: 10px;
}
.zhong11{
width: 35px;
height: 20px;
margin-left: 28px;
}
.you1{
width: 50px;
height: 50px;
border-radius: 50%;
margin-left: 20px;
border: 1px solid white;
background-color: #59CA73;
}
.you1>img{
width: 30px;
height: 30px;
margin-top: 10px;
margin-left: 10px;
}
.you11{
width: 35px;
height: 20px;
margin-left: 30px;
}
.zuo1:hover,.zhong1:hover,.you1:hover{
background-color: #F5F5F5;
}
.zuo11:hover,.zhong11:hover,.you11:hover{
color: red;
}
.zhongjian{
width: 900px;
height: 80px;
float: left;
margin-top: 20px;
margin-left: 60px;
}
.zhongjian>ul{
width: 899px;
height: 79px;
border: 1px solid white;
}
.zhongjian>ul>li{
list-style-type: none;
width: 75px;
height: 28px;
border-radius: 7px;
float: left;
margin-left: 10px;
margin-bottom: 10px;
}
.zhongjian>ul>li>a{
width: 75px;
text-decoration: none;
display: inline-block;
line-height: 28px;
text-align: center;
background-color: #E8E9EB;
border-radius: 7px;
font-size: small;
letter-spacing: 3px;
}
.zhongjian>ul>li>a:hover{
background-color: #F5F5F5;
}
.shuxian{
width: auto;
height: 70px;
margin-top: 20px;
border-left: 2px solid #E3E5E7;
float: left;
}
.youliu{
width: 250px;
height: 80px;
margin-top: 13px;
margin-right: 50px;
float: right;
}
.youliu>ul{
width: 250px;
height: 80px;
}
.youliu>ul>li{
width: 70px;
height: 25px;
list-style-type: none;
float: left;
margin-left: 10px;
margin-top: 5px;
margin-bottom: 10px;
}
.youliu>ul>li>a{
text-decoration: none;
}
.youliu>ul>li>a>img{
width: 35px;
height: 25px;
float: left;
}
.wenzi{
width: 30px;
height: 20px;
float: left;
font-size: small;
margin-top: 3px;
}
.banner{
width: 525px;
height: 380px;
clear: both;
margin-left: 65px;
border-radius: 5px;
overflow: hidden;
position: relative;
float: left;
}
.banner>ul{
width: 2625px;
height: 379px;
position: absolute;
animation: myani 18s infinite normal;
}
.banner>ul>li{
float: left;
}
.banner>ul>li>img{
width: 525px;
height: 380px;
}
@keyframes myani{
0%{
left: 0;
}
25%{
left: -525px;
}
50%{
left: -1050px;
}
75%{
left: -1575px;
}
100%{
left: -2100px;
}
}
.youdaliu{
width: 840px;
height: 420px;
float: right;
margin-right: 70px;
}
.youdaliu>ul{
width: 839px;
height: 419px;
}
.youdaliu>ul>li{
list-style-type: none;
margin-right: 25px;
margin-bottom: 10px;
float: left;
}
.youdaliu>ul li:nth-child(3),.youdaliu>ul li:nth-child(6){
margin-right: 0;
}
.youdaliu>ul>li>a{
text-decoration: none;
color: #3A535E;
font-size: small;
font-weight: bold;
}
.youdaliu>ul>li>a:hover{
color: #02AFEC;
}
.youdaliu>ul>li>a>img{
width: 260px;
height: 160px;
border-radius: 5px;
}
.xiashi{
width: 1520px;
height: 550px;
clear: both;
}
.xiashi>ul{
width: 1455px;
height: 499px;
padding-top: 50px;
padding-left: 65px;
}
.xiashi>ul>li{
width: 250px;
height: 180px;
list-style-type: none;
float: left;
margin-right: 25px;
margin-bottom: 60px;
}
.xiashi>ul>li>a{
text-decoration: none;
color: #3A535E;
font-size: small;
font-weight: bold;
}
.xiashi>ul>li>a:hover{
color: #02AFEC;
}
.xiashi>ul>li>a>img{
width: 250px;
height: 160px;
border-radius: 5px;
}
.foot{
width: auto;
height: 80px;
background-color: #C1C1C1;
text-align: center;
}
.foot>p{
display: inline-block;
line-height: 30px;
text-align: center;
margin-top: 15px;
}
页面所有代码就是这些了，html和css的代码没啥结构，看起来比较乱，而且有很多的代码是重复性的，需要优化的地方肯定是还有很多的
这些就放在之后有时间慢慢学习吧。
总体的展示效果，使用录屏软件，录制成gif动图了，放在下面
以上就是制作B站首页面的全部内容了，以后要更加努力才可以，完毕。
家人们，我把B站首页写出来了！！！的更多相关文章
- 模仿淘宝首页写的高仿页面，脚本全用的原生JS，菜鸟一枚高手看了勿喷哈
自己仿照淘宝首页写的页面,仿真度自己感觉可以.JS脚本全是用原生JavaScript写得,没用框架.高手看了勿喷,请多多指正哈!先上网页截图看看效果,然后上源码: 上源码,先JavaScript : ...
- <爬虫>用正则爬取B站首页图片
import re import requests headers = { 'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) Apple ...
- 织梦dedecms5.7手机站页面首页正常其他页面显示pc页面解决方法
最近遇到的问题,用的是织梦的dedecms从以前的版本升级上来的最新版5.7sp2,客户需要手机版的,要做一个百度的验证. 这个站首页显示算是基本正常,点开里面随便一个页面会跳转到pc页面上 ...
- 3.微信小程序-B站：wxml和wxss文件
WXML WXML(WeiXin Markup Language)是微信的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. (小安娜:好像很厉害的样子,那基础组件.事件系统是什么?感觉更厉 ...
- 微信小程序-B站：wxml和wxss文件
WXML WXML(WeiXin Markup Language)是微信的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. (小安娜:好像很厉害的样子,那基础组件.事件系统是什么?感觉更厉 ...
- C++课程设计，12306模拟写起来就是这么粗暴
这篇文章很详细,也很多希望可以好好看看!看完C++稳过! 一.12306应该具备那些功能 1.查询(一个月以内的): 1.查车票:出发地+目的地+出发时间->显示经过两站车票信息 (余票,车次信 ...
- [web建站] 优课急送《零基础快速学习建站》视频+课件【价值399元】
[课程介绍]你想快速建一个网站出来吗?你想从什么都不懂到一两天出一个漂漂亮亮的站吗?你想完成领导交给你的任务找人建站吗?你想自己建站来创业吗?你想学会建站之后,利用给别人建站来赚钱吗?你想建一个跟某个 ...
- dedecms网站扩展手机网站—共用数据库真正做到电脑手机同步访问，原pc站无需改动，对原pc站无任何影响
在如今无线互联网大潮的冲击下,越来越多的pc网站访问量下降,首当其冲的就是以pc网站为生的站长们,为了顺应无线互联网的要求,站长们很有必要为自己的pc网站扩展一套手机网站,更早的抓住手机用户的流量,使 ...
- netty使用EmbeddedChannel对channel的出入站进行单元测试
一种特殊的Channel实现----EmbeddedChannel,它是Netty专门为改进针对ChannelHandler的单元测试而提供的. 名称 职责 writeInbound 将入站消息写到E ...
- 写一个简单的 Linux Shell (C++)
这里可以找到代码 github.com/z0gSh1u/expshell 支持的特性 单条指令的执行 引号引起的参数(如 $ some_program "hello, world" ...
随机推荐
- Pytorch实现分类器
本文实现两个分类器: softmax分类器和感知机分类器 Softmax分类器 Softmax分类是一种常用的多类别分类算法,它可以将输入数据映射到一个概率分布上.Softmax分类首先将输入数据通过 ...
- AI测试101：测试AI系统的实用技巧&ML和AI自动化工具
基于人工智能的系统,也称为神经网络(NN Neural Networks),和其他应用程序一样是 "系统",因此需要测试.本文将指导你测试AI和基于NN的系统,并理解相关概念. 测 ...
- UnrealEngine - 网络同步之连接篇
1 连接过程 - 握手 传统的 C/S 架构下,Client 和 Server 通常会建立一条抽象的 Connection,用来进行两端的通信. UE 的官方文档中提供了 Client 连接到 Ser ...
- .gitignore 文件语法介绍
.gitignore 文件的作用 A gitignore file specifies intentionally untracked files that Git should ignore. Fi ...
- Navicat Premium 16 安装教程
使用数据库时经常会使用到Navicat,码一个教程 转载自https://www.bilibili.com/read/cv21586676?spm_id_from=444.41.list.card_a ...
- 波场（Tron） 网页版钱包开源
之前做区块链项目太难了,很多组件.工具没有开源项目,需要自己写很麻烦. 我整理了几个自己给公司开发项目的时候,分离出来的几个工具,已经上传到 Gihub 了,感觉浏览量还行,在这里给园子里的朋友分享下 ...
- 2021-05-27：定义何为step sum？比如680，680+68+6=754，680的step sum叫754。
2021-05-27:定义何为step sum?比如680,680+68+6=754,680的step sum叫754.给定一个整数num,判断它是不是某个数的step sum? 福大大 答案2021 ...
- 2021-08-07：与数组中元素的最大异或值。给你一个由非负整数组成的数组 nums 。另有一个查询数组 queries ，其中 queries[i] = [xi, mi] 。第 i 个查询的答案是
2021-08-07:与数组中元素的最大异或值.给你一个由非负整数组成的数组 nums .另有一个查询数组 queries ,其中 queries[i] = [xi, mi] .第 i 个查询的答案是 ...
- IBM小型机 - 登录Web控制台
前言: IBM 小型机没有VGA或者HDMI接口,只能通过web或者串口的方式,配置和查看设备的硬件信息: 我们可以通过两种方式获取小型机的IP,并通过浏览器访问. 操作步骤: 1.服务器接通电源,直 ...
- vue全家桶进阶之路37：Vue3 路由守卫
在 Vue.js 3.x 中,我们可以使用路由守卫来拦截路由的跳转,从而实现一些功能,例如:登录验证.页面权限控制等. Vue.js 3.x 中的路由守卫和 Vue.js 2.x 中的基本相同,都包含 ...