网络干货 ·

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

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

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


教程一

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

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

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

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

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


效果

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


代码

html结构

<!DOCTYPE html>
<html>
<head>
	<title>月宅所推荐的布局</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<!-- 顶部 -->
<div class="ikmoe-head"></div>

<!-- 内容区 -->
<div class="ikmoe-zhongjian">
	<div class="ikmoe-zuo">
		<div class="ikmoe-wz"></div>
	</div>
	<div class="ikmoe-you"></div>
</div>

<!-- 底部 -->
<div class="ikmoe-footer"></div>

</body>
</html>

CSS样式

body{
	margin: 0px;
	padding: 0px;
}
.ikmoe-head{
	background-color: #FF0033;
	width: 100%;
	height: 70px;

}
.ikmoe-zhongjian{
	background-color: #DDDDDD;
	width: 100%;
	height: 560px;
}
.ikmoe-footer{
	background-color: #8098F6;
	width: 100%;
	height: 50px;
}
.ikmoe-zhongjian{
	width: 1120px;
	height:560px;
	margin:0 auto;
}
.ikmoe-zuo{
	background-color: #FFC977;
	width: 798px;
	height: 560px;
	float: left;
}
.ikmoe-you{
	background-color: #55DDFF;
	width: 250px;
	height: 560px;
	float: right;
}

增强型

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

<!DOCTYPE html>
<html>
<head>
	<title>月宅所推荐的布局</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<!-- 顶部 -->
<div class="ikmoe-head"></div>

<!-- 内容区 -->
<div class="ikmoe-zhongjian">
	<div class="ikmoe-zuo">
		<div class="ikmoe-wz">
			<!-- 缩略图 -->
			<div class="ikmoe-slt"></div>
			<!-- 标题 -->
			<div class="ikmoe-bt"></div>
			<!-- 摘要 -->
			<div class="ikmoe-zy"></div>
		</div>
	</div>
	<div class="ikmoe-you"></div>
</div>

<!-- 底部 -->
<div class="ikmoe-footer"></div>

</body>
</html>

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

.ikmoe-slt{
	float: left;
	width: 220px;
	height: 150px;
	background-color: #A1D87D;
}
.ikmoe-bt{
	float: left;
	width: 450px;
	height: 30px;
	background-color: #FFAADD;
}
.ikmoe-zy{
	float: left;
	width: 450px;
	height: 120px;
	background-color: #B8F1E6;
}

文章列表效果:


结束

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

参与评论

  • 雨哥

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

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

    一代水王 [林大B8]

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

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

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

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

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

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

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

    学到了 :阿鲁8:

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

    这个可以有 [林大B13]

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

    天美……可啪 :阿鲁11:

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

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

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

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

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

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

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

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

    [微博表情6]

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

    [林大B8]

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

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

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

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

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

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

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