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



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

那么今天带来的是怎样的教程呢?可谓是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,请自行解决哟。

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
站点出售中https://ikmoe.com/announcement/20357.html
15 条回复 A 作者 M 管理员
  1. 签到成功!签到时间:下午8:16:12每日打卡,生活更精彩哦~

  2. 一代水王

  3. 天美,是做游戏的么

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

  4. 单栏大法好!

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

    学到了

  6. 这个可以有

  7. 天美……可啪

  8. 这篇教程对我切图仔很有用! (棒读)

  9. 你你你你竟然加入天美坑我们

  10. 简单现成的HTML前端教学。

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

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

    • 可以的话水一篇面试什么的,还会吸眼球

    • 面试什么内容的,做鸡还是做鸭

欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论