文章目录

  • 前言
  • 一、个人博客界面展示
  • 二、HTML代码展示
  • 总结

前言

最近，我看到一句话，是解释什么是博客的，他是这样说的：博客是什么，简单的说就是记录生活和工作的记事本，一种公开与网络世界的日记本。这句话也充分说明了众多博主的心声，所以今天，我们来写博客，自己当站长！

提示：以下是本篇文章正文内容（本篇也对博主Dream_飞翔、小破孩作品有参考），下面案例可供参考

一、个人博客界面展示

二、HTML代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta name="generator" content="Hexo 3.9.0"><meta charset="utf-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta name="keywords" content="这里，是一个记录个人成长的地方。">
<meta name="description" content="这里，是一个记录个人成长的地方。"><title itemprop="name">李润生1</title>  <link rel="shortcut icon" href="https://2heng.xin/favicon.ico"><meta http-equiv="x-dns-prefetch-control" content="on"><!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+SerifMerriweather|Merriweather+Sans|Source+Code+Pro|Ubuntu:400,700|Noto+Serif+SC" media="all">  --><link rel="dns-prefetch" href="//cdn.jsdelivr.net"><link rel="stylesheet" id="saukra_css-css" href="https://cdn.jsdelivr.net/gh/wang1375830242/CDN/sakura/source/css/style3.css" type="text/css" media="all"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wang1375830242/CDN/sakura/source/css/lib.min.css" media="all"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wang1375830242/CDN/sakura/source/css/font.css" media="all"><link rel="stylesheet" href="/css/insight.css" media="all"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wang1375830242/CDN/sakura/source/css/jquery.fancybox.min.css" media="all"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wang1375830242/CDN/sakura/source/css/zoom.css" media="all"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/wang1375830242/CDN/sakura/source/css/sharejs.css">
<!--   <link rel="stylesheet" id="saukra_css-css" href="https://2heng.xin/wp-content/cache/autoptimize/css/autoptimize_ad42a61f4c7d4bdd9f91afcff6b5dda5.css
" type="text/css" media="all"> --><script>/*Initial Variables*/var mashiro_option = new Object();var mashiro_global = new Object();mashiro_option.NProgressON = true;/* * 邮箱信息之类的东西可以填在这里，这些js变量基本都作用于sakura-app.js* 这样的设置仅是为了方便在基于PHP开发的主题中设置js变量，既然移植到了Node上，我想或许可以精简这一逻辑吧*/mashiro_option.email_domain = "";mashiro_option.email_name = "";mashiro_option.cookie_version_control = "";mashiro_option.qzone_autocomplete = false;mashiro_option.site_name = "李润生1";mashiro_option.author_name = "李润生1";mashiro_option.site_url = "https://www.sakura521.cn";mashiro_option.v_appId = "rNqgMHWy3w8Nrka5h7qEuHXb-gzGzoHsz";mashiro_option.v_appKey = "IwkVmKGABneOkwfgUAKQiTYY";mashiro_option.mathjax = "0";mashiro_option.qq_api_url = "https://api.mashiro.top/qqinfo/"; mashiro_option.qq_avatar_api_url = "https://api.mashiro.top/qqinfo/";// mashiro_option.jsdelivr_css_src = "https://cdn.jsdelivr.net/gh/moezx/cdn@3.4.5/css/lib.min.css";// mashiro_option.float_player_on = true;/*End of Initial Variables*/</script><!--自定义看板娘--><!-- <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/gh/wang1375830242/CDN/sakura/source/live2d-widget/autoload2.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wang1375830242/CDN/sakura/source/live2d-widget/font-awesome.min.css"/><script type="text/javascript">var bg = "https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/%EF%BD%A1%EF%BD%A5%EF%BC%9A%EF%BC%8A%EF%BC%9A%EF%BD%A5%E2%9C%BF-PID65231071-by-hakusai.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/ETpv24.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/308827.webp,https://cdn.jsdelivr.net/gh/wang1375830242/PicGo//img/20200708154412.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/gui.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/307473.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/Konachan.com-ls-black_hair-f-toriki-touhou.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/Konachan.com-r-1-scaled.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/p1.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/pixiv57793944.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/r63888719_by__LM7_-scaled.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/wallhaven-672007-1.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/アズールレーン_63069334.webp".split(",");var bgindex = Math.floor(Math.random()*bg.length);if (!!window.ActiveXObject || "ActiveXObject" in window) { //is IE?alert('朋友，IE浏览器未适配哦~');}</script> --><!--谷歌广告--><!-- <script data-ad-client="ca-pub-4531214479514249" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> --><!-- 百度的自动推送<script>(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if (curProtocol === 'https') {bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        }else {bp.src = 'http://push.zhanzhang.baidu.com/push.js';}var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();</script>--><style type="text/css">.hljs-ln{border-collapse:collapse}.hljs-ln td{padding:0}.hljs-ln-n:before{content:attr(data-line-number)}</style><style type="text/css">.site-top .lower nav{display:block !important;}.author-profile i,.post-like a,.post-share .show-share,.sub-text,.we-info a,span.sitename,.post-more i:hover,#pagination a:hover,.post-content a:hover,.float-content i:hover{color:#FE9600}.feature i,.download,.navigator i:hover,.links ul li:before,.ar-time i,span.ar-circle,.object,.comment .comment-reply-link,.siren-checkbox-radio:checked + .siren-checkbox-radioInput:after{background:#FE9600}::-webkit-scrollbar-thumb{background:#FE9600}.download,.navigator i:hover,.link-title,.links ul li:hover,#pagination a:hover,.comment-respond input[type='submit']:hover{border-color:#FE9600}.entry-content a:hover,.site-info a:hover,.comment h4 a,#comments-navi a.prev,#comments-navi a.next,.comment h4 a:hover,.site-top ul li a:hover,.entry-title a:hover,#archives-temp h3,span.page-numbers.current,.sorry li a:hover,.site-title a:hover,i.iconfont.js-toggle-search.iconsearch:hover,.comment-respond input[type='submit']:hover{color:#FE9600}.comments .comments-main{display:block !important;}.comments .comments-hidden{display:none !important;}background-position:center center;background-attachment:inherit;}</style>
</head>
</html>
<body class="page-template page-template-user page-template-page-analytics page-template-userpage-analytics-php page page-id-1297 chinese-font serif isWebKit"><div class="scrollbar" id="bar"></div><!-- 这里 --><script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/sakura.js"></script><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/love.js"></script><canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/js/fireworks.js"></script>    <script src="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/js/mouse_snow.min.js"></script><a href="#" class="cd-top faa-float animated"></a><section id="main-container"><div class="headertop filter-dot"><div id="banner_wave_1"></div><div id="banner_wave_2"></div><figure id="centerbg" class="centerbg"><div class="focusinfo no-select"><div class="header-tou"><a href="https://www.sakura521.cn"><img src="https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/indexjpg.jpg"></a></div>
<div class="header-info"><!-- <p>Live your life with passion! With some drive!</p> -->         <p id="hitokoto" class="hitokoto">正在加载今日一言....</p><script src="https://v1.hitokoto.cn/?c=a&c=b&encode=js&charset=utf-8" charset="utf-8"></script><div class="top-social_v2"><li id="bg-pre"><img class="flipx" src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/next-b.svg"></li>                 <!--  还没改1 -->     <li><a href="https://github.com/LRS1202/cb123/projects/1" target="_blank" class="social-github" title="github"><img src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/social/github.png"></a></li><li><a href="https://weibo.com/u/7147017213/home" target="_blank" class="social-github" title="微博"><img src="https://img0.baidu.com/it/u=2532438066,681854754&fm=26&fmt=auto&gp=0.jpg"></a></li><li><a href="https://blog.csdn.net/weixin_51196032?spm=1010.2135.3001.5343" target="_blank" class="i18n" data-iname="icon_alt.csdn" data-iattr="title"title="CSDN"><img src="https://img2.baidu.com/it/u=269353592,2802096828&fm=26&fmt=auto&gp=0.jpg"/></a></li><li><a href="https://y.qq.com/n/ryqq/profile/like/song" target="_blank" class="social-github" title="music"><img src="https://img2.baidu.com/it/u=4026757130,2565728257&fm=26&fmt=auto&gp=0.jpg"></a></li><!-- 微信 --><li class="wechat"><a href="/#"><img src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/social/wechat.png"></a><div class="wechatInner"><img src="https://z3.ax1x.com/2021/07/21/WaMORs.png"></div></li><li id="bg-next"><img src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/next-b.svg"></li></div></div></div></figure><div id="video-container" style=""><video style="object-fit: fill" id="bgvideo" class="video" video-name="" src="" width="auto" preload="auto"></video><div id="video-btn" class="loadvideo videolive"></div><div id="video-add"></div><div class="video-stu"></div></div><div class="headertop-down faa-float animated" onclick="headertop_down()"><span><i class="fa fa-chevron-down" aria-hidden="true"></i></span></div>
</div><div id="page" class="site wrapper"><header class="site-header no-select gizle sabit" role="banner"><div class="site-top"><div class="site-branding"><span class="site-title"><span class="logolink moe-mashiro"><a href="/"><span class="sakurasono">帅气迷人的</span><span class="shironeko">李润生1</span></a></span></span></div><!-- 这是搜索 --><div class="searchbox search-form-submit"><i class="iconfont js-toggle-search iconsearch icon-search"></i></div><div id="show-nav" class="showNav mobile-fit"><div class="line line1"></div><div class="line line2"></div><div class="line line3"></div></div><!-- 这是搜索 -->
<!--     <div class="searchbox"><i class="iconfont js-toggle-search iconsearch icon-search"></i></div> --><div class="lower-cantiner"><div class="lower"><nav class="mobile-fit-control hide"><ul id="menu-new" class="menu"><li><a href=""><span class="faa-parent animated-hover"><i class="fa  fa-fort-awesome faa-shake" aria-hidden="true"></i>首页</span></a></li><li><a href=""><span class="faa-parent animated-hover"><i class="fa  fa-archive faa-shake" aria-hidden="true"></i>归档</span></a><ul class="sub-menu"><li><a href=""><i class="fa fa-code" aria-hidden="true"></i>技术</a></li><li><a href=""><i class="fa fa-file-text-o" aria-hidden="true"></i>娱乐</a></li><li><a href=""><i class="fa fa-commenting-o" aria-hidden="true"></i>干货</a></li></ul></li><li><a href=""><span class="faa-parent animated-hover"><i class="fa  fa-list-ul faa-vertical" aria-hidden="true"></i>清单</span></a><ul class="sub-menu"><li><a href=""><i class="fa fa-book" aria-hidden="true"></i>书单</a></li><li><a href=""><i class="fa fa-film faa-vertical" aria-hidden="true"></i>番组</a></li><li><a href="a/"><i class="fa fa-th-list faa-bounce" aria-hidden="true"></i>Java</a></li><li><a href=""><i class="fa fa-headphones" aria-hidden="true"></i>歌单</a></li><li><a href=""><i class="fa fa-photo" aria-hidden="true"></i>图集</a></li></ul></li><li><a href=""><span class="faa-parent animated-hover"><i class="fa  fa-pencil-square-o faa-tada" aria-hidden="true"></i>留言板</span></a></li><li><a href=""><span class="faa-parent animated-hover"><i class="fa  fa-heart faa-pulse" aria-hidden="true"></i>赞赏</span></a></li><li><a href=""><span class="faa-parent animated-hover"><i class="fa  fa-leaf faa-wrench" aria-hidden="true"></i>关于</span></a><ul class="sub-menu"><li><a href=""><i class="fa fa-meetup" aria-hidden="true"></i>我？</a></li><li><a href=""><i class="fa iconfont icon-sakura" aria-hidden="true"></i>主题</a></li><li><a href=""><i class="fa fa-cogs" aria-hidden="true"></i>Lab</a></li></ul></li><li><a href=""><span class="faa-parent animated-hover"><i class="fa  fa-rss faa-pulse" aria-hidden="true"></i>RSS</span></a></li></ul></nav></div></div></div>
</header><div class="blank" style="padding-top: 0px;"></div>
<div id="content" class="site-content"><div class="notice" style="margin-top:60px"><i class="iconfont icon-notification"></i><div class="notice-content">这是一个驻足的地方！带给我一丝宁静。</div></div><div class="top-feature-row"><h1 class="fes-title" style="font-family: 'Ubuntu', sans-serif;"><i class="fa fa-anchor" aria-hidden="true"></i>每日惊喜</h1><div class="top-feature-v2"><div class="the-feature square from_left_and_right"><a href="/theme-sakura/" target="_blank"><div class="img"><img src="https://cdn.jsdelivr.net/gh/wang1375830242/PicGo//img/20200408222529.webp"></div><div class="info"><h3>找回自己</h3><p>本站 hexo 主题</p></div></a></div></div><!-- 未修改02 --><div class="top-feature-v2"><div class="the-feature square from_left_and_right"><a href="" target="_blank"><div class="img"><img src="https://cdn.jsdelivr.net/gh/wang1375830242/PicGo//img/20200408222530.webp"></div><div class="info"><h3>Bilibili</h3><p>博主的优秀作品</p></div></a></div></div><div class="top-feature-v2"><div class="the-feature square from_left_and_right"><a href="/" target="_blank"><div class="img"><img src="https://cdn.jsdelivr.net/gh/wang1375830242/PicGo//img/20200408221414.webp"></div><div class="info"><h3>一个新建的小小博客</h3><p></p></div></a></div></div></div><div id="primary" class="content-area"><main id="main" class="site-main" role="main"><h1 class="main-title" style="font-family: 'Ubuntu', sans-serif;"><i class="fa fa-envira" aria-hidden="true"></i>发现</h1><article  class="post post-list-thumb post-list-thumb-left"  class="post post-list-thumb" itemscope="" itemtype="http://schema.org/BlogPosting"><div class="post-thumb"><a href="/technology/docker.html"><img class="lazyload" onerror="imgError(this,3)" src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg" data-src="https://www.helloimg.com/images/2021/06/29/CPBbpA.jpg"></a></div><div class="post-content-wrap"><div class="post-content"><div class="post-date"><i class="iconfont icon-time"></i>2021-10-30 21:07</div><a href="/technology/docker.html" class="post-title"><h3>生活日常</h3></a><div class="post-meta"><span><i class="fa fa-tags"></i><a href="/tags/技术/">宿舍<em>·</em></a><a href="/tags/java/">教室<em>·</em></a></span><span><i class="iconfont icon-file"></i><a href="/categories/技术/">图书馆</a></span></div><div class="float-content"><p>娱乐日常</p><div class="post-bottom"><a href="/technology/docker.html" class="button-normal"><i class="iconfont icon-caidan"></i></a></div></div></div></div>
</article>
<article  class="post post-list-thumb" itemscope="" itemtype="http://schema.org/BlogPosting"><div class="post-thumb"><a href="/technology/javastudy20200616.html"><img class="lazyload" onerror="imgError(this,3)" src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg" data-src="https://cdn.jsdelivr.net/gh/wang1375830242/PicGo//img/20200616163305.webp"></a></div><div class="post-content-wrap"><div class="post-content"><div class="post-date"><i class="iconfont icon-time"></i>2021-10-30 21:07</div><a href="/technology/javastudy20200616.html" class="post-title"><h3>好吃的小店</h3></a><div class="post-meta"><span><i class="fa fa-tags"></i> <a href="/tags/技术/">烧烤<em>·</em></a><a href="/tags/java/">饮品<em>·</em></a>    </span><span><i class="iconfont icon-file"></i><a href="/categories/技术/">火锅</a>      </span></div><div class="float-content"><p>今日开心</p><div class="post-bottom"><a href="/technology/javastudy20200616.html" class="button-normal"><i class="iconfont icon-caidan"></i></a></div></div></div></div>
</article>
<article  class="post post-list-thumb post-list-thumb-left"  class="post post-list-thumb" itemscope="" itemtype="http://schema.org/BlogPosting"><div class="post-thumb"><a href="/technology/rabbitMQ.html"><img class="lazyload" onerror="imgError(this,3)" src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg" data-src="https://cdn.jsdelivr.net/gh/wang1375830242/PicGo//img/20200614155905.webp"></a></div><div class="post-content-wrap"><div class="post-content"><div class="post-date"><i class="iconfont icon-time"></i>2021-10-30 21:07</div><a href="/technology/rabbitMQ.html" class="post-title"><h3>日常烦恼</h3></a><div class="post-meta"><span><i class="fa fa-tags"></i>   <a href="/tags/技术/">过去<em>·</em></a>    <a href="/tags/java/">现在<em>·</em></a>    </span><span><i class="iconfont icon-file"></i>   <a href="/categories/技术/">刚刚</a></span></div><div class="float-content"><p>今日收获</p><div class="post-bottom"><a href="/technology/rabbitMQ.html" class="button-normal"><i class="iconfont icon-caidan"></i></a></div></div></div></div>
</article>
<article  class="post post-list-thumb" itemscope="" itemtype="http://schema.org/BlogPosting"><div class="post-thumb"><a href="/technology/steam.html"><img class="lazyload" onerror="imgError(this,3)" src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg" data-src="https://cdn.jsdelivr.net/gh/wang1375830242/PicGo//img/20200604170024.webp"></a></div><div class="post-content-wrap"><div class="post-content"><div class="post-date"><i class="iconfont icon-time"></i>2021-10-30 21:07</div><a href="/technology/steam.html" class="post-title"><h3>日常学习</h3></a><div class="post-meta"><span><i class="fa fa-tags"></i><a href="/tags/技术/">笔记<em>·</em></a><a href="/tags/java/">实操<em>·</em></a></span><span><i class="iconfont icon-file"></i><a href="/categories/技术/">技术</a></span></div><div class="float-content"><p>实习小笔记</p><div class="post-bottom"><a href="/technology/steam.html" class="button-normal"><i class="iconfont icon-caidan"></i></a></div></div></div></div>
</article>
<article  class="post post-list-thumb post-list-thumb-left"  class="post post-list-thumb" itemscope="" itemtype="http://schema.org/BlogPosting"><div class="post-thumb"><a href="/technology/winkpython.html"><img class="lazyload" onerror="imgError(this,3)" src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg" data-src="https://cdn.jsdelivr.net/gh/wang1375830242/PicGo//img/20200415102707.webp"></a></div><div class="post-content-wrap"><div class="post-content"><div class="post-date"><i class="iconfont icon-time"></i>2021-10-30 21:07</div><a href="/technology/winkpython.html" class="post-title"><h3>专业拓展</h3></a><div class="post-meta"><span><i class="fa fa-tags"></i><a href="/tags/技术/">技术<em>·</em></a></span><span><i class="iconfont icon-file"></i><a href="/categories/技术/">技术</a></span></div><div class="float-content"><p>实际拓展</p><div class="post-bottom"><a href="/technology/winkpython.html" class="button-normal"><i class="iconfont icon-caidan"></i></a></div></div></div></div>
</article></main><!-- 首页默认取最最新文章集 --><!-- <nav class="navigator"><span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><a class="page-number" href="/page/4/">4</a><a class="extend next" rel="next" href="/page/2/"><i class="iconfont icon-right"></i></a></nav>--></div><div id="pagination"><a href="/page/2/" class="">Previous</a></div></div></div>    <div class="ins-search"><div class="ins-search-mask"></div><div class="ins-search-container"><div class="ins-input-wrapper"><input type="text" class="ins-search-input" placeholder="请输入关键词..."/><span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span></div><div class="ins-section-wrapper"><div class="ins-section-container"></div></div></div>
</div>
<script>
(function (window) {var INSIGHT_CONFIG = {TRANSLATION: {POSTS: '文章',// PAGES: '页面',CATEGORIES: '分类',TAGS: '标签',},ROOT_URL: '/',CONTENT_URL: '/content.json',};window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script><footer id="colophon" class="site-footer" role="contentinfo"><!--自定义看板娘--><script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/gh/wang1375830242/CDN/sakura/source/live2d-widget/autoload2.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wang1375830242/CDN/sakura/source/live2d-widget/font-awesome.min.css"/><script type="text/javascript">var bg = "https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/%EF%BD%A1%EF%BD%A5%EF%BC%9A%EF%BC%8A%EF%BC%9A%EF%BD%A5%E2%9C%BF-PID65231071-by-hakusai.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/ETpv24.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/308827.webp,https://cdn.jsdelivr.net/gh/wang1375830242/PicGo//img/20200708154412.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/gui.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/307473.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/Konachan.com-ls-black_hair-f-toriki-touhou.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/Konachan.com-r-1-scaled.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/p1.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/pixiv57793944.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/r63888719_by__LM7_-scaled.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/wallhaven-672007-1.webp,https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/webp/アズールレーン_63069334.webp".split(",");var bgindex = Math.floor(Math.random()*bg.length);if (!!window.ActiveXObject || "ActiveXObject" in window) { //is IE?alert('朋友，IE浏览器未适配哦~');}</script>  <!--百度的自动推送-->  <script>(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if (curProtocol === 'https') {bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        }else {bp.src = 'http://push.zhanzhang.baidu.com/push.js';}var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();</script><div class="site-info"><div class="footertext"><div class="img-preload"><img src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/wordpress-rotating-ball-o.svg"><img src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/disqus-preloader.svg"></div><p style="color: #666666;">&copy 2021.10.30</p></div><div class="footer-device"><p style="font-family: 'Ubuntu', sans-serif;"><span style="color: #b9b9b9;">幸运 <a href="" target="_blank" style="color: #b9b9b9;;text-decoration: underline dotted rgba(0, 0, 0, .1);">努力</a> <i class="iconfont icon-sakura rotating" style="color: #ffc0cb;display:inline-block"></i> 我们会变得更好！！</a></span></br><span id="sitetime"></span></p></div></div><!-- .site-info -->
</footer>
<!-- 百度统计 -->
<script>
var _hmt = _hmt || [];
(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?51ea89e1e2a8781a80db7231945e68ad";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- 百度自动推送 -->
<script>
(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if (curProtocol === 'https') {bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else {bp.src = 'http://push.zhanzhang.baidu.com/push.js';}var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);
})();
</script><!-- 建站的时间 -->
<script language=javascript>function siteTime() {window.setTimeout("siteTime()", 1000);var seconds = 1000;var minutes = seconds * 60;var hours = minutes * 60;var days = hours * 24;var years = days * 365;var today = new Date();var todayYear = today.getFullYear();var todayMonth = today.getMonth() + 1;var todayDate = today.getDate();var todayHour = today.getHours();var todayMinute = today.getMinutes();var todaySecond = today.getSeconds();/* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)year - 作为date对象的年份，为4位年份值month - 0-11之间的整数，做为date对象的月份day - 1-31之间的整数，做为date对象的天数hours - 0(午夜24点)-23之间的整数，做为date对象的小时数minutes - 0-59之间的整数，做为date对象的分钟数seconds - 0-59之间的整数，做为date对象的秒数microseconds - 0-999之间的整数，做为date对象的毫秒数 */var t1 = Date.UTC(2021, 10, 30, 17, 20, 00); //北京时间2018-2-13 00:00:00var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);var diff = t2 - t1;var diffYears = Math.floor(diff / years);var diffDays = Math.floor((diff / days) - diffYears * 365);var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);document.getElementById("sitetime").innerHTML = "本站已运行 " +diffYears+" 年 "+diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";}/*因为建站时间还没有一年，就将之注释掉了。需要的可以取消*/siteTime();
</script><!-- <script src="/js/tocbot.js"></script> -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/wang1375830242/CDN/sakura/source/js/lib.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/wang1375830242/CDN/sakura/source/js/InsightSearch.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/wang1375830242/CDN/sakura/source/js/jquery.fancybox.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/wang1375830242/CDN/sakura/source/js/zoom.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/wang1375830242/CDN/sakura/source/js/sakura-app.js"></script>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<!-- <script src='https://cdn.jsdelivr.net/gh/wang1375830242/CDN/sakura/source/js/valine3.min.js'></script> -->
<script src='https://cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js'></script>
<script src="https://cdn.jsdelivr.net/gh/wang1375830242/CDN/sakura/source/js/botui.js"></script><!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script> -->
<script type="text/javascript">
/* <![CDATA[ */
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {var Poi = {"pjax":"1","movies":{"url": "https://cdn.jsdelivr.net/gh/wang1375830242/CDN/video/","name":"The-Pet-Girl-of-Sakurasou.mp4","live":"close"},"windowheight":"fixed","codelamp":"close","ajaxurl":"","order":"asc","formpostion":"bottom"};
} else {var Poi = {"pjax":"1","movies":{"url": "https://cdn.jsdelivr.net/gh/wang1375830242/CDN/video/","name":"The-Pet-Girl-of-Sakurasou.mp4","live":"open"},"windowheight":"auto","codelamp":"close","ajaxurl":"","order":"asc","formpostion":"bottom"};
}
/* ]]> */</script>
<script>
$(document).ready(function() {if ($(".toc").length > 0 && document.body.clientWidth > 1200) {if ($(".pattern-center").length > 0) { //有图的情况tocbot.init({// Where to render the table of contents.tocSelector: '.toc', // 放置目录的容器// Where to grab the headings to build the table of contents.contentSelector: '.entry-content', // 正文内容所在// Which headings to grab inside of the contentSelector element.scrollSmooth: true,headingSelector: 'h1, h2, h3, h4, h5', // 需要索引的标题级别headingsOffset: -400,scrollSmoothOffset: -85});} else {tocbot.init({// Where to render the table of contents.tocSelector: '.toc', // 放置目录的容器// Where to grab the headings to build the table of contents.contentSelector: '.entry-content', // 正文内容所在// Which headings to grab inside of the contentSelector element.scrollSmooth: true,headingSelector: 'h1, h2, h3, h4, h5', // 需要索引的标题级别headingsOffset: -85,scrollSmoothOffset: -85});}var offsetTop = $('.toc').offset().top - 95;window.onscroll = function() {var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;if (scrollTop >= offsetTop) {$('.toc').addClass('toc-fixed');} else {$('.toc').removeClass('toc-fixed');}}}
});
</script><div class="openNav no-select" style="height: 50px;"><div class="iconflat no-select" style="width: 50px; height: 50px;"><div class="icon"></div></div><div class="site-branding search-form-submit"><i class="iconfont js-toggle-search iconsearch icon-search"></i></div></div></section><!-- ʵ�ֻ������� --><div class="skin-menu no-select" id="mainskin" style="position: fixed"><div class="theme-controls row-container"><ul class="menu-list"><li id="white-bg"> <i class="fa fa-television" aria-hidden="true"></i></li><li id="sakura-bg"> <i class="iconfont icon-sakura"></i></li><li id="gribs-bg"> <i class="fa fa-slack" aria-hidden="true"></i></li><li id="KAdots-bg"> <i class="iconfont icon-dots"></i></li><li id="totem-bg"> <i class="fa fa-optin-monster" aria-hidden="true"></i></li><li id="pixiv-bg"> <i class="iconfont icon-pixiv"></i></li><li id="bing-bg"> <i class="iconfont icon-bing"></i></li><li id="dark-bg"> <i class="fa fa-moon-o" aria-hidden="true"></i></li></ul></div>
</div>
<canvas id="night-mode-cover"></canvas> <div class="changeSkin-gear no-select"><div class="keys" id="setbtn"> <span id="open-skinMenu"> 切换主题 | SCHEME TOOL  <i class="iconfont icon-gear inline-block rotating"></i> </span></div>
</div><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script><div id="mo-nav" class=""><div class="m-avatar"><img src="https://cdn.jsdelivr.net/gh/wang1375830242/CDN/images/indexjpg.jpg"></div><p style="text-align: center; color: #333; font-weight: 900; font-family: 'Ubuntu', sans-serif; letter-spacing: 1.5px">さくら荘その小坏孩</p><p style="text-align: center; word-spacing: 20px;"><a href="http://github.com/wang1375830242" class="fa fa-github" target="_blank" style="color: #333; margin-left:20px"></a><a href="http://weibo.com/mashirozx?is_all=1" class="fa fa-weibo" target="_blank" style="color: #dd4b39; margin-left:20px"></a><a href="https://wpa.qq.com/msgrd?v=3&uin=1428238744&site=qq&menu=yes" class="fa fa-qq" target="_blank" style="color: #25c6fe; margin-left:20px"></a></p><ul id="menu-new-1" class="menu"><li><a href=""><span class="faa-parent animated-hover"><i class="fa  fa-fort-awesome faa-shake" aria-hidden="true"></i>首页</span></a></li><li><a href="s"><span class="faa-parent animated-hover"><i class="fa  fa-archive faa-shake" aria-hidden="true"></i>归档</span></a><ul class="sub-menu"><li><a href=""><i class="fa fa-code" aria-hidden="true"></i>技术</a></li><li><a href=""><i class="fa fa-file-text-o" aria-hidden="true"></i>娱乐</a></li><li><a href=""><i class="fa fa-commenting-o" aria-hidden="true"></i>干货</a></li></ul></li><li><a href=""><span class="faa-parent animated-hover"><i class="fa  fa-list-ul faa-vertical" aria-hidden="true"></i>清单</span></a><ul class="sub-menu"><li><a href=""><i class="fa fa-book" aria-hidden="true"></i>书单</a></li><li><a href=""><i class="fa fa-film faa-vertical" aria-hidden="true"></i>番组</a></li><li><a href=""><i class="fa fa-th-list faa-bounce" aria-hidden="true"></i>Java</a></li><li><a href=""><i class="fa fa-headphones" aria-hidden="true"></i>歌单</a></li><li><a href=""><i class="fa fa-photo" aria-hidden="true"></i>图集</a></li></ul></li><li><a href=""><span class="faa-parent animated-hover"><i class="fa  fa-pencil-square-o faa-tada" aria-hidden="true"></i>留言板</span></a></li><li><a href=""><span class="faa-parent animated-hover"><i class="fa  fa-heart faa-pulse" aria-hidden="true"></i>赞赏</span></a></li><li><a href=""><span class="faa-parent animated-hover"><i class="fa  fa-leaf faa-wrench" aria-hidden="true"></i>关于</span></a><ul class="sub-menu"><li><a href=""><i class="fa fa-meetup" aria-hidden="true"></i>我？</a></li><li><a href=""><i class="fa iconfont icon-sakura" aria-hidden="true"></i>主题</a></li><li><a href=""><i class="fa fa-cogs" aria-hidden="true"></i>Lab</a></li></ul></li><li><a href=""><span class="faa-parent animated-hover"><i class="fa  fa-rss faa-pulse" aria-hidden="true"></i>RSS</span></a></li></ul><p style="text-align: center; font-size: 13px; color: #b9b9b9;">&copy 2019 hexo-sakura</p>
</div>
<button onclick="topFunction()" class="mobile-cd-top" id="moblieGoTop" title="Go to top" style="display: none;"><i class="fa fa-chevron-up" aria-hidden="true"></i></button><!--  音乐播放器 开始 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<style>.aplayer .aplayer-lrc {height: 35px;}.aplayer .aplayer-lrc p {font-size: 16px;font-weight: 700;line-height: 18px !important;}.aplayer .aplayer-lrc p.aplayer-lrc-current {color: #FF1493;}.aplayer.aplayer-narrow .aplayer-body {left: -66px !important;}.aplayer.aplayer-fixed .aplayer-lrc {display: none;}.aplayer .aplayer-lrc.aplayer-lrc-hide {display: none !important;}.aplayer.aplayer-fixed .lrc-show {display: block;background: rgba(255, 255, 255, 0.8);}
</style>
<meting-js  id="4886582349&"  server="netease"  type="playlist"  fixed="true"  autoplay="false"  loop="all"  order="random"  preload="none"  volume="0.5"  mutex="true"  </meting-js><script>$(function () {$('body').on('click', '.aplayer', function () {if ($('.aplayer-button').hasClass('aplayer-play')) {$('.aplayer-lrc').removeClass('lrc-show');} else {$('.aplayer-lrc').addClass('lrc-show');}})});hex</script> <!-- 音乐播放器 结束 -->
</body>
</html>

总结

在进行页面的设计的过程中，我们需要反复的思考，反复尝试，需要很大的耐心。在不断地增加新元素的过程中，会遇到很多困难，对比类似的功能，我们会更快的找到规律，从而体验到制作网页，实现页面从0到1的过程，从而获得满足感。
在今天观看CSDN优秀工程师成长路径时，湘王老师说了一句话：软件不是解决问题的方法，而是进行优化解决路径的（具体忘了，这是大概意思）。这句话让我有很多思考，一切技术是为人们的生产生活提供便利的，我也会做好自己的工作，为更多的人提供更好的服务。

CSDN实训 - 个人博客界面制作相关推荐

  1. Java程序设计综合项目实训二——博客一

    职务 姓名 学号 组长 张广哲 16012007 组员 陈炳全 16012022 组员 葛晨延 16012010 组员 周楷柠 16012005 博客地址: 张广哲(组长):http://www.cn ...

  2. Spring实训 个人博客二 详情页

    1.在index导航栏中添加归档: 2.创建详情页文件blog.html: 3.添加文章头部: <div class="ui container"><div cl ...

  3. 自然语言交流系统 phxnet团队 创新实训 项目博客 （十三）

    对我们项目中的关键技术实现进行总结: 一.3DMax关键技术实现 1.一下的关于3DMax中对于人物的设计和操作均需要在对3DMax基础知识熟练掌握的情况下进行的. 2. 骨骼架设:首先对导入到3DM ...

  4. 自然语言交流系统 phxnet团队 创新实训 项目博客 （五）

    3DMax方面所涉及的专业知识:                       (1)一下的关于3DMax中对于人物的设计和操作均需要在对3DMax基础知识熟练掌握的情况下进行的. (2)骨骼架设:首先 ...

  5. 自然语言交流系统 phxnet团队 创新实训 个人博客 （二）

    因为项目用的到条件编译,遂专门记载: 众所周知在C和CPP中可以通过预处理语句来实现条件编译,但是在java中没有预处理语句,我们该如何实现条件编译呢? 这是一个简单的demo Java代码   pu ...

  6. 自然语言交流系统 phxnet团队 创新实训 个人博客 （五）

    有关我们这个项目:智能自然语言交流系统,所借鉴的技术有: 第一:我们使用了科大讯飞的在线语音转换,涉及的有文本传给云端服务器的文字转换成语音和本地的语音上传给服务器转换成文字. 涉及的相关的代码有: ...

  7. CSDN博客界面自定义之右侧博客栏目修改

    最近本人迷恋上了没事写写博客,感觉写博客挺好玩的.不仅可以记录自己学习的知识,而且在帮助到别人同时自己也会十分开心. 那么就从CSDN入手吧,因为之前经常搜资料CSDN的博客文章,帮助我解决了很多实际 ...

  8. CSDN实训第四天（OTP——动态令牌的实现）

    CSDN实训第四天(OTP--动态令牌的实现) 一.前言 出于对重要文件的保护,产生了 密码 和验证码这一产物.如今验证码有很多形式,Gif动画验证码.手机短信验证码.手机语音验证码.视频验证码等等, ...

  9. 爱尚实训html入门基础篇,爱尚实训网页设计与网页制作的区别

    爱尚实训网页设计与网页制作的区别 网页设计是将策划案中的内容.网站的主题模式,以及结合自己的认识通过艺术的手法表现出来而网页制作通常就是将网页设计师所设计出来的设计稿,按照W3C规范用html语言将其 ...

  10. 如何用php制作博客网页,博客网页制作的网站

    博客网页制作的网站 1.制作一个自己的印章. 2.EOOOL是QQ头像.MSN头像.论坛头像.论坛签名.博客广告.通讯工具(邮件. MSN.QQ.书签)等的标签快速生成工具,一个方便.实用的图片制作网 ...

最新文章

  1. [原创]Coding4Fun检测你的网络，用C#获取本机TCP、UDP状态及连接（二）
  2. glDrawElements参数在新旧版本传最后一个参数的不同
  3. 集成spring mvc_向Spring MVC Web应用程序添加社交登录：集成测试
  4. python os.path.exists判断文件或文件夹是否存在
  5. 利用递归求某数的阶乘——C/C++
  6. YUV测试序列下载地址
  7. 【特别版】考证与学习，结构与功能，之间的因果关系
  8. Flex桌面AIR软件日志添加
  9. ad19做直插封装 ipc_共享一下自己的PCB封装库(Altium Designer)
  10. 微软应用商店应用无法联网_微软，诺基亚应用商店-即将开业！
  11. FreeXploiT HTML(Hacker Technology Mad Lead)
  12. 7-20 打印九九口诀表 (15 分) 下面是一个完整的下三角九九口诀表：
  13. 科技云报道：乘风破浪的联通沃云，是一朵安全可控的国产云
  14. CCNA专业英文词汇全集
  15. 电气AutoCAD基础教学（三）——块的绘制
  16. 安全攻访策略：PDR模型
  17. 艾美捷C1q天然蛋白的应用和化学性质说明
  18. java毕业设计—— 基于java+JPA+jsp的进销存管理系统设计与实现（毕业论文+程序源码）——进销存管理系统
  19. Json2：使用gson解析为List和Map
  20. 3.8关于向WorldWind地球模型添加图层

热门文章

  1. 手淘双11最新实践：PopLayer弹层领域研发模式升级
  2. 电脑技巧2——调出控制面板（桌面控制面板）
  3. 解决 win10 鼠标右键一直转圈问题
  4. AOP之5种增强方法应用范例
  5. 收集了一下WINDDOWS VISTA密码破解的方法
  6. Tableau中国五城市六年PM2.5数据挖掘
  7. Linux设置封包报头的函数,linux系统之IP、TCP封包格式
  8. php wps 读取word内容,关于PHP导出WORD带图片
  9. 明日书苑：《九成宫醴泉铭》单字放大米字格临帖字帖
  10. QT应用编程: 基于FFMPEG设计的流媒体播放器(播放rtmp视频流)