CSS

【7B2主题美化】网格样式文章鼠标悬浮弹出分类角标

效果截图

角标底色同步你站点

css样式

.post-1 a.post-list-cat-item {
    background:  var(--b2color);
    color: #fff!important;
    padding: 4px;
    line-height: 12px;
    border-radius: 4px;
}
.post-list-meta-box {
	justify-content: space-between;
	margin: 0px;
	color: #AAAEB3;
}
.post-list-cat {
    font-size: 12px;
    margin: 10px;
    top: 0px;
    position: absolute;
    z-index: 2;
    display: none;
}
.post-list .b2_gap .post-list-item :hover .post-list-cat{
	display: block;
}

2023年1月4日

【7B2主题美化】弹窗公告美化

效果图

放入主题的style.css文件中，或自行引入。

Css代码：

.gg-box .modal-content {
width: 28rem;
overflow: hidden
margin-top: 0;
}
.gg-box-title .gg-title {
width: 100%;
text-align: center;
padding: 0!important;
}
.modal-content .gg-box-title h2 {
font-size: 22px;
margin-bottom: 0;
text-align: center;
font-weight:bold;
}
.gg-box-title .gg-title span {
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
}
.title-bg {
border: 0;
}
.modal-content .gg-title {
padding: 20px 30px 0px 30px;
}
.modal-content .gg-title a {
font-size: 16px;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
display: block;
font-family: Arial;
text-decoration:none
}
.modal-content .gg-desc {
padding: 20px 30px;
font-size: 14px;
letter-spacing: .5px;
padding-bottom: 0;
}
.modal-content .gg-desc p {
color: #909399;
font-family: Arial;
background: #f8f8f8;
padding: 20px;
line-height: 24px;
}
.gg-button a {
border: 0;
display: inline-block;
padding: 8px 12px;
font-size: 14px;
line-height: 20px;
letter-spacing: .5px;
background-color: #206aff;
background-image: -webkit-gradient(linear, left top, right top, from(#006eff), to(#13adff));
background-image: -webkit-linear-gradient(left, #006eff, #13adff);
background-image: -o-linear-gradient(left, #006eff 0, #13adff 100%);
background-image: linear-gradient(90deg, #006eff, #13adff);
-webkit-box-shadow: 0 5px 10px 0 rgb(16 110 253 / 30%);
box-shadow: 0 5px 10px 0 rgb(16 110 253 / 30%);
}

2022年11月13日

萌翻少女心的发光果冻泡泡

效果图

萌翻少女，，，！初一觉得不大可能，萌翻一片少男倒是挺有可能，可用作与跳转页以及网站预加载动画

HTML

<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>萌翻少女心的发光果冻泡泡</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="bubble"></div>
        <div class="shadow"></div>
    </div>
</body>

</html>

*{
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */    height: 100vh;
    /* 弹性布局 居中显示 */    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */    background: linear-gradient(150deg,#d299c2,#fef9d7);
    /* 溢出隐藏 */    overflow: hidden;
}
.container{
    width: 200px;
    height: 200px;
    /* 相对定位 */    position: relative;
}
/* 泡泡 */.bubble{
    width: 100%;
    height: 100%;
    /* 径向渐变 */    background: radial-gradient(circle at 75% 30%,#fff 5px,#ff21c0 8%,#5b5b5b 60%,#ff21c0 100%);
    border-radius: 50%;
    /* 阴影 */    box-shadow: inset 0 0 20px #fff,
        inset 10px 0 46px #eaf5fc,
        inset 80px 0 60px #efcde6,
        inset -20px -60px 100px #f9f6de,
        inset 0 50px 140px #f9f6de,
        0 0 90px #fff;
    /* 执行动画：动画名 时长 加速后减速 无限次播放 */    animation: bubble 4s ease-in-out infinite;
}
.shadow{
    background-color: rgba(0,0,0,0.15);
    width: 150px;
    height: 40px;
    border-radius: 50%;
    /* 绝对定位 */    position: absolute;
    left: 50%;
    margin-left: -75px;
    bottom: -100px;
    /* 一点点模糊效果 */    filter: blur(1px);
    /* 执行动画：动画名 时长 加速后减速 无限次播放 */    animation: shadow 4s ease-in-out infinite;
}

/* 定义动画 *//* 泡泡浮动动画 */@keyframes bubble {
    0%,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-80px);
    }
}
/* 投影动画 */@keyframes shadow {
    0%,100%{
        transform: scale(0.5);
    }
    50%{
        transform: scale(1);
    }
}

2022年11月10日

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

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

这里教大家如何使用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日

WordPress添加回到顶部悬挂猫咪

使用教程

【回到顶部悬挂猫咪】只能电脑端显示，需要手机端显示，自己修改CSS代码。

1、先下载【回到顶部悬挂猫咪】的安装包，解压并放在你的网站根目录

2、请在主题目录下header.php末尾添加下面的代码

截图

代码

<!--回到顶部-->
<link rel="stylesheet" type="text/css" href="/GoTop/css/szgotop.css" />
<div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -900px;"></div>
<script type="text/javascript" src="/GoTop/js/szgotop.js"></script>

效果图

2022年6月20日

WordPress后台主题插件:wp-admin-theme-cd汉化版本

截图

简介

集成了美化后台和登录页，还附带了对系统设置的调整，更加强大的阅览服务器设置，让你更好的调整服务器、优化WP主题和程序，插件大小仅有200K，主题支持自定义！

操作路径为：工具-WPAT设置

功能

自定义选项
针对主题进行修改；
颜色随意修改；
登录页LOGO和页面修改；
页脚信息修改（涵盖信用记录、内存使用情况、本隐藏、IP地址隐藏等）；
自定义CSS（含登录页CSS）；
SVG、ICO支持修改；
支持多站点；
支持网站主题权限修改；
META BOX修改（各类编辑框）；
仪表板小部件修改；

2022年6月16日

标签： CSS

主题介绍

截图

设置

更新

站点副标题

站点 LOGO

站点头像

首页背景图像

随机背景图像地址

背景气泡

页脚左下角文字

页脚小工具

自定义 css

全站 pjax 模式

效果截图

效果图

Css代码：

效果图

HTML

CSS

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

使用教程

截图

简介

功能