二次元星球 – 第 622 页

分享一款好看的名片附源码

介绍

源码为PSD格式，请使用Adobe Photoshop CC 运行

内部字体大家电脑上也不一定有所以大家下载一个 iFonts字体助手

登录后侧边栏有一个字体补齐功能，将PSD文件拖拽进去即可自动补齐字体

2022年11月5日

第一款

这款CommentToMail样式上十分简洁美观，邮件模板采用气泡对话方式呈现。

截图效果

[b2_file link=”https://wwu.lanzoum.com/i2Q1Z0eqhd7i” name=”蓝奏云” pass=”” code=””]

第二款

给自己的博客添加一个评论邮箱提醒功能大大的节约了读取时间也可以立刻能收的评论的通知，插件自定义程度非常高可以自定义框架，给邮件回复添加更多的趣味性!

截图效果

安装

1.首先下载插件，下载地址请看文章底部
2.将插件上传到 /usr/plugins/ 这个目录下，并确定插件名字是CommentPush
3.登陆后台，在“控制台”下拉菜单中进入“插件管理”
4.启用插件，进行插件设置

设置使用方法

当前插件需要使用file_get_contents函数，有些集成环境会关闭allow_url_fopen，需要把这个设置为On。

支持的推送服务

Server酱，Qmsg酱，阿里云邮件，SMTP邮件，企业微信机器人，钉钉机器人。
推送日志记录
自定义邮件推送模版

数据库适配

支持Pdo_Mysql
支持Pdo_SQLite

下载地址

作者的GitHub

2022年11月3日

投稿的正确使用指南

很多喜友大概不会投稿，或者投稿的方式不对，今天来告诉一下正确的投稿指南把！

关于积分的作用

获取到的积分可用于购买他人或本站资源。

后续可能还会开放现金奖励以及实物兑换。

发布教程

添加文章重要5步，应该很简单明了，看图就能明白！

如果您的帖子含有以下情况将不会通过

1.解压密码附带其他网站站网址或者名字，视为广告行为

2.请不要发布无意义的内容或者图片，并设置积分！

3.不要将普遍性或烂大街的资源设置过高不合理积分！

4.请不要在发布文章图片中插入成人图片（发现会直接删除文章并扣除相应积分）

5.请勿发布垃圾内容及广告！（发现会直接删除文章并扣除相应积分）

关于补档

如果想对老帖进行编辑，但是没找到编辑按钮，可找管理员开通权限

找管理员的时候说清楚标题，不然不知道开哪个投稿的权限，然后等开权限就行了，开权限后去个人中心发布那里重新编辑老投稿即可！

2022年11月3日

本站会员购买食用说明

说明:本站共有4种会员等级.

38元/一个月/30天月会员每天可免费下载20次.

78元/三个月/90天季会员每天可免费下载30次.

128元/十二个月/365天年会员每天可免费下载50次.

168元/终身/不限永久会员每天可不限次数下载.

随着资源量的增多,价格还会适当上调,永久会员越早买越划算!

关于会员

本站分为银卡会员、金卡会员、白金会员和钻石会员，以上会员均可下载本站资源，绝无另外收费内容！！！

具体特权详情请前往会员充值页面查看：购买会员

将来部分资源可能会提高会员等级下载权限，可以在会员开通页面查看会员的权限

随着资源的数量增加，价格可能也会上涨，早开早受益，迟则有变。

请勿将账号借予他人使用，一经发现，封号处理！

2022年11月3日

关于本站使用指南

本站介绍

提供网络资源分享，建站技术教程，网站源码，写真美图壁纸，动漫美图壁纸，cosplay资源，游戏资源等精品资源。

在为用户提供最好的产品同时，保证优秀的服务质量。

如有任何建设性意见请联系我们提出，邮件联系方式：1035761010@qq.com（请注明来意或直奔主题）

关于本站的会员制：

会员制是因为本站的内容来之不易，和本站的建站运营成本问题（包括购买资源、服务器、存储等），因此加入会员服务，会员收入将用来持续运营本站，本人希望能与各位爱好此类的老板共同发展维护。收集资源不易，且看且珍惜。

站长自费购买资源拿来分享，网上同类网站都是一样的，互相搬运资源（所以可能会有其他同行的广告，无需奇怪），经过对比你可以发现，我们的价格比他低。开通本站会员，相当于有了全网大多数资源。

亲爱的小伙伴们，欢迎加入会员大家庭，本站会员能享受更多的权限，能够免费下载全站资源包括稀有资源。

网站优势

1、更新及时，每天不限时不限次的滚动更新

2、下载分类清晰，不定期针对网民需求建议调整和开设新分类。

3、每天更新都有详细的说明，提供不同的下载方式，让用户去选择。

客户人群

都是一群喜欢动漫二次元的小伙伴，专门为二次元爱好者打造的交流平台

充值问题

因为大环境影响，支付会出现各种问题，基本上24小时内会修复。如果支付成功未到账，充值不了的，请第一时间联系客服。

关于解压

解压密码在下载页面，具体怎么解压请看解压教程

关于会员模式

由于购买了高配置服务器，和收集资源花费的费用和时间，不得不收取会员赞助费来抵消服务器的成本，网友开通会员的费用均用于网站的正常运转所需的支出，本站为非盈利型网站，为分享型博客。

关于水印

除作品自带的水印外，无本站任何水印。

关于用户体验

本站现在不会增加广告，以后也不会增加广告。每一期的作品都是经过精挑细选的，使网站首页呈现出一种干净的观赏体验。

关于内容

站点收录的作品都是来源于互联网、正规摄影师、微博 COSER 和摄影机构的作品，经过严格审查筛选，所有内容不含有露D、大CD的、色情内容。拒绝收录违反法律法规的内容。

关于资源

本站资源全部来自于网络，内容会持续更新，资源都存在百度云盘，会员可获取网盘链接，资源已全部做好备份，不必担心链接失效、网盘被封等问题。不要在网盘内解压，容易失效。如果链接失效，麻烦在文章底部评论“失效”，也可以联系客服，一般24小时内补链接。

联系方式

邮箱：1035761010@qq.com

QQ：1035761010

微信公众号：森鹿语

2022年11月3日

穿越火线：单机版|重返童年经典回忆

游戏介绍

《穿越火线》（Cross Fire，简称CF）是一款由韩国Smile Gate开发的第一人称射击游戏的网络游戏，玩家在游戏中扮演控制一名持枪战斗人员，与其他玩家进行械斗。

游戏截图

游戏启动步骤

1、把cf_gamesrv， cf_gamesrv_newlobby， cf_gamesrv_loginsrv里面的exe都启动一遍

2、打开crossfire launcher文件运行“启动.bat”开始游戏

此版本为最新国服版本！与TX现在的版本一致！版本名称《荣耀之巅》

全枪械，全角色，全皮肤，全道具，挑战/人机爆破团战/跳跳乐几乎全模式可玩

所有模式都可以玩，但有的模式不能玩？外服没有的武器角色在这个版本都有！直接去个人仓库选，也可以去商城自行购买！

疑惑答复

1、这个不需要虚拟机，所以不用很高的配置。

2、这是纯正CF单机，不是CS改出来的那种

3、可以添加人机对战，和电脑AI对打，并不是孤零零的你自己

2022年11月2日

战地：硬仗|官方繁体中文|支持键盘.鼠标.手柄|赠多项修改器

游戏介绍

《战地：硬仗》是经典的警察与劫匪之间争斗的游戏，本作由Frostbite 3引擎打造，将包含单人以及多人游戏，同时游戏中拥有大量可破坏场景。游戏模式包括TDM，地盘战，劫掠，Blood Mooney等。小队有SWAT，强盗，“LW”和“CR”，还有战地系列的指挥官模式。兵种包括暴徒，策划者，技术员，专家，游戏里还设置了商店，可购买武器和装备，有点像CS。

游戏截图

版本介绍

v1.07.15.00|容量48.3GB|官方繁体中文|支持键盘.鼠标.手柄|赠多项修改器

2022年11月2日

手把手教你如何制作个人主页

今天通过别的资源网了解到森鹿语，这个站点每一个美化都恰到好处，没有像别的站点一样花里胡哨，让人的第一印象十分的舒适，既然来到了这里，那我也留下点什么东西吧，证明这里也是有我的脚印的(●’◡’●)

这里教大家如何使用HTML、CSS、JS三个文件制作一款简洁的个人主页

首先我们在我们电脑的桌面创建一个记事本文件，输入下面的代码，并重命名为index.html

<!-- Created By 李初一 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>李初一网络科技工作室</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
</head>
<body>
    <div class="scroll-up-btn">
        <i class="fas fa-angle-up"></i>
    </div>
    <nav class="navbar">
        <div class="max-width">
            <div class="logo"><a href="https://alacg.cc">Zy_<span>李初一</span></a></div>
            <ul class="menu">
                <li><a href="#home" class="menu-btn">首页</a></li>
                <li><a href="#about" class="menu-btn">关于</a></li>
                <li><a href="#services" class="menu-btn">服务</a></li>
                <li><a href="#skills" class="menu-btn">技能</a></li>
                <li><a href="#teams" class="menu-btn">团队</a></li>
                <li><a href="#contact" class="menu-btn">联系</a></li>
            </ul>
            <div class="menu-btn">
                <i class="fas fa-bars"></i>
            </div>
        </div>
    </nav>

    <!-- home section start -->
    <section class="home" id="home">
        <div class="max-width">
            <div class="home-content">
                <div class="text-1">你好, 我的名字是</div>
                <div class="text-2">李初一</div>
                <div class="text-3">我是一个 <span class="typing"></span></div>
                <a href="https://t.me/Zy_Lcy">Telegram联系</a>
            </div>
        </div>
    </section>

    <!-- about section start -->
    <section class="about" id="about">
        <div class="max-width">
            <h2 class="title">About me</h2>
            <div class="about-content">
                <div class="column left">
                    <img src="img/login.jpg" alt="">
                </div>
                <div class="column right">
                    <div class="text">李初一 Is <span class="typing-2"></span></div>
                    <p>不久前还只是一个失业农民工.现在还只是一只喜欢动漫和文学的学生党.不久以后将是又一个人生迷茫的旅行者.</p>
                    <a href="https://www.zyw.one">前往博客</a>
                </div>
            </div>
        </div>
    </section>

    <!-- services section start -->
    <section class="services" id="services">
        <div class="max-width">
            <h2 class="title">我的专长</h2>
            <div class="serv-content">
                <div class="card">
                    <div class="box">
                        <i class="fas fa-paint-brush"></i>
                        <div class="text">Web 设计</div>
                        <p>极简美学，美化你的站点</p>
                    </div>
                </div>
                <div class="card">
                    <div class="box">
                        <i class="fas fa-chart-line"></i>
                        <div class="text">广告</div>
                        <p>为各大站长提供有效帮助</p>
                    </div>
                </div>
                <div class="card">
                    <div class="box">
                        <i class="fas fa-code"></i>
                        <div class="text">应用程序设计</div>
                        <p>经验丰富，定制属于你的程序</p>
                    </div>
                </div>
               </div>
            </div>
        </div>
    </section>

    <!-- skills section start -->
    <section class="skills" id="skills">
        <div class="max-width">
            <h2 class="title">技能</h2>
            <div class="skills-content">
                <div class="column left">
                    <div class="text">About Skill</div>
                    <p>2019,第一次接触是C/C++,在拥挤的实验室</p>

                    <p>2020,三月份在寝室迷上了网络游戏</p>

                    <p>九月份开始学习到Java</p>

                    <p>2021,年初的时候摸了摸Android，觉得稀奇有趣</p>

                    <p>剩下的月份我在看JavaWeb</p>

                    <p>2022,接触到WordPress,兴趣开始转到前端和脚本语言</p>

                    <p>上半年插科打诨</p>

                    <p>下半年开始学习H5,CSS3,JS</p>

                    <p>现在正在学习前端工程化技术</p>

                    <p>喜欢UI,交互设计,觉得UED是我坚持精确1个像素的动力</p>

                    <p>而未来...</p>

                    <p>想成为一名全栈工程师</p>
                    <a href="https://www.zyw.one">了解更多</a>
                </div>
                <div class="column right">
                    <div class="bars">
                        <div class="info">
                            <span>HTML</span>
                            <span>90%</span>
                        </div>
                        <div class="line html"></div>
                    </div>
                    <div class="bars">
                        <div class="info">
                            <span>CSS</span>
                            <span>60%</span>
                        </div>
                        <div class="line css"></div>
                    </div>
                    <div class="bars">
                        <div class="info">
                            <span>JavaScript</span>
                            <span>80%</span>
                        </div>
                        <div class="line js"></div>
                    </div>
                    <div class="bars">
                        <div class="info">
                            <span>PHP</span>
                            <span>50%</span>
                        </div>
                        <div class="line php"></div>
                    </div>
                    <div class="bars">
                        <div class="info">
                            <span>MySQL</span>
                            <span>70%</span>
                        </div>
                        <div class="line mysql"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- teams section start -->
    <section class="teams" id="teams">
        <div class="max-width">
            <h2 class="title">团队成员</h2>
            <div class="carousel owl-carousel">
                <div class="card">
                    <div class="box">
                        <img src="https://q1.qlogo.cn/g?b=qq&nk=82719519&s=640" alt="">
                        <div class="text">李初一</div>
                        <p>摆烂王</p>
                    </div>
                </div>
                <div class="card">
                    <div class="box">
                        <img src="https://q1.qlogo.cn/g?b=qq&nk=296258507&s=640" alt="">
                        <div class="text">嘉佳</div>
                        <p>神之画饼能手</p>
                    </div>
                </div>
                <div class="card">
                    <div class="box">
                        <img src="https://q1.qlogo.cn/g?b=qq&nk=10001&s=640" alt="">
                        <div class="text">小马哥</div>
                        <p>团队谋划及资金赞助</p>
                    </div>
                </div>
                <div class="card">
                    <div class="box">
                        <img src="https://q1.qlogo.cn/g?b=qq&nk=2968624464&s=640" alt="">
                        <div class="text">爆爆</div>
                        <p>跟我一样帅</p>
                    </div>
                </div>
                <div class="card">
                    <div class="box">
                        <img src="https://q1.qlogo.cn/g?b=qq&nk=1925512109&s=640" alt="">
                        <div class="text">锤子</div>
                        <p>DUANG</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- contact section start -->
    <section class="contact" id="contact">
        <div class="max-width">
            <h2 class="title">联系</h2>
            <div class="contact-content">
                <div class="column left">
                    <div class="text">保持联系</div>
                    <p>所以，考虑帮助他会很痛苦。他们的尊严被打破了。谁知道我们生活中没有痛苦的真相？</p>
                    <div class="icons">
                        <div class="row">
                            <i class="fas fa-user"></i>
                            <div class="info">
                                <div class="head">李初一网络科技工作室</div>
                                <div class="sub-title">李初一</div>
                            </div>
                        </div>
                        <div class="row">
                            <i class="fas fa-map-marker-alt"></i>
                            <div class="info">
                                <div class="head">地址</div>
                                <div class="sub-title">湖南, 长沙</div>
                            </div>
                        </div>
                        <div class="row">
                            <i class="fas fa-envelope"></i>
                            <div class="info">
                                <div class="head">Email</div>
                                <div class="sub-title">82719519@qq.com</div>
                            </div>
                        </div>
                    </div>
                </div>
<!-- 这里可以自行引入css代码替换链接为按钮 -->
        <div class="column left">
                    <div class="text">联系方式</div>
                    <p>以下是各种联系方式及途径。推荐Telegram方式进行联系。如果没有及时回复那就是在对抗路</p>
                    <div class="icons">
                        <div class="row">
                            <div class="info">
                                <div class="head">Telegram联系</div><a href="https://t.me/Zy_Lcy">前往Telegram</a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="info">
                                <div class="head">Twitter联系</div><a href="https://Twitter/Zy_Lcy">前往Twitter</a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="info">
                                <div class="head">Facebook联系</div><a href="https://Facebook/Zy_Lcy">前往Facebook</a>
    </section>

    <!-- footer section start -->
    <footer>
        <span>Created By <a href="https://www.zyw.one">李初一网络科技工作室</a> | <span class="far fa-copyright"></span> 2022 All rights reserved.</span>
    </footer>

    <script src="script.js"></script>
</body>
</html>

完成这一步之后我们另外再新建一个文件，导入下方代码并重命名为style.css

/*  导入谷歌字体 */@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
html{
    scroll-behavior: smooth;
}

/* custom scroll bar */::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 所有类似的内容样式代码 */section{
    padding: 100px 0;
}
.max-width{
    max-width: 1300px;
    padding: 0 80px;
    margin: auto;
}
.about, .services, .skills, .teams, .contact, footer{
    font-family: 'Poppins', sans-serif;
}
.about .about-content,
.services .serv-content,
.skills .skills-content,
.contact .contact-content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
section .title{
    position: relative;
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 60px;
    padding-bottom: 20px;
    font-family: 'Ubuntu', sans-serif;
}
section .title::before{
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 180px;
    height: 3px;
    background: #111;
    transform: translateX(-50%);
}
section .title::after{
    position: absolute;
    bottom: -8px;
    left: 50%;
    font-size: 20px;
    color: crimson;
    padding: 0 5px;
    background: #fff;
    transform: translateX(-50%);
}

/* 导航栏样式 */.navbar{
    position: fixed;
    width: 100%;
    z-index: 999;
    padding: 30px 0;
    font-family: 'Ubuntu', sans-serif;
    transition: all 0.3s ease;
}
.navbar.sticky{
    padding: 15px 0;
    background: crimson;
}
.navbar .max-width{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navbar .logo a{
    color: #fff;
    font-size: 35px;
    font-weight: 600;
}
.navbar .logo a span{
    color: crimson;
    transition: all 0.3s ease;
}
.navbar.sticky .logo a span{
    color: #fff;
}
.navbar .menu li{
    list-style: none;
    display: inline-block;
}
.navbar .menu li a{
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    margin-left: 25px;
    transition: color 0.3s ease;
}
.navbar .menu li a:hover{
    color: crimson;
}
.navbar.sticky .menu li a:hover{
    color: #fff;
}

/* 菜单btn样式 */.menu-btn{
    color: #fff;
    font-size: 23px;
    cursor: pointer;
    display: none;
}
.scroll-up-btn{
    position: fixed;
    height: 45px;
    width: 42px;
    background: crimson;
    right: 30px;
    bottom: 10px;
    text-align: center;
    line-height: 45px;
    color: #fff;
    z-index: 9999;
    font-size: 30px;
    border-radius: 6px;
    border-bottom-width: 2px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}
.scroll-up-btn.show{
    bottom: 30px;
    opacity: 1;
    pointer-events: auto;
}
.scroll-up-btn:hover{
    filter: brightness(90%);
}


/* 主页背景图片 */.home{
    display: flex;
    background: url("img/banner.jpg") no-repeat center;
    height: 100vh;
    color: #fff;
    min-height: 500px;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Ubuntu', sans-serif;
}
.home .max-width{
  width: 100%;
  display: flex;
}
.home .max-width .row{
  margin-right: 0;
}
.home .home-content .text-1{
    font-size: 27px;
}
.home .home-content .text-2{
    font-size: 75px;
    font-weight: 600;
    margin-left: -3px;
}
.home .home-content .text-3{
    font-size: 40px;
    margin: 5px 0;
}
.home .home-content .text-3 span{
    color: crimson;
    font-weight: 500;
}
.home .home-content a{
    display: inline-block;
    background: crimson;
    color: #fff;
    font-size: 25px;
    padding: 12px 36px;
    margin-top: 20px;
    font-weight: 400;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
}
.home .home-content a:hover{
    color: crimson;
    background: none;
}

/* 关于页面样式 */.about .title::after{
    content: "who i am";
}
.about .about-content .left{
    width: 45%;
}
.about .about-content .left img{
    height: 400px;
    width: 400px;
    object-fit: cover;
    border-radius: 6px;
}
.about .about-content .right{
    width: 55%;
}
.about .about-content .right .text{
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px;
}
.about .about-content .right .text span{
    color: crimson;
}
.about .about-content .right p{
    text-align: justify;
}
.about .about-content .right a{
    display: inline-block;
    background: crimson;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
}
.about .about-content .right a:hover{
    color: crimson;
    background: none;
}

/* 服务部分样式 */.services, .teams{
    color:#fff;
    background: #111;
}
.services .title::before,
.teams .title::before{
    background: #fff;
}
.services .title::after,
.teams .title::after{
    background: #111;
    content: "what i provide";
}
.services .serv-content .card{
    width: calc(33% - 20px);
    background: #222;
    text-align: center;
    border-radius: 6px;
    padding: 50px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.services .serv-content .card:hover{
    background: crimson;
}
.services .serv-content .card .box{
    transition: all 0.3s ease;
}
.services .serv-content .card:hover .box{
    transform: scale(1.05);
}
.services .serv-content .card i{
    font-size: 50px;
    color: crimson;
    transition: color 0.3s ease;
}
.services .serv-content .card:hover i{
    color: #fff;
}
.services .serv-content .card .text{
    font-size: 25px;
    font-weight: 500;
    margin: 10px 0 7px 0;
}

/* 技能部分样式 */
.skills .title::after{
    content: "what i know";
}
.skills .skills-content .column{
    width: calc(50% - 30px);
}
.skills .skills-content .left .text{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.skills .skills-content .left p{
    text-align: justify;
}
.skills .skills-content .left a{
    display: inline-block;
    background: crimson;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 8px 16px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
}
.skills .skills-content .left a:hover{
    color: crimson;
    background: none;
}
.skills .skills-content .right .bars{
    margin-bottom: 15px;
}
.skills .skills-content .right .info{
    display: flex;
    margin-bottom: 5px;
    align-items: center;
    justify-content: space-between;
}
.skills .skills-content .right span{
    font-weight: 500;
    font-size: 18px;
}
.skills .skills-content .right .line{
    height: 5px;
    width: 100%;
    background: lightgrey;
    position: relative;
}
.skills .skills-content .right .line::before{
    content: "";
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    background: crimson;
}
.skills-content .right .html::before{
    width: 90%;
}
.skills-content .right .css::before{
    width: 60%;
}
.skills-content .right .js::before{
    width: 80%;
}
.skills-content .right .php::before{
    width: 50%;
}
.skills-content .right .mysql::before{
    width: 70%;
}

/* 团队部分样式 */.teams .title::after{
    content: "who with me";
}
.teams .carousel .card{
    background: #222;
    border-radius: 6px;
    padding: 25px 35px;
    text-align: center;
    overflow: hidden;
    transition: all 0.3s ease;
}
.teams .carousel .card:hover{
    background: crimson;
}
.teams .carousel .card .box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.teams .carousel .card:hover .box{
    transform: scale(1.05);
}
.teams .carousel .card .text{
    font-size: 25px;
    font-weight: 500;
    margin: 10px 0 7px 0;
}
.teams .carousel .card img{
    height: 150px;
    width: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid crimson;
    transition: all 0.3s ease;
}
.teams .carousel .card:hover img{
    border-color: #fff;
}
.owl-dots{
    text-align: center;
    margin-top: 20px;
}
.owl-dot{
    height: 13px;
    width: 13px;
    margin: 0 5px;
    outline: none!important;
    border-radius: 50%;
    border: 2px solid crimson!important;
    transition: all 0.3s ease;
}
.owl-dot.active{
    width: 35px;
    border-radius: 14px;
}
.owl-dot.active,
.owl-dot:hover{
    background: crimson!important;
}

/* 联系界面样式 */.contact .title::after{
    content: "get in touch";
}
.contact .contact-content .column{
    width: calc(50% - 30px);
}
.contact .contact-content .text{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.contact .contact-content .left p{
    text-align: justify;
}
.contact .contact-content .left .icons{
    margin: 10px 0;
}
.contact .contact-content .row{
    display: flex;
    height: 65px;
    align-items: center;
}
.contact .contact-content .row .info{
    margin-left: 30px;
}
.contact .contact-content .row i{
    font-size: 25px;
    color: crimson;
}
.contact .contact-content .info .head{
    font-weight: 500;
}
.contact .contact-content .info .sub-title{
    color: #333;
}
.contact .right form .fields{
    display: flex;
}
.contact .right form .field,
.contact .right form .fields .field{
    height: 45px;
    width: 100%;
    margin-bottom: 15px;
}
.contact .right form .textarea{
    height: 80px;
    width: 100%;
}
.contact .right form .name{
    margin-right: 10px;
}
.contact .right form .field input,
.contact .right form .textarea textarea{
    height: 100%;
    width: 100%;
    border: 1px solid lightgrey;
    border-radius: 6px;
    outline: none;
    padding: 0 15px;
    font-size: 17px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}
.contact .right form .field input:focus,
.contact .right form .textarea textarea:focus{
    border-color: #b3b3b3;
}
.contact .right form .textarea textarea{
  padding-top: 10px;
  resize: none;
}
.contact .right form .button-area{
  display: flex;
  align-items: center;
}
.right form .button-area button{
  color: #fff;
  display: block;
  width: 160px!important;
  height: 45px;
  outline: none;
  font-size: 18px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  flex-wrap: nowrap;
  background: crimson;
  border: 2px solid crimson;
  transition: all 0.3s ease;
}
.right form .button-area button:hover{
  color: crimson;
  background: none;
}
/* 页脚部分样式 */footer{
    background: #111;
    padding: 15px 23px;
    color: #fff;
    text-align: center;
}
footer span a{
    color: crimson;
    text-decoration: none;
}
footer span a:hover{
    text-decoration: underline;
}


/* 响应媒体查询启动 */@media (max-width: 1104px) {
    .about .about-content .left img{
        height: 350px;
        width: 350px;
    }
}

@media (max-width: 991px) {
    .max-width{
        padding: 0 50px;
    }
}
@media (max-width: 947px){
    .menu-btn{
        display: block;
        z-index: 999;
    }
    .menu-btn i.active:before{
        content: "\f00d";
    }
    .navbar .menu{
        position: fixed;
        height: 100vh;
        width: 100%;
        left: -100%;
        top: 0;
        background: #111;
        text-align: center;
        padding-top: 80px;
        transition: all 0.3s ease;
    }
    .navbar .menu.active{
        left: 0;
    }
    .navbar .menu li{
        display: block;
    }
    .navbar .menu li a{
        display: inline-block;
        margin: 20px 0;
        font-size: 25px;
    }
    .home .home-content .text-2{
        font-size: 70px;
    }
    .home .home-content .text-3{
        font-size: 35px;
    }
    .home .home-content a{
        font-size: 23px;
        padding: 10px 30px;
    }
    .max-width{
        max-width: 930px;
    }
    .about .about-content .column{
        width: 100%;
    }
    .about .about-content .left{
        display: flex;
        justify-content: center;
        margin: 0 auto 60px;
    }
    .about .about-content .right{
        flex: 100%;
    }
    .services .serv-content .card{
        width: calc(50% - 10px);
        margin-bottom: 20px;
    }
    .skills .skills-content .column,
    .contact .contact-content .column{
        width: 100%;
        margin-bottom: 35px;
    }
}

@media (max-width: 690px) {
    .max-width{
        padding: 0 23px;
    }
    .home .home-content .text-2{
        font-size: 60px;
    }
    .home .home-content .text-3{
        font-size: 32px;
    }
    .home .home-content a{
        font-size: 20px;
    }
    .services .serv-content .card{
        width: 100%;
    }
}

@media (max-width: 500px) {
    .home .home-content .text-2{
        font-size: 50px;
    }
    .home .home-content .text-3{
        font-size: 27px;
    }
    .about .about-content .right .text,
    .skills .skills-content .left .text{
        font-size: 19px;
    }
    .contact .right form .fields{
        flex-direction: column;
    }
    .contact .right form .name,
    .contact .right form .email{
        margin: 0;
    }
    .right form .error-box{
       width: 150px;
    }
    .scroll-up-btn{
        right: 15px;
        bottom: 15px;
        height: 38px;
        width: 35px;
        font-size: 23px;
        line-height: 38px;
    }
}

完成这一步之后我们还需要一个JS文件，新建一个记事本文件导入下方代码并重命名为script.js

$(document).ready(function(){
    $(window).scroll(function(){
        // sticky navbar on scroll script
        if(this.scrollY > 20){
            $('.navbar').addClass("sticky");
        }else{
            $('.navbar').removeClass("sticky");
        }
        
        // scroll-up button show/hide script
        if(this.scrollY > 500){
            $('.scroll-up-btn').addClass("show");
        }else{
            $('.scroll-up-btn').removeClass("show");
        }
    });

    // slide-up script
    $('.scroll-up-btn').click(function(){
        $('html').animate({scrollTop: 0});
        // removing smooth scroll on slide-up button click
        $('html').css("scrollBehavior", "auto");
    });

    $('.navbar .menu li a').click(function(){
        // applying again smooth scroll on menu items click
        $('html').css("scrollBehavior", "smooth");
    });

    // toggle menu/navbar script
    $('.menu-btn').click(function(){
        $('.navbar .menu').toggleClass("active");
        $('.menu-btn i').toggleClass("active");
    });

    // typing text animation script
    var typed = new Typed(".typing", {
        strings: ["网络博主", "开发者", "博客主", "设计师", "自由职业者"],
        typeSpeed: 100,
        backSpeed: 60,
        loop: true
    });

    var typed = new Typed(".typing-2", {
        strings: ["网络博主", "开发者", "博客主", "设计师", "自由职业者"],
        typeSpeed: 100,
        backSpeed: 60,
        loop: true
    });

    // owl carousel script
    $('.carousel').owlCarousel({
        margin: 20,
        loop: true,
        autoplay: true,
        autoplayTimeOut: 2000,
        autoplayHoverPause: true,
        responsive: {
            0:{
                items: 1,
                nav: false
            },
            600:{
                items: 2,
                nav: false
            },
            1000:{
                items: 3,
                nav: false
            }
        }
    });
});

保存三个文件之后在你的桌面点击index.html文件就成功拥有了一款完全属于你自己的个人主页

这时候你会遇到以下几个问题：

1:背景图缺失

2:个人介绍头像图缺失

3:团队介绍里如何更改团队成员头像

4:首页文字跳动如何更换

5:源代码有没有安全隐患

我答：背景图及个人介绍位置的图片缺失是因为代码里使用的是本地文件，你所创建的代码本地并没有相应的文件名所调用，所以你需要创建一个文件夹并命名为img导入背景图及头像，背景图命名为banner.jpg，头像命名为login.jpg

关于团队介绍一栏的头像，原版是调用本地文件，但是我为了方便小白我把图片更改为外链模式，这里我放置的是QQ头像的链接，大家仅需更改QQ号即可

首页跳动文字在JS文件里修改，你只需更改中文或按照示例样式添加文字即可，代码无任何安全隐患，所有源代码都在上面

如果你要修改配色方案请修改CSS文件里color后面的颜色代码，当然其他的也是支持修改的，非常的简单，对于新手非常的友好

如果大家有不错的美化想法并成功实施可以在评论区交作业，欢迎大家使用本源代码以及对代码做出美化和修改

2022年11月2日

超好看的二次元个人主页源码（单页）

超好看的二次元个人主页一个很好看的源码，非常大气，

使用方法，直接上传解压即可访问

2022年11月2日

【7B2主题美化】认证图标修改为动态金V

示例请查看本站

修改functions.php

define('B2_VERIFY_ICON','<i class="b2-vrenzhengguanli b2font b2-color"></i>');    
//把b2-vrenzhengguanli修改为vrnzhengss

修改b2/Modules/Templates/Header.php

<span v-if="userData.user_title">'.b2_get_icon('b2-vrenzhengguanli').'</span>  
//把b2-vrenzhengguanli修改为vrnzhengss

css代码

.vrnzhengss{
    position: absolute;
    background-image: url(/gold.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    -webkit-animation: woo-icon-wooSprite 2.1s steps(15) infinite backwards;
}
.user-verify .vrnzhengss{
    position: initial;
    margin-bottom: -6px;
    display: inline-block;
    width: 23px;
    height: 23px;
}
.top-user-avatar .vrnzhengss{
    bottom: -5px;
    right: -6px;
    width: 16px;
    height: 16px;
}
.verify-box-avatar .vrnzhengss,.user-w-avatar .vrnzhengss,.gold-top-avatar .vrnzhengss,.mission-page-user-verify .vrnzhengss,.post-meta-left .avatar-parent .vrnzhengss,.topic-avatar .vrnzhengss{
    bottom: -5px;
    right: -6px;
    width: 20px;
    height: 20px;
}
.w-a-info .vrnzhengss{
    bottom: -5px;
    right: 200px;
    width: 20px;
    height: 20px;
}
@media (min-width:800px) {
.user-verify .vrnzhengss{
    position: initial;
    margin-bottom: -6px;
    display: inline-block;
    width: 23px;
    height: 23px;
}
.top-user-avatar .vrnzhengss,.verify-box-avatar .vrnzhengss,.user-w-avatar .vrnzhengss,.gold-top-avatar .vrnzhengss,.mission-page-user-verify .vrnzhengss,.post-meta-left .avatar-parent .vrnzhengss,.topic-avatar .vrnzhengss{
    bottom: -5px;
    right: -6px;
    width: 16px;
    height: 16px;
}
.w-a-info .vrnzhengss{
    bottom: -5px;
    right: 200px;
    width: 20px;
    height: 20px;
}
}
@-webkit-keyframes woo-icon-wooSprite {
    0% {
        background-position: 0 0;
    }
    to {
        background-position: 0 bottom;
    }
}
@keyframes woo-icon-wooSprite {
    0% {
        background-position: 0 0;
    }
    to {
        background-position: 0 bottom;
    }
}

最后下载附件放到网站根目录

2022年10月27日

博客

介绍

第一款

截图效果

第二款

截图效果

下载地址

关于积分的作用

发布教程

关于补档

说明:本站共有4种会员等级.

关于会员

本站介绍

关于本站的会员制：

网站优势

客户人群

充值问题

关于解压

关于会员模式

关于水印

关于用户体验

关于内容

关于资源

联系方式

游戏介绍

游戏截图

游戏启动步骤

疑惑答复

游戏介绍

游戏截图

版本介绍

这里教大家如何使用HTML、CSS、JS三个文件制作一款简洁的个人主页

超好看的二次元个人主页 一个很好看的源码，非常大气，

使用方法，直接上传解压即可访问

修改functions.php

修改b2/Modules/Templates/Header.php

css代码

最后下载附件放到网站根目录

超好看的二次元个人主页一个很好看的源码，非常大气，