下面是我的初代GitHub个人主页的源码,页面风格简单清爽,基本上没有使用花里胡哨的设计,可供HTML初学者参考。写这个让我对html css js md等有了初步的了解,感觉对日后用hexo框架搭建博客的过程有很大帮助。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><!-- 适应移动端设备的网页浏览 --><meta name="viewport" content="width=device-width,initial-scale=1.0"><!-- 合理设置引入js/css文件的代码位置,防止样式覆盖 --><!-- 这里用静态方式给出页面的css样式,也可以用link链接.css文件 --><!-- 引入看板娘css文件 --><script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script><!-- 引入font-awesome字体 --><!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/> --><link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css"><script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script><style type="text/css">/* 里面的代码应符合css格式规范 *//* 页面整体样式 */html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0}body{font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:16px;line-height:1.6;color:#333;padding:20px;max-width:960px;margin:0 auto}body>*:first-child{margin-top:0 !important}body>*:last-child{margin-bottom:0 !important}p,blockquote,ul,ol,dl,table,pre{margin:15px 0}h1,h2,h3,h4,h5,h6{margin:20px 0 10px;padding:0;font-weight:bold;-webkit-font-smoothing:antialiased}h1 tt,h1 code,h2 tt,h2 code,h3 tt,h3 code,h4 tt,h4 code,h5 tt,h5 code,h6 tt,h6 code{font-size:inherit}h1{font-size:28px;color:#000}h2{font-size:24px;border-bottom:1px solid #ccc;color:#000}h3{font-size:18px}h4{font-size:16px}h5{font-size:14px}h6{color:#777;font-size:14px}body>h2:first-child,body>h1:first-child,body>h1:first-child+h2,body>h3:first-child,body>h4:first-child,body>h5:first-child,body>h6:first-child{margin-top:0;padding-top:0}a:first-child h1,a:first-child h2,a:first-child h3,a:first-child h4,a:first-child h5,a:first-child h6{margin-top:0;padding-top:0}h1+p,h2+p,h3+p,h4+p,h5+p,h6+p{margin-top:10px}a{color:#4183c4;text-decoration:none}a:hover{text-decoration:underline}ul,ol{padding-left:30px}ul li>:first-child,ol li>:first-child,ul li ul:first-of-type,ol li ol:first-of-type,ul li ol:first-of-type,ol li ul:first-of-type{margin-top:0}ul ul,ul ol,ol ol,ol ul{margin-bottom:0}dl{padding:0}dl dt{font-size:14px;font-weight:bold;font-style:italic;padding:0;margin:15px 0 5px}dl dt:first-child{padding:0}dl dt>:first-child{margin-top:0}dl dt>:last-child{margin-bottom:0}dl dd{margin:0 0 15px;padding:0 15px}dl dd>:first-child{margin-top:0}dl dd>:last-child{margin-bottom:0}pre,code,tt{font-size:12px;font-family:Consolas,"Liberation Mono",Courier,monospace}code,tt{margin:0;padding:0;white-space:nowrap;border:1px solid #eaeaea;background-color:#f8f8f8;border-radius:3px}pre>code{margin:0;padding:0;white-space:pre;border:0;background:transparent}pre{background-color:#f8f8f8;border:1px solid #ccc;font-size:13px;line-height:19px;overflow:auto;padding:6px 10px;border-radius:3px}pre code,pre tt{background-color:transparent;border:0}blockquote{border-left:4px solid #DDD;padding:0 15px;color:#777}blockquote>:first-child{margin-top:0}blockquote>:last-child{margin-bottom:0}hr{clear:both;margin:15px 0;height:0;overflow:hidden;border:0;background:transparent;border-bottom:4px solid #ddd;padding:0}table th{font-weight:bold}table th,table td{border:1px solid #ccc;padding:6px 13px}table tr{border-top:1px solid #ccc;background-color:#fff}table tr:nth-child(2n){background-color:#f8f8f8}img{max-width:100%}    body {background-color:#e4f6ff}/* 动画画布样式 */canvas{position: static;width: 100%;height: 600px;background: #f4fffe;}/* 设置页面右侧滚动条样式 *//* 滚动条凹槽的颜色,还可以设置边框属性 */::-webkit-scrollbar-track-piece { background-color:#c8ebff;}/* 滚动条的宽高 */::-webkit-scrollbar {width:15px;height:10px;}/* 滚动条内部小滑块 */::-webkit-scrollbar-thumb {background-color:#0d71c4;background-clip:padding-box;min-height:28px;background-image: -webkit-linear-gradient(45deg, rgb(71, 227, 255) 25%, transparent 30%,transparent 70%, rgba(27, 73, 173, 0.979) 25%);}::-webkit-scrollbar-thumb:hover {background-color:rgb(5, 155, 255);}</style><title>Silence_Tang | 凛冬散尽,星河长明。</title><link rel="shortcut icon" href="https://z3.ax1x.com/2021/07/18/W8UfJJ.png" type="image/x-icon"><link rel="icon" href="https://z3.ax1x.com/2021/07/18/W8UfJJ.png" type="image/x-icon"><link rel="apple-touch-icon" href="https://z3.ax1x.com/2021/07/18/W8UfJJ.png">
</head><body><!-- 引入人物动画js --><script src="https://www.html5tricks.com/demo/html5-person-joint/js/index.js"></script><!-- 引入不蒜子计数 --><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><!-- 引入旋转花瓣加载特效 --><center>浏览量:<span id="busuanzi_value_site_pv"><i class="fa fa-spinner fa-spin"></i></span>												

纯手撸初代GitHub个人主页源码相关推荐

  1. 自适应简约风格个人主页源码

    文章目录[隐藏] 源码介绍 源码截图 源码介绍 一款有音乐,有花瓣飘落,有看板娘,还有轮播图,轮播图可以添加跳转链接,非常实用的个人介绍导航页面,大家需要的自行下载! 源码截图 附 件 下 载 文件名 ...

  2. 2023最新最新PHP代挂网站源码+无需域名授权/支持燃鹅代抽

    正文: 最新PHP代挂网站源码+无需授权/支持燃鹅代抽,有兴趣自行去体验吧. 更新内容: 1.上线新功能[心悦礼包] 可完成G分签到,热门手游礼包领取等. 2.上线新功能[动漫任务] 可完成手Q动漫每 ...

  3. PHP仿代下狗源码-素材代下载搜索引擎系统整站打包

    介绍: PHP仿代下狗源码-素材代下载搜索引擎系统多功能/自带火车头采集接口/源码素材付费下载系统/整站打包完美运营版本 缺点:这个用户登录必须对接QQ互联登录,有能力可以自己二开注册登录 1.采用p ...

  4. 上传本地代码到github从github下载源码

    最近在玩github,下面简单介绍下githup的使用 将本地代码同步到github. 使用Git GUI同步  1,先下载git,然后安装.右键如图所示. 2,在github里新建一个 reposi ...

  5. Java外卖点餐送餐平台源码带手机端带文档(源码分享)

    Java仿饿了么外卖点餐送餐平台源码带手机端带文档(源码分享) 一个简单的外卖系统,包括手机端,后台管理,api基于spring boot和vue的前后端分离的外卖系统.包含手机端,后台管理功能. 核 ...

  6. 新版代shua社区源码已更新 非常漂亮

    介绍: 新版代shua社区源码V1.5版本介绍: 1.增加前台域名绑定错误提示界面 2.增加一套抽奖功能 3.一键检测是否正版 4.修复后台一些小BUG 网盘下载地址: https://zijiewa ...

  7. 最新彩虹云商城代刷完整源码6.9.0+去除授权

    正文: 最新彩虹云商城代刷完整源码6.9.0+去除授权,直接上传源码解压缩后访问域名安装即可,亲测可用. 安装说明: 上传到空间后直接访问即可根据提示安装. PHP推荐使用7.0及以上. 下方是更新日 ...

  8. [全网首发]一款好看的个人主页源码

    [全网首发]一款好看的个人主页 本来之前是想着要做api管理系统的,后面又不想做了,然后就做成了个人主页,开源出来给大家使用 源代码文件:个人主页源码密码:3vxq

  9. 纯html5语言编写的动画,8个纯CSS3制作的动画应用及源码

    本文作者html5tricks,转载请注明出处 对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以 ...

最新文章

  1. vs2012 编译 zlib 1.2.8
  2. 实验二:用机器指令和汇编指令编程
  3. lintcode-easy-Insertion Sort List
  4. ImageView倒影效果
  5. 蚂蚁集团涵畅:再启程,Service Mesh 前路虽长,尤可期许
  6. PCB设计--PCB画图技巧
  7. linux超过cpu负载重启脚本,linux下Web服务器CPU负载超过阀值自动重启脚本
  8. 用户自增长机制(一图胜千言)
  9. iOS地图之MapKit框架
  10. 安装MySQL和出现的问题解决
  11. 操作系统编写之引导扇区 1
  12. html加拼音注释,《弟子规》全文带拼音注释(下)
  13. 【总结】美团之推荐系统
  14. C++实现基于博弈树的5x5一子棋人机对战
  15. java封装、继承和多态练习题
  16. 545day(jquery-ajax-event.html)
  17. (googlechrome)未知错误导致安装失败,如果googlechrome....
  18. 计算机毕设Python+Vue疫情期间优化旅游平台(程序+LW+部署)
  19. MySQL各数据类型总结
  20. 【OpenCv】图像模糊(均值模糊,高斯模糊,中值模糊,双边模糊)

热门文章

  1. DeFi 2.0社区项目如何掀起独立行情?
  2. 互联网 人力资源相关的企业
  3. 转】JNI(Java Native Interface)的简介
  4. 初来乍到,多多包涵.
  5. CSDN在线讲堂-》玩转C指针 学习笔记
  6. 智能工业称重解决方案
  7. 新零售时代,零售企业的致胜之道!
  8. 发布者(Pbulisher)的编程实现
  9. java代码鸟飞,Java打飞鸟游戏程序
  10. Fiddler如何开启显示源IP地址