<S-Blog> 博客首页界面设计

在设计完了登录界面以后,继续使用flex布局设计一下博客首页。

首先,来设计一下首页的界面。

圣杯布局

在css -tricks的flex教程中,有介绍如何使用flex布局实现圣杯布局,详情url如下:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-examples

贴一下最终实现效果:


图1 圣杯布局实现效果


图2 自适应屏幕尺寸


图3 自适应屏幕尺寸

下面,我将一步一步使用flex布局实现上面贴图中的效果。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,684评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,521评论 25 709
  • 感觉已经很久没有做过梦了。清晨时做了一个梦,梦见老妈来初中找我,很清楚当时在上班主任的课,走到教室门外时,老妈突然...
    112233D阅读 1,436评论 0 1
  • 20170410分享一段有关培训的辩论词关于对于培训的认知这个问题,我要纠正一下你的认知, 一个好的培训应该在底层...
    桃花岛主Victor阅读 4,714评论 0 0
  • 2017.01.23 还是去了自习,感觉很好,像以前的202吧,现在只能说都相敬如宾,,考完一起吃个烧烤,嘴巴有点...
    然散阅读 1,365评论 0 0