本文分享了作者通过课程创建的个人博客网站，涵盖首页设计、详细内容布局、多栏结构、技术分类与标签、归档功能，以及后台的模板管理，重点展示了前端HTML、CSS、JavaScript和后台管理模块。
跟着 课程 实现了一个个人网站，主要用来放个人博客。
内容总览
总体设计规划
前端：首页、详情页、博客分类、技术标签、归档、关于我
后台管理：模板。
一、前端页面
- 首页
参考简书）左右两栏、底部设计
- 关于我简介、博客分类预览、技术标签预览
- 博客标题以及内容简介
- 详情
作者 || 时间 || 浏览次数
首页图
标题 || tag（原创、转载、翻译）
内容
标签
作者/发表时间/版权声明/打赏功能
评论列表；评论发表（参考廖雪峰博客，新浪登录
- 博客分类
标签列表，标绿代表选中，对应的文章列表显示
- 归档（时间线）
根据时间线浏览博客列表：共X篇 标题 时间 tag
- 关于我（可以整成静态）
照片 介绍 个人爱好 技术标签 github/邮箱等
二、后台管理部分：
导航：博客、分类、标签、留言…
- 博客：
- 发布新博客：标题/内容/分类/标签，草稿/发布
- 博客管理列表：搜索标题/类型：标题/分类/时间/操作（修改/删除）
一、前端
1.首页
开发环境使用VS CODE，目录建好static/{images,css,js}。
快速生成html代码：第一行输入! 2
然后加入cdn css放head最后， jquery,js放body结尾。
快捷输入: nav+tab，div+tab，footer+tab
占位图片网址：https://picsum.photos/id/1/200/300
图标网址：fontawesome.io/icons
背景纹理图片：www.toptal.com/designers/subtlepatterns
整体思路：先放总体的框框再写局部代码，根据分隔进行规划。
手机端响应：stackable
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
