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

首先是首页:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏walterlv - 吕毅的博客

图片点击放大,你的网页也能做到!

发布于 2018-07-28 05:27 更新于 2018-08...

56330
来自专栏听雨堂

label自定义的惨痛教训

修改label文字: source.DefaultLabelProperties.Style.Font.Size=9; 修改文字的位置: source.Defa...

21560
来自专栏腾讯NEXT学位

Cocos Creator制作一个微信小游戏(上)

| 导语 微信小游戏都火成这样了,为什么不尝试一下? 我们的目标是使用Cocos Creator从零开始制作一个小游戏,并放到微信上玩。

5.4K40
来自专栏用户画像

使用jatoolsPrinter实现套打

最近在工作中遇到了套打的需求,前前后后,花了不少时间,现在总结一下套打的实现方式。

6710
来自专栏Coco的专栏

【Web动画】SVG 实现复杂线条动画

21850
来自专栏沈唁志

PHP中给图片添加水印

31030
来自专栏知晓程序

如何在小程序中绘制图表?

13820
来自专栏日常学python

用python来给图片加水印

有时候我想在图片上添加自己的水印来防止别人盗图,所以今天给大家分享如何用python给我们的图片添加上水印。我们先来看看效果。

14930
来自专栏分享达人秀

几乎不用但要了解的AbsoluteLayout绝对布局

前面几期基本学习了Android开发中常用的四种布局,之所以把AbsoluteLayout放在后面来学习,是由于在实际开发中很少使用,而且在高版本中已经...

19390
来自专栏菩提树下的杨过

拼凑了几个自定义的Panel(包括FishEyePanel,WrapPanel等几个常用的布局)

先看效果:  ? wrapPanel的效果在固定宽度的情况下看不出来,可查看在线演示地址:http://images.24city.com/jimmy/Cust...

19050

扫码关注云+社区

领取腾讯云代金券