本文主要是介绍2021.06.25个人博客开发实训日志，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
个人博客开发前端
- 一、在JetBrains WebStorm上创建项目blog
- 1、新建static包，在static包里新建css、js、images、lib包
- 1、images包里添加自己微信图片
- 2、新建templates包，在包里创建关于我页面about.html
- 1、标题
- 2、导航
- 3、中间内容
- 4、底部footer
- 5、me.css代码
- 3、在templates包里创建博客详情页面blog.html
- 1、标题
- 2、导航
- 3、中间内容
- 3、底部footer
- 4、页面预览
- 1、关于我页面
- 2、博客详情页面
今天主要完成博客详情页面、关于我页面
一、在JetBrains WebStorm上创建项目blog
1、新建static包，在static包里新建css、js、images、lib包
1、images包里添加自己微信图片
2、新建templates包，在包里创建关于我页面about.html
1、标题
2、导航
3、中间内容
4、底部footer
5、me.css代码
css代码
3、在templates包里创建博客详情页面blog.html
1、标题
2、导航
3、中间内容
<!--中间内容--><div id="waypoint" class="m-container-small m-padded-tb-big animated fadeIn"><div class="ui container"><div class="ui segment"><div class="ui top attached segment"><div class="ui horizontal link list"><div class="item"><img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image"><div class="content"><a href="#" class="header">刘杰</a></div></div><div class="item"><i class="calendar icon"></i> 2021-06-02</div><div class="item"><i class="eye icon"></i> 2342</div></div></div><div class="ui attached segment"><!--图片区域--><img src="https://unsplash.it/800/450?image=1005" alt="" class="ui fluid image"></div><div class="ui attached padded segment"><!--内容--><div class="ui right aligned basic segment"><div class="ui orange basic label">原创</div></div><h2 class="ui center aligned header">关于刻意练习的清单</h2></br><div id="content" class="typo typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large"><h2 id="section1">一、关于 <i class="serif">Typo.css</i></h2><pre><code class="language-css">p {color : red }</code></pre><pre><code class="language-css">p {color : red }</code></pre><p><i class="serif">Typo.css</i> 的目的是，在一致化浏览器排版效果的同时，构建最适合中文阅读的网页排版。</p><h4>现状和如何去做：</h4><p class="typo-first">排版是一个麻烦的问题 <sup><a href="#appendix1"># 附录一</a></sup>，需要精心设计，而这个设计却是常被视觉设计师所忽略的。前端工程师更常看到这样的问题，但不便变更。因为在多个 OS 中的不同浏览器渲染不同，改动需要多的时间做回归测试，所以改变变得更困难。而像我们一般使用的Yahoo、Eric Meyer 和 Alice base.css 中采用的 Reset 都没有很好地考虑中文排版。<i class="serif">Typo.css</i> 要做的就是解决中文排版的问题。</p><p><strong><i class="serif">Typo.css</i> 测试于如下平台：</strong></p><table class="ui table" summary="Typo.css 的测试平台列表"><thead><tr><th>OS/浏览器</th><th>Firefox</th><th>Chrome</th><th>Safari</th><th>Opera</th><th>IE9</th><th>IE8</th><th>IE7</th><th>IE6</th></tr></thead><tbody><tr><td>OS X</td><td>✔</td><td>✔</td><td>✔</td><td>✔</td><td>-</td><td>-</td><td>-</td><td>-</td></tr><tr><td>Win 7</td><td>✔</td><td>✔</td><td>✔</td><td>✔</td><td>✔</td><td>✔</td><td>✔</td><td>-</td></tr><tr><td>Win XP</td><td>✔</td><td>✔</td><td>✔</td><td>✔</td><td>-</td><td>✔</td><td>✔</td><td>✔</td></tr><tr><td>Ubuntu</td><td>✔</td><td>✔</td><td>-这篇关于2021.06.25个人博客开发实训日志的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
