手把手教你制作一个html个人主页

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

图片[1]-手把手教你制作一个html个人主页-黎洛极客网

首先我们在我们电脑的桌面创建一个记事本文件,输入下面的代码,并重命名为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" >
</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" >
<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" >
<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" >
<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" >
<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" >
<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//lho.cc">李初一网络科技工作室</a> | <span class="far fa-copyright"></span> 2022 All rights reserved.</span>
</footer>
<script src="script.js"></script>
</body>
</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" >
                </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" >
                        <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" >
                        <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" >
                        <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" >
                        <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" >
                        <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//lho.cc">李初一网络科技工作室</a> | <span class="far fa-copyright"></span> 2022 All rights reserved.</span>
    </footer>
    <script src="script.js"></script>
</body>
</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" > </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" > <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" > <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" > <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" > <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" > <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//lho.cc">李初一网络科技工作室</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.lug.ustc.edu.cn/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;
}
}
/*  导入谷歌字体 */@import url('https://fonts.lug.ustc.edu.cn/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;
    }
}
/* 导入谷歌字体 */@import url('https://fonts.lug.ustc.edu.cn/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
}
}
});
});
$(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
            }
        }
    });
});
$(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后面的颜色代码,当然其他的也是支持修改的,非常的简单,对于新手非常的友好

© 版权声明
THE END
喜欢就支持一下吧!
点赞1636 分享