大家好，我是李初一，本次给大家介绍一款我个人十分喜欢的二次元个人主页包括我个人进行的一些美化思路，推荐大家自己手动加入禁用右键的代码，没有右键功能会比较有高级感一点

这次给大家带来的是这样一款的二次元风格个人主页背景为幻灯片或视频
演示地址：https://dg.zyw.one/
演示地址我做了简单的对接，对接了OneTool多平台助手所以会多三个按钮以及小部分对接后的数据，本篇文章将会绕过OneTool后台对接

[b2_file link=”https://lichuyi.lanzoum.com/ifwcS0g1ew1a” name=”二次元个人主页” pass=”” code=””]
原本是做给扒站大哥的，但是我网站做了部分处理，扒站会缺失部分代码，大家无需在意直接下载即可

正文

下载完源码，将源码解压至桌面，这里建议大家先创建一个文件夹，解压至文件夹内

一共34个文件，900k左右的内存，双击index.html查看一下源码首次加载会比较慢一点

大家先看一下页面样式以及部分细节处

页面左上角logo很丑，引导页三个字很突兀，全局性的异次元logo都很丑，生日倒计时不会动

首先移除logo，不需要移除的小伙伴可以在images文件夹内替换图片为自己的

使用NotePad++或Visual Studio Code打开index.html（两款软件都是编辑器，我个人比较喜欢notepad可能是用习惯了）

这里使用Visual Studio Code给大家教学，打开文件先修改文字信息链接啥的，这一点本文不做教学了，与美化无关

移除页内所有logo（不需要的爷们儿可以跳过这里）

Ctrl+F搜索logo

把你所看到的带logo的代码全部注释掉或者删掉

移除以后站点的细节方面看起来就会比较舒适了

修复生日计时

这里永远是373天从来都不会动，初一的演示页都搭建了一个月了都没变化过

本以为是源码问题，结果换了好几个版本都不会动，也找不到作者GitHub开源的地址

所以这里教大家手动修复/修改一下

首先，倒计时我是不会啦，但是让他计时还是很简单的

我们仅需引入JS

<!--运行时长JS - 初一资源网WWW.ZYW.ONE-->
    <script>
    var now = new Date(); 
    function createtime() { 
                          //月、日、年，小时、分、秒
        var grt= new Date("11/15/2022 00:00:00");//此处修改你的建站时间或者网站上线时间 
        now.setTime(now.getTime()+250); 
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
        snum = Math.round(seconds); 
        <!-- 加判断条件避免出现60秒的情况 -->
  if(snum==60){
      snum=0;
    }

  if(String(snum).length ==1 ){snum = "0" + snum;} 
        document.getElementById("timeDate").innerHTML = " "+dnum+"  "; //天数
        document.getElementById("times").innerHTML = hnum + "  "; //小时
        document.getElementById("times2").innerHTML = mnum + "  "; //分
    } 
setInterval("createtime()",250);
</script>

注意哦，这里是在HTML里引入JS而不是创建JS文件，如果要用文件形式大家自己修改调整一下即可

位于</head>之前或者</body>之前都可以，看你个人喜好

然后在插入代码到下面这三个位置替换那几个数字

<span id="times">载入时...</span>
<span id="timeDate">载入天数...</span>
<span id="times2">载入分...</span>

如果没有生效就是代码书写的问题则将这里全代码替换为初一的

<div class="section page-when page page-cent" id="s-when">
                <section class="content">
                    <div class="clock clock-countdown">
            <div class="site-config" data-date="7/18/2021 00:00:00" data-date-timezone="+0"></div>
            <header class="header">
              ? Zy<strong> 初一云已完美运营 </strong> ?
            </header>
                        <div class="elem-left">
                            <div class="digit hours"><span id="times">载入时...</span></div>
                            <div class="text">时</div>
                        </div>            
                        <div class="elem-center">
              <!-- Optional text at top or image logo -->
              <span class="text top">WWW.ZYW.ONE</span>
              <!-- Optional logo at top -->
                            <div class="digit days"><span id="timeDate">载入天数...</span></div>
                            <div class="text">日</div>
                        </div>
                        <div class=" elem-right">
                            <div class="digit minutes"><span id="times2">载入分...</span></div>
                            <div class="text">分</div>
                        </div>

随后便得到了这样的效果

修改英文字体样式

先搜索style-font1

查看其上下有没有类似的代码，如果有则替换成下方的，没有就加上

<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">

字体为谷歌字体，如不显示多刷新几次即可，国内服务器估计是挺悬的可以下载这个字体进行本地引用

[b2_file link=”https://lichuyi.lanzoum.com/ibHlb0g3ri2h” name=”谷歌字体” pass=”” code=””]

然后打开style-font1.css

将这里替换成Pacifico

保存刷新查看就得到了好看的英文字体啦

首页标语发光

首先在文件夹更目录创建style.css并写入以下代码

    /* 初始化 */    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */    min-height: 100vh;
    /* 弹性布局 水平+垂直居中 */    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #06252e;
}
.container{
    /* 投影效果 */    -webkit-box-reflect: below 1px linear-gradient(transparent,rgba(0,0,0,0.2));
}
h2{
    color: #fff;
    font-size: 96px;
    /* 字间距 */    letter-spacing: 15px;
    /* 转大写 */    text-transform: uppercase;
    text-align: center;
    line-height: 76px;
    outline: none;
    /* 自定义属性--c，可通过var函数对其调用 */    --c:lightseagreen;
    /* 调用自定义属性--c，设置文字阴影（发光效果） */    text-shadow: 0 0 10px var(--c),
    0 0 20px var(--c),
    0 0 40px var(--c),
    0 0 80px var(--c),
    0 0 160px var(--c);
    /* 执行动画：动画名 时长 线性的 无限次播放 */    animation: animate 5s linear infinite;
}

/* 定义动画 */@keyframes animate {
    to{
        /* 色相旋转滤镜（设置度数可改变颜色） */        filter: hue-rotate(360deg);
    }
}

然后再HTML内加入

<link rel="stylesheet" href="style.css">

保存刷新即可

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

这里教大家如何使用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后面的颜色代码，当然其他的也是支持修改的，非常的简单，对于新手非常的友好

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

作者： 李初一

Photograph β 一款漂亮的相册主题

主题简介

免费版主题

超好看的二次元主页[附美化教程]

正文

首先移除logo，不需要移除的小伙伴可以在images文件夹内替换图片为自己的

移除页内所有logo（不需要的爷们儿可以跳过这里）

修复生日计时

修改英文字体样式

首页标语发光

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

效果图

HTML

CSS

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

介绍

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

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

作者：李初一

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