1 Star 0 Fork 11

rumaodi/Yuexing Blog

forked from 刘宇阳/Thrive-Blog 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
circle.html 34.21 KB
一键复制 编辑 原始数据 按行查看 历史
刘宇阳 提交于 2022-08-25 13:27 . 优化交互效果&优化代码
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866
<!--
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/circle.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>
</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>
</ul>
</li>
</ul>
</div>
<!-- 遮罩层 -->
<div class="mask"></div>
<!-- 轮播图 -->
<div class="banner">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="text">
<h3><i class="iconfont icon-pengyouquan1"></i>朋友圈</h3>
<p>Wechat Moments</p>
</div>
<img src="http://139.196.43.147/gallery/t01d6f5fd3610da0a08.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- 引入swiper轮播图插件 -->
<script src="./lib/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
dynamicBullets: true
},
autoplay: {
delay: 5000
},
loop: false,
});
</script>
<!-- 波纹 -->
<div class="ripple">
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave"
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
</g>
</svg>
</div>
</div>
<!-- 主体内容 -->
<div class="main">
<div class="w">
<!-- 文章列表 -->
<div class="list home_list">
<!-- 朋友圈 -->
<div class="circle">
<!-- 朋友圈列表 -->
<div class="list">
<!-- 小圆点 -->
<div class="dots">
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<!-- 标题 -->
<div class="title">
<img src="http://q1.qlogo.cn/g?b=qq&nk=3311118881&s=100" alt="">
<h3>梦想家阳阳</h3>
</div>
<!-- 内容 -->
<div class="info">
<!-- 文本内容 -->
<div class="listInfo">
<p>今天在看到一个问题,代码的终极追求是什么?<br>代码的终极追求是不是稳定、高性能、高扩展性,最好傻子也能来修改和维护
那么程序员的终极目标,是否就是把代码打磨到能把自己裁掉到程度</p>
</div>
<!-- 图片 -->
<div class="listImg">
</div>
</div>
<!-- 底部 -->
<div class="listFootel">
<span>昨天</span>
<!-- 点赞评论 -->
<div class="fn">
<a href="javascript:;" style="margin-right: 25px;">
<i class="iconfont icon-dianzan3"></i>13
</a>
<a href="javascript:;" id="circleComment">
<i class="iconfont icon-pinglun1"></i>5
</a>
</div>
</div>
<!-- 评论框 -->
<div class="commentBox">
<!-- 评论 -->
<div class="comment">
<!-- 文本里面限制字数200字 -->
<textarea placeholder="说些什么吧..."></textarea>
<!-- 发布按钮 -->
<a href="javascript:;">
<i class="iconfont icon-yubaofabu"></i>
</a>
</div>
<!-- 评论列表 -->
<div class="commentList">
<div class="item">
<div class="title">
<img src="http://q1.qlogo.cn/g?b=qq&nk=2079890613&s=100" alt="">
<h3>晴天</h3>
</div>
<div class="info">
<p>网站好好看,我好爱!</p>
</div>
</div>
<div class="item">
<div class="title">
<img src="http://q1.qlogo.cn/g?b=qq&nk=380316737&s=100" alt="">
<h3>差一点</h3>
</div>
<div class="info">
<p>牛蛙! 牛蛙!</p>
</div>
</div>
<div class="item">
<div class="title">
<img src="http://q1.qlogo.cn/g?b=qq&nk=1651007391&s=100" alt="">
<h3>牧原</h3>
</div>
<div class="info">
<p>是个不错的作品</p>
</div>
</div>
</div>
</div>
</div>
<div class="list">
<!-- 小圆点 -->
<div class="dots">
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<!-- 标题 -->
<div class="title">
<img src="http://q1.qlogo.cn/g?b=qq&nk=3311118881&s=100" alt="">
<h3>梦想家阳阳</h3>
</div>
<!-- 内容 -->
<div class="info">
<!-- 文本内容 -->
<div class="listInfo">
<p>我每天花十几个小时学习编程,你们却用 "聪明" 两个字埋没我的所有努力</p>
</div>
<!-- 图片 -->
<div class="listImg">
<img src="http://liuyuyang.net/usr/uploads/2022/07/2791484077.png" alt="">
</div>
</div>
<!-- 底部 -->
<div class="listFootel">
<span>07-31</span>
<!-- 点赞评论 -->
<div class="fn">
<a href="javascript:;" style="margin-right: 25px;">
<i class="iconfont icon-dianzan3"></i>5
</a>
<a href="javascript:;" id="circleComment">
<i class="iconfont icon-pinglun1"></i>9
</a>
</div>
</div>
<!-- 评论框 -->
<div class="commentBox">
<!-- 评论 -->
<div class="comment">
<!-- 文本里面限制字数200字 -->
<textarea placeholder="说些什么吧..."></textarea>
<!-- 发布按钮 -->
<a href="javascript:;">
<i class="iconfont icon-yubaofabu"></i>
</a>
</div>
<!-- 评论列表 -->
<div class="commentList">
<div class="item">
<div class="title">
<img src="http://q1.qlogo.cn/g?b=qq&nk=2079890613&s=100" alt="">
<h3>晴天</h3>
</div>
<div class="info">
<p>网站好好看,我好爱!</p>
</div>
</div>
<div class="item">
<div class="title">
<img src="http://q1.qlogo.cn/g?b=qq&nk=380316737&s=100" alt="">
<h3>差一点</h3>
</div>
<div class="info">
<p>牛蛙! 牛蛙!</p>
</div>
</div>
<div class="item">
<div class="title">
<img src="http://q1.qlogo.cn/g?b=qq&nk=1651007391&s=100" alt="">
<h3>牧原</h3>
</div>
<div class="info">
<p>是个不错的作品</p>
</div>
</div>
</div>
</div>
</div>
<div class="list">
<!-- 小圆点 -->
<div class="dots">
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<!-- 标题 -->
<div class="title">
<img src="http://q1.qlogo.cn/g?b=qq&nk=3311118881&s=100" alt="">
<h3>梦想家阳阳</h3>
</div>
<!-- 内容 -->
<div class="info">
<!-- 文本内容 -->
<div class="listInfo">
<p>UI是我、前端是我、后端是我、测试也是我、产品经理还是我,这就是传说中的全栈开发工程师😎</p>
</div>
<!-- 图片 -->
<div class="listImg">
<img src="http://liuyuyang.net/usr/uploads/2022/07/1673808997.jpg" alt="">
</div>
</div>
<!-- 底部 -->
<div class="listFootel">
<span>一月前</span>
<!-- 点赞评论 -->
<div class="fn">
<a href="javascript:;" style="margin-right: 25px;">
<i class="iconfont icon-dianzan3"></i>54
</a>
<a href="javascript:;" id="circleComment">
<i class="iconfont icon-pinglun1"></i>28
</a>
</div>
</div>
<!-- 评论框 -->
<div class="commentBox">
<!-- 评论 -->
<div class="comment">
<!-- 文本里面限制字数200字 -->
<textarea placeholder="说些什么吧..."></textarea>
<!-- 发布按钮 -->
<a href="javascript:;">
<i class="iconfont icon-yubaofabu"></i>
</a>
</div>
<!-- 评论列表 -->
<div class="commentList">
<div class="item">
<div class="title">
<img src="http://q1.qlogo.cn/g?b=qq&nk=2079890613&s=100" alt="">
<h3>晴天</h3>
</div>
<div class="info">
<p>网站好好看,我好爱!</p>
</div>
</div>
<div class="item">
<div class="title">
<img src="http://q1.qlogo.cn/g?b=qq&nk=380316737&s=100" alt="">
<h3>差一点</h3>
</div>
<div class="info">
<p>牛蛙! 牛蛙!</p>
</div>
</div>
<div class="item">
<div class="title">
<img src="http://q1.qlogo.cn/g?b=qq&nk=1651007391&s=100" alt="">
<h3>牧原</h3>
</div>
<div class="info">
<p>是个不错的作品</p>
</div>
</div>
</div>
</div>
</div>
<div class="list">
<!-- 小圆点 -->
<div class="dots">
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<!-- 标题 -->
<div class="title">
<img src="http://q1.qlogo.cn/g?b=qq&nk=3311118881&s=100" alt="">
<h3>梦想家阳阳</h3>
</div>
<!-- 内容 -->
<div class="info">
<!-- 文本内容 -->
<div class="listInfo">
<p>是傍晚的棉花糖</p>
</div>
<!-- 图片 -->
<div class="listImg">
<img src="https://inis.ztyang.com/storage/users/files/1/2022-07/1658404357.jpeg" alt="">
<img src="https://inis.ztyang.com/storage/users/files/1/2022-07/1658404367.jpeg" alt="">
<img src="https://inis.ztyang.com/storage/users/files/1/2022-07/1658404381.jpeg" alt="">
<img src="https://inis.ztyang.com/storage/users/files/1/2022-07/1658404394.jpeg" alt="">
</div>
</div>
<!-- 底部 -->
<div class="listFootel">
<span>一年前</span>
<!-- 点赞评论 -->
<div class="fn">
<a href="javascript:;" style="margin-right: 25px;">
<i class="iconfont icon-dianzan3"></i>33
</a>
<a href="javascript:;" id="circleComment">
<i class="iconfont icon-pinglun1"></i>7
</a>
</div>
</div>
<!-- 评论框 -->
<div class="commentBox">
<!-- 评论 -->
<div class="comment">
<!-- 文本里面限制字数200字 -->
<textarea placeholder="说些什么吧..."></textarea>
<!-- 发布按钮 -->
<a href="javascript:;">
<i class="iconfont icon-yubaofabu"></i>
</a>
</div>
<!-- 评论列表 -->
<div class="commentList">
<div class="item">
<div class="title">
<img src="http://q1.qlogo.cn/g?b=qq&nk=2079890613&s=100" alt="">
<h3>晴天</h3>
</div>
<div class="info">
<p>网站好好看,我好爱!</p>
</div>
</div>
<div class="item">
<div class="title">
<img src="http://q1.qlogo.cn/g?b=qq&nk=380316737&s=100" alt="">
<h3>差一点</h3>
</div>
<div class="info">
<p>牛蛙! 牛蛙!</p>
</div>
</div>
<div class="item">
<div class="title">
<img src="http://q1.qlogo.cn/g?b=qq&nk=1651007391&s=100" alt="">
<h3>牧原</h3>
</div>
<div class="info">
<p>是个不错的作品</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 加载列表 -->
<div class="loadList" style="display: block;">
<i class="iconfont icon-loadm"></i>
<span>加载更多</span>
</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="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/circle.js"></script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/rumaodi/yuexing.git
git@gitee.com:rumaodi/yuexing.git
rumaodi
yuexing
Yuexing Blog
master

搜索帮助

0d507c66 1850385 C8b1a773 1850385