yuexing
/
me.html

<!--
	author: '刘宇阳',
	Gitee: 'https://gitee.com/liu_yu_yang666/yuexing',
	describe: '等风来不如追风去，仰望光不如成为光！'
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入icon页面图标 -->
    <link rel="shortcut icon" href="favicon.ico" />
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="./lib/font/iconfont.css">
    <!-- 引入页面 CSS文件 -->
    <link rel="stylesheet" href="./css/me.css">
    <!-- 引入页面 初始化样式 -->
    <link rel="stylesheet" href="./css/init.css">
    <!-- 引入页面 公共样式 -->
    <link rel="stylesheet" href="./css/public.css">
    <!-- 引入页面 响应式样式 -->
    <link rel="stylesheet" href="./css/Responsive.css">
    <!-- 引入组件样式 -->
    <link rel="stylesheet" href="./css/assembly.css">
    <!-- 引入轮播图 -->
    <link rel="stylesheet" href="./lib/swiper/swiper-bundle.min.css" />
    <title>Yuexing - 不断改善，成为最佳🎉</title>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <div class="w">
            <!-- 一级导航 -->
            <ul class="one">
                <!-- 菜单 -->
                <li class="item" id="menu">
                    <a href="javascript:;" style="display: inline-block;">
                        <i class="iconfont icon-caidan1"></i>
                    </a>
                </li>

                <!-- logo -->
                <li class="item1">
                    <a href="./index.html">
                        <img src="./image/logo2.png" alt="" id="logo">
                    </a>
                </li>

                <li class="item1">
                    <a href="./index.html">
                        <i class="iconfont icon-shouye"></i>首页
                    </a>
                </li>

                <li class="item1">
                    <a href="./category.html">
                        <i class="iconfont icon-bijiben1"></i>开发记录
                    </a>
                </li>

                <li class="item1">
                    <a href="./index.html">
                        <i class="iconfont icon-yuandaima"></i>大前端
                    </a>

                    <!-- 二级导航 -->
                    <ul class="two" style="display: none;">
                        <li>
                            <a href="javascript:;">HTML5</a>
                        </li>

                        <li>
                            <a href="javascript:;">CSS3</a>
                        </li>

                        <li>
                            <a href="javascript:;">JavaScript</a>
                        </li>
                    </ul>
                </li>

                <li class="item1">
                    <a href="./index.html">
                        <i class="iconfont icon-zuzhijiagou1"></i>框架
                    </a>

                    <!-- 二级导航 -->
                    <ul class="two" style="display: none;">
                        <li>
                            <a href="javascript:;">Vue</a>
                        </li>

                        <li>
                            <a href="javascript:;">React</a>
                        </li>

                        <li>
                            <a href="javascript:;">Angular</a>
                        </li>
                    </ul>
                </li>

                <li class="item1">
                    <a href="javascript:;">
                        <i class="iconfont icon-zhuti1"></i>扩展
                    </a>

                    <ul class="two" style="display: none;">
                        <li>
                            <a href="./links.html"><i class="iconfont icon-quanzi1"></i>人脉圈</a>
                        </li>

                        <li>
                            <a href="./circle.html"><i class="iconfont icon-pengyouquan1"></i>朋友圈</a>
                        </li>

                        <li>
                            <a href="./bigData.html"><i class="iconfont icon-dashuju2"></i>大数据</a>
                        </li>

                        <li>
							<a href="./me.html"><i class="iconfont icon-wowowo"></i>关于我</a>
						</li>
                    </ul>
                </li>

                <!-- 功能栏 -->
                <li class="function">
                    <ol>
                        <!-- 白天昼夜切换 -->
                        <li id="HighlightToggle">
                            <img src="./image/taiyang.png" alt="">
                        </li>

                        <li>
                            <a href="javascript:;">
                                <i class="iconfont icon-sousuo1"></i>
                            </a>
                        </li>
                    </ol>
                </li>
            </ul>
        </div>
    </div>

    <!-- 移动端的侧边导航栏 -->
    <div class="mNav">
        <!-- 头像 -->
        <div class="user">
            <img src="./image/user.png" alt="">
            <span>Yuexing</span>
            <p>不断改善成为最佳!</p>
        </div>

        <!-- 导航栏 -->
        <ul>
            <li class="item">
                <a href="./index.html">
                    <i class="iconfont icon-shouye"></i>首页
                </a>
            </li>

            <li class="item">
                <a href="./category.html">
                    <i class="iconfont icon-bijiben1"></i>开发记录
                </a>
            </li>

            <li class="item">
                <a href="javascript:;" id="twoNav">
                    <i class="iconfont icon-yuandaima"></i>大前端
                </a>

                <!-- 二级导航 -->
                <ul class="two">
                    <li>
                        <a href="javascript:;">HTML5</a>
                    </li>

                    <li>
                        <a href="javascript:;">CSS3</a>
                    </li>

                    <li>
                        <a href="javascript:;">JavaScript</a>
                    </li>
                </ul>
            </li>

            <li class="item">
                <a href="javascript:;" id="twoNav">
                    <i class="iconfont icon-zuzhijiagou1"></i>框架
                </a>

                <!-- 二级导航 -->
                <ul class="two">
                    <li>
                        <a href="javascript:;">Vue</a>
                    </li>

                    <li>
                        <a href="javascript:;">React</a>
                    </li>

                    <li>
                        <a href="javascript:;">Angular</a>
                    </li>
                </ul>
            </li>

            <li class="item">
                <a href="javascript:;" id="twoNav">
                    <i class="iconfont icon-zhuti1"></i>扩展
                </a>

                <ul class="two">
                    <li>
                        <a href="./links.html">
                            <i class="iconfont icon-quanzi1"></i>人脉圈
                        </a>
                    </li>

                    <li>
                        <a href="./circle.html">
                            <i class="iconfont icon-pengyouquan1"></i>朋友圈
                        </a>
                    </li>

                    <li>
                        <a href="./bigData.html"><i class="iconfont icon-dashuju2"></i>大数据</a>
                    </li>

                    <li>
                        <a href="./me.html"><i class="iconfont icon-wowowo"></i>关于我</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <!-- 遮罩层 -->
    <div class="mask"></div>

    <!-- 轮播图 -->
    <div class="banner">
        <!-- 分类信息 -->
        <div class="cate_info">
            <h1>刘宇阳 (LiuYuYang)</h1>
        </div>
    </div>

    <!-- 主体内容 -->
    <div class="main">
        <div class="w">
            <!-- 文章列表 -->
            <div class="list home_list">
                <!-- 小圆点 -->
                <div class="dots">
                    <ol>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ol>
                </div>

                <!-- 文章内容 -->
                <div class="article_Info">
                    <h1>🎉Hello 欢迎你了解我！</h1>
                    <p>一直对网站很感兴趣，从小就希望有一个属于自己的网站，在16年的时候成功进入站长圈，并通过各种自学，以及各种折腾，才有了你现在看到的网站 <a
                            href="http://liuyuyang.net" class="s">http://liuyuyang.net</a></p>

                    <h2>个人介绍</h2>
                    <p>大家好，我叫刘宇阳。我是一名 <i class="s">JavaScript狂热爱好者</i>
                        ，我从小就对网站开发方向有着浓厚的兴趣。所以我的梦想是做一名技术顶尖的架构师，虽然我现在并不知道架构师是做什么的，但我唯一确定的是架构师是一种技术顶尖的程序员，因此架构师一直是我努力的终极目标。
                    </p>

                    <h2>不谋全局者，不足谋一域</h2>
                    <p>我选择的专业是Web全栈开发，我来告诉大家我为什么会选择全栈：</p>
                    <p>因为我认为 <b>不谋全局者，不足谋一域</b>
                        。如果只会前后端其一，那么一个人是做不出一个完整项目的。只会前端而不会后端的话，是一个没有灵魂的项目，而只会后端不会前端的话项目写的再好也看不到任何效果，没有什么成就感。</p>
                    <p>我想学习的技术是一个人能够做出整个前后端项目的技术，所以这就是我想成为全栈开发工程师的原因。</p>
                    <p>最主要的是我学习编程的初心并不是看上了程序员的高薪资，而是完全为了兴趣。这也就导致了我对编程疯狂的热爱。我认为人生中最快乐的事情莫过于自己的兴趣爱好是一种很酷的职业，每天干着自己喜欢的事情还那么赚钱。想想就美滋滋！
                    </p>
                    <p>最后附上一句我很喜欢的话：“ <b>前途未必光明坦荡，但一定充满渴望！</b> ”</p>
                    <p>这是我的微信：<i class="s">LiuYuYang1o24</i> 欢迎跟我做朋友！</p>
                </div>

                <!-- 评论区 -->
                <div class="article">
                    <div class="comment">
                        <!-- 标题 -->
                        <div class="title">
                            <i class="iconfont icon-pinglun"></i>
                            <span>评论</span>
                        </div>
                        <hr>

                        <!-- 表情包 -->
                        <div class="phiz">
                            <img class="tbbq" draggable="false" title="：滑稽：" num="0" src="./image/phiz/face_0.png">
                            <img class="tbbq" title="：喷：" num="1" src="./image/phiz/face_1.png">
                            <img class="tbbq" title="：喜欢：" num="2" src="./image/phiz/face_2.png">
                            <img class="tbbq" title="：阴险：" num="3" src="./image/phiz/face_3.png">
                            <img class="tbbq" title="：怒：" num="4" src="./image/phiz/face_4.png">
                            <img class="tbbq" title="：笑眼：" num="5" src="./image/phiz/face_5.png">
                            <img class="tbbq" title="：黑线：" num="6" src="./image/phiz/face_6.png">
                            <img class="tbbq" title="：鼓掌：" num="7" src="./image/phiz/face_7.png">
                            <img class="tbbq" title="：乖：" num="8" src="./image/phiz/face_8.png">
                            <img class="tbbq" title="：汗：" num="9" src="./image/phiz/face_9.png">
                            <img class="tbbq" title="：惊哭：" num="10" src="./image/phiz/face_10.png">
                            <img class="tbbq" title="：酷：" num="11" src="./image/phiz/face_11.png">
                            <img class="tbbq" title="：狂汗：" num="12" src="./image/phiz/face_12.png">
                            <img class="tbbq" title="：问号：" num="13" src="./image/phiz/face_13.png">
                            <img class="tbbq" title="：真棒：" num="14" src="./image/phiz/face_14.png">
                            <img class="tbbq" title="：不高兴：" num="15" src="./image/phiz/face_15.png">
                            <img class="tbbq" title="：大哭：" num="16" src="./image/phiz/face_16.png">
                            <img class="tbbq" title="：思考：" num="17" src="./image/phiz/face_17.png">
                        </div>

                        <!-- 评论区 -->
                        <div class="comment_box">
                            <textarea name="comment_box" placeholder="来发一针见血的评论吧!"></textarea>
                        </div>

                        <!-- 评论者信息 -->
                        <div class="comment_info">
                            <img src="./image/user.png" alt="">
                            <input type="text" placeholder="QQ号可获取头像和昵称">
                            <input type="text" placeholder="昵称*" disabled>
                            <a href="javascript:;">提交评论</a>
                        </div>

                        <!-- 华丽的分割线 -->
                        <div class="hr">
                            <div></div>
                            <!-- 评论区标题 -->
                            <div class="title_hr">
                                <i class="iconfont icon-pinglun"></i>
                                <span>评论区</span>
                            </div>
                        </div>

                        <!-- 评论内容 -->
                        <div class="comment_content">
                            <ul>
                                <li>
                                    <!-- 评论者信息 -->
                                    <div class="comment_user">
                                        <img src="https://q2.qlogo.cn/headimg_dl?dst_uin=3311118881&spec=100" alt="">
                                        <div>
                                            <span>刘宇阳</span>
                                            <span>2022-08-28 12:45</span>
                                        </div>
                                    </div>

                                    <!-- 评论内容 -->
                                    <div class="comment_main">
                                        Gitee开源地址: <a href="https://gitee.com/liu_yu_yang666/yuexing">https://gitee.com/liu_yu_yang666/yuexing</a>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <!-- 分页 -->
                        <!-- <div class="pagination">
                            <a href="javascript:;">‹‹</a>
                            <a href="javascript:;">‹</a>
                            <a href="javascript:;" class="paginationAction">1</a>
                            <a href="javascript:;">2</a>
                            <a href="javascript:;">3</a>
                            <a href="javascript:;">4</a>
                            <a href="javascript:;">5</a>
                            <a href="javascript:;">6</a>
                            <a href="javascript:;">››</a>
                        </div> -->

                        <!-- 加载列表 -->
                        <!-- <div class="loadList">
                            <i class="iconfont icon-loadm"></i>
                            <span>加载更多</span>
                        </div> -->
                    </div>
                </div>
            </div>

            <!-- 功能模块 -->
            <div class="function">
                <div class="sticky">
                    <!-- 作者详情 -->
                    <div class="author">
                        <!-- 背景图片 -->
                        <div class="author-bg">
                            <!-- 头像 -->
                            <div class="avatar">
                                <img src="./image/user.png" alt="">
                            </div>
                        </div>

                        <!-- 作者信息 -->
                        <div class="text">
                            <h4>
                                <a href="javascript:;">悦兴</a>
                                <div class="medal"></div>
                            </h4>
                            <p>也许，将会是最好用的博客管理系统</p>
                        </div>

                        <!-- 功能 -->
                        <div class="fun">
                            <!-- 发布文章 -->
                            <div class="login"><a href="javascript:;">登录</a></div>

                            <span></span>

                            <!-- 登录后台 -->
                            <div class="register"><a href="javascript:;">注册</a></div>
                        </div>
                    </div>

                    <!-- 随机文章 -->
                    <div class="containerA">
                        <!-- 标题 -->
                        <div class="title">
                            <h3><i class="iconfont icon-suijishushengcheng"></i> 随机文章</h3>
                            <!-- 小圆点 -->
                            <div class="dots">
                                <ol>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ol>
                            </div>
                        </div>

                        <!-- 随机文章 -->
                        <div class="random_Alist">
                            <ul>
                                <li>
                                    <i class="iconfont icon-xiangyoujiantou"></i>
                                    <a href="javascript:;">2022 年的 React 生态</a>
                                </li>

                                <li>
                                    <i class="iconfont icon-xiangyoujiantou"></i>
                                    <a href="javascript:;">字节跳动自研高性能微服务框架 Kitex 的演进之旅</a>
                                </li>

                                <li>
                                    <i class="iconfont icon-xiangyoujiantou"></i>
                                    <a href="javascript:;">两年前端，广州求职，要价 14k，依我说，小伙子可以多要点，涉及组件建设、工程化以及丰富的项目经验</a>
                                </li>

                                <li>
                                    <i class="iconfont icon-xiangyoujiantou"></i>
                                    <a href="javascript:;">解放双手！推荐一款阿里开源的低代码工具，YYDS！</a>
                                </li>

                                <li>
                                    <i class="iconfont icon-xiangyoujiantou"></i>
                                    <a href="javascript:;">Web3.0来了，花呗借呗前端团队开源的Web图形引擎会成为元宇宙的技术支撑吗？</a>
                                </li>

                                <li>
                                    <i class="iconfont icon-xiangyoujiantou"></i>
                                    <a href="javascript:;">超越 Nginx！号称下一代 Web 服务器，用起来够优雅！</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- 标签栏 -->
                    <div class="containerA">
                        <!-- 标题 -->
                        <div class="title">
                            <h3><i class="iconfont icon-tuya_huabanfuben"></i> 标签栏</h3>
                            <!-- 小圆点 -->
                            <div class="dots">
                                <ol>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ol>
                            </div>
                        </div>

                        <!-- 标签 -->
                        <div class="containerA_Tags">
                            <a href="javascript:;">HTML</a>
                            <a href="javascript:;">CSS</a>
                            <a href="javascript:;">Vue</a>
                            <a href="javascript:;">jQuery</a>
                            <a href="javascript:;">Vue</a>
                            <a href="javascript:;">React</a>
                            <a href="javascript:;">Angular</a>
                            <a href="javascript:;">less</a>
                            <a href="javascript:;">Node.js</a>
                            <a href="javascript:;">Bootstrap</a>
                            <a href="javascript:;">Element</a>
                            <a href="javascript:;">scss</a>
                            <a href="javascript:;">uni-app</a>
                            <a href="javascript:;">Foundation</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 友情链接 -->
    <div class="links w">
        <h3>
            <i class="iconfont icon-lianjie1"></i>
            <span>友情链接</span>
            <a href="./links.html" style="float: right;font-size: 15px;">更多</a>
        </h3>

        <ul>
            <li>
                <a href="https://github.com/">GitHub</a>
            </li>
            <li>
                <a href="https://www.csdn.net/">CSDN</a>
            </li>
            <li>
                <a href="https://juejin.cn/">掘金</a>
            </li>
            <li>
                <a href="https://www.cnblogs.com/">博客园</a>
            </li>
            <li>
                <a href="https://segmentfault.com/">思否</a>
            </li>
        </ul>
    </div>

    <!-- 底部 -->
    <div class="footer">
        <div class="w">
            <!-- 站点信息 -->
            <div class="Web_info">
                <!-- 站点名称 -->
                <div class="Web_name">
                    <h1><a href="javascript:;">Yuexing</a></h1>
                    <div class="dian"></div>
                </div>

                <!-- 站点描述 -->
                <div class="Web_describe">
                    <p>© 2022 <a href="javascript:;">Yuexing</a> - 也许，将会是最好用的博客管理系统！</p>
                    <p>Perhaps, it will be the best blog management system!</p>
                </div>
            </div>

            <!-- ICP备案号 -->
            <div class="ICP">
                <a href="https://beian.miit.gov.cn/#/Integrated/index"><i
                        class="iconfont icon-icp-license"></i>豫ICP备2020031040号-1</a>
            </div>
        </div>
    </div>

    <!-- 侧边工具栏 -->
    <div class="tool">
        <!-- 主题切换 -->
        <div class="item">
            <a href="javascript:;">
                <i class="iconfont icon-zhuti_yifu_o"></i>
            </a>
        </div>

        <!-- 返回顶部 -->
        <div class="item">
            <a href="javascript:;" id="returnTop">
                <i class="iconfont icon-fanhuidingbu1"></i>
            </a>
        </div>
    </div>

    <!-- 引入公共 JavaScript文件 -->
    <script src="./js/public.js"></script>
    <!-- 引入页面JavaScript文件 -->
    <script src="./js/me.js"></script>
</body>

</html>