网络干货 ·

[教程]月宅推荐CSS博客布局写法,左右双栏

嗨,帅宅又再次回来水文章了,最近实在是太忙了,由于快接近过年,为了得到非常棒的年终奖从而废寝忘食加班,忘了我还有个博客的存在,17年内不知道帅宅跳槽多少家公司了。最近加入了天美,先看看待遇怎样再看看有没有挖我的! [微博表情7]

那么今天带来的是怎样的教程呢?可谓是html中的基础的基础,由于目前使用的主题实在臃肿,想重新写一份一模一样的,然后很喜欢这样的布局结构,特此分享一波,当然,如果了解这种布局的,也不必来秀啦。


教程

准备:index.html及其1.css文件在一个文件夹中。

首先我们需要来实现这样的框架,也就是顶部栏、中间块、左边块、右边块、底部栏。这样的结构你可以参考我的站点。

我们来看看html的结构,将整体分为三个块,上中下,左边为文章列表,右边为单独的侧边栏进行加载

控制台的结构,也是一眼看明白。

这样的布局为固定自适应,将所有主要内容居中显示,而不是随着浏览器、分辨率的大小,进行百分比缩放,会导致在大尺寸的显示器上面,将整体页面放大,字体看着也大到辣眼睛....


效果

通过如上的结构,就能写出我博客的布局啦,这也是目前博客主流的做法,左列表,右侧边栏。


代码

html结构

CSS样式

增强型

接下来我们给他添加月宅博客这样的文章布局,html的结构改成这样

CSS加入这些,很通俗的写法,slt=缩略图,bt=标题,zy=摘要

文章列表效果:


结束

以上就是今天月宅推荐的博客布局啦,其他自己调咯。PS:给用的人一个作业,由于浮动会导致height不会为auto及其真的100%,为了达到自动增加height,请自行解决哟。

参与评论

  • 雨哥

    签到成功!签到时间:下午8:16:12每日打卡,生活更精彩哦~

    2月前 (03-17)
    回复
    回复雨哥
  • tao

    一代水王 [林大B8]

    4月前 (02-05)
    回复
    回复tao
  • noxxxx

    天美,是做游戏的么 [林大B3]

    签到成功!签到时间:下午4:00:36每日打卡,生活更精彩哦~

    4月前 (01-29)
    回复
    回复noxxxx
  • Archeb

    :贴吧表情31: 单栏大法好!

    4月前 (01-29)
    回复
    回复Archeb
  • 某昴

    签到成功!签到时间:上午7:47:11每日打卡,生活更精彩哦~

    学到了 :阿鲁8:

    4月前 (01-27)
    回复
    回复某昴
  • owen

    这个可以有 [林大B13]

    4月前 (01-27)
    回复
    回复owen
  • c

    天美……可啪 :阿鲁11:

    4月前 (01-26)
    回复
    回复c
  • 广树

    这篇教程对我切图仔很有用! [林大B6] (棒读)

    4月前 (01-26)
    回复
    回复广树
  • 狂放

    你你你你竟然加入天美坑我们 :黄色滑稽脸:

    4月前 (01-26)
    回复
    回复狂放
  • 后宫学长

    简单现成的HTML前端教学。 [林大B9]

    4月前 (01-24)
    回复
    回复后宫学长
  • 猫酱杂货店

    签到成功!签到时间:下午7:56:13每日打卡,生活更精彩哦~

    [微博表情6]

    4月前 (01-24)
    回复
  • 月宅

    [林大B8]

    4月前 (01-24)
    回复
    回复月宅
  • 月宅

    签到成功!签到时间:下午7:10:51每日打卡,生活更精彩哦~

    4月前 (01-24)
    回复
    回复月宅
  • 倪酱

    可以的话水一篇面试什么的,还会吸眼球 [微博表情9]

    4月前 (01-25)
    回复
    回复倪酱
  • 月宅

    [微博表情9] 面试什么内容的,做鸡还是做鸭

    4月前 (01-25)
    回复
    回复月宅