个人博客开发

提示：本次项目为学期的实训项目，具有一定的学习意义，主要资源来源于B站以及李仁密老师的视频，完全是全方位锻炼自己的编写能力以及对代码的处理与逻辑能力，十分感谢李老师的资源（尽管看在208的资源费的时候还是略显痛心不过好在有B站在）

---

文章目录

• 个人博客开发
• 前言
• 一、项目的展示与介绍：
• • 1、介绍：
  • 2、基本的布局如下所示：
  • 3、项目成果图展示：
• 二、项目创建操作步骤：
• • 1.使用工具WebStorm创建一个项目文件【MyBlog】:
  • 2、在static文件目录下创建三个文件夹【image】、【css】、【js】用于存放相应的静态资源文件内容：
  • 3、创建首页文件【index.html】用于编写内容：
  • 4、css文件内容如下：
• 三、创建首页部分【index.html】，编写具体内容：
• • 1、编写导航部分，以及连接css文件、云端资源链接等。
  • • 导航部分查看结果：
  • 2、编写中间内容：
  • • 中间部分结果展示：
  • 3、中间内容的内容分类等专栏的设计：
  • • 右边内容分类展示：
  • 3、编写低端的footer部分：
  • • 低端结果展示：
• 四、创建博文详情页面【blog.html】:
• • • 结果展示：
• 总结

---

前言

本次的实训任务主要是通过李仁密老师的项目作为借鉴“小而美博客”开发，其中包含知识点比较丰富，在静态页面设计方面主要包括有前端的HTML设计以及相关的美化元素设计如：css ，js，jQuery等，后续的学习中将会学到后端中的Spring相关知识点同时教会了我许多新的知识，是非常值得学习的项目本次实训日志主要是记录了自己的学习进程，本次任务主要是完成前端方面的设计相关内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、项目的展示与介绍：

1、介绍：

本次主要是完成项目的首页设计，其基本内容包含有：（1）博客的页面设计 （2）博客的内容布局 （3）如何使用云端的网络资源进行链接式调用。

2、基本的布局如下所示：

3、项目成果图展示：

二、项目创建操作步骤：

1.使用工具WebStorm创建一个项目文件【MyBlog】:

2、在static文件目录下创建三个文件夹【image】、【css】、【js】用于存放相应的静态资源文件内容：

3、创建首页文件【index.html】用于编写内容：

4、css文件内容如下：

说明：此处为了更便于说明我就直接将最后首页以及内容详情页面的css资源全部展示出来，若有疑问可以去B站看看李仁密老师的视频“小而美博客”

三、创建首页部分【index.html】，编写具体内容：

1、编写导航部分，以及连接css文件、云端资源链接等。

导航部分查看结果：

说明：这部分内容主要是编写上面的导航栏中的内容，前端内容对我而言没有后端熟悉，所以我尽量用自己的语言来解释一下。

2、编写中间内容：

中间部分结果展示：

说明：这是中间部分内容的展示，这些数据是手动添加在index.html上的假数据，由于还没涉及到后端的一些操作所以想用假数据进行填充。

3、中间内容的内容分类等专栏的设计：

右边内容分类展示：

3、编写低端的footer部分：

低端结果展示：

四、创建博文详情页面【blog.html】:

本次blog.html主要是在index.html的内容上做了一些小小的修改，我就直接展示代码了：

结果展示：

总结

说明：最后的index成品展示已经出现在了文章的开始处，这次编写index.html花了我三天的时间，主要是不是为了快速完成项目作业，是为了理解内容的含义，后端的任务会在接下来的日志中发布。

标签：index,01,2021.06,展示,08,html,内容,编写,css
来源： https://blog.csdn.net/yongzhongyang/article/details/117715567