标签：index 01 2021.06 展示 08 html 内容 编写 css
个人博客开发
提示：本次项目为学期的实训项目，具有一定的学习意义，主要资源来源于B站以及李仁密老师的视频，完全是全方位锻炼自己的编写能力以及对代码的处理与逻辑能力，十分感谢李老师的资源（尽管看在208的资源费的时候还是略显痛心不过好在有B站在）
文章目录
前言
本次的实训任务主要是通过李仁密老师的项目作为借鉴“小而美博客”开发，其中包含知识点比较丰富，在静态页面设计方面主要包括有前端的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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。