前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Django搭建博客(二):博客的布局

Django搭建博客(二):博客的布局

作者头像
渔父歌
发布2018-09-28 16:01:30
1.2K0
发布2018-09-28 16:01:30
举报
文章被收录于专栏:数据结构笔记数据结构笔记

首先是首页:

上面的图片就是我的博客未来的布局简图了,现在来好好讲一讲这个布局

这个布局借鉴了我关注的许多博客,不过也加了一些自己想法进去

首先就是第一行的导航栏了,但我这个并不是导航栏

因为我的博客里计划只放文章,不需要太多的功能,所以我把导航栏改成了标题栏

黄色的方框里是我博客的名字,也相当于是一个 logo吧,绿色的部分我计划每小时随机显示一条名言(或者鸡汤?)

下面分为两列,左边的一列用来显示文章列表

右边的一列作为侧边栏,用来显示我的头像、简介、文章分类、外链之类的内容

文章列表计划做个响应式的布局,在 PC端就像上面的图片显示的那样

每篇文章作为一卡片,封面图交叉显示

卡片的第一行显示文章的标题,第二行显示文章的一些相关信息,第三行新显示文章的摘要,所有内容全部左对齐。

而在移动端,侧边栏会隐藏(可以考虑做成一个汉堡菜单,或者悬浮按钮菜单之类的),整个页面变成只有一列显示,如下图:

但是标题栏好像看着有点突兀,干脆去掉好了

去掉标题栏之后瞬间清爽简洁了很多有么有

这里对原来的页面做了一些小改动,原来在移动端里靠边显示的封面图居上显示,并且标题也移动到封面图的最下沿,然后再是文章信息和摘要。

布局做完了,下面就只要把布局转化成 html代码就行

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.07.19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档