嗨，帅宅又再次回来水文章了，最近实在是太忙了，由于快接近过年，为了得到非常棒的年终奖从而废寝忘食加班，忘了我还有个博客的存在，17年内不知道帅宅跳槽多少家公司了。最近加入了天美，先看看待遇怎样再看看有没有挖我的! [微博表情7]
那么今天带来的是怎样的教程呢？可谓是html中的基础的基础，由于目前使用的主题实在臃肿，想重新写一份一模一样的，然后很喜欢这样的布局结构，特此分享一波，当然，如果了解这种布局的，也不必来秀啦。
教程一
准备：index.html及其1.css文件在一个文件夹中。
首先我们需要来实现这样的框架，也就是顶部栏、中间块、左边块、右边块、底部栏。这样的结构你可以参考我的站点。
![图片[1]-[教程]月宅推荐CSS博客布局写法,左右双栏-月宅酱的博客](https://cos.moejpg.com/yzj/wp-content/uploads/wp-img/images/2018/01/24/16703e867aa00c19f2decbb5c7bcbf86.png)
我们来看看html的结构，将整体分为三个块，上中下，左边为文章列表，右边为单独的侧边栏进行加载
![图片[2]-[教程]月宅推荐CSS博客布局写法,左右双栏-月宅酱的博客](https://cos.moejpg.com/yzj/wp-content/uploads/wp-img/images/2018/01/24/25f73ef288e475a50f3e8360e27c38cb.png)
控制台的结构，也是一眼看明白。
![图片[3]-[教程]月宅推荐CSS博客布局写法,左右双栏-月宅酱的博客](https://cos.moejpg.com/yzj/wp-content/uploads/wp-img/images/2018/01/24/9dec9b122e458f633e012db2aaa07d0e.png)
这样的布局为固定自适应，将所有主要内容居中显示，而不是随着浏览器、分辨率的大小，进行百分比缩放，会导致在大尺寸的显示器上面，将整体页面放大，字体看着也大到辣眼睛….
效果
通过如上的结构，就能写出我博客的布局啦，这也是目前博客主流的做法，左列表，右侧边栏。
![图片[4]-[教程]月宅推荐CSS博客布局写法,左右双栏-月宅酱的博客](https://cos.moejpg.com/yzj/wp-content/uploads/wp-img/images/2018/01/24/b070eab5c1ac7353a0e9588aa02ce104.png)
代码
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;
}文章列表效果：
![图片[5]-[教程]月宅推荐CSS博客布局写法,左右双栏-月宅酱的博客](https://cos.moejpg.com/yzj/wp-content/uploads/wp-img/images/2018/01/24/393872faf4c98b6c8a33ea979628abb3.png)
结束
以上就是今天月宅推荐的博客布局啦，其他自己调咯。PS：给用的人一个作业，由于浮动会导致height不会为auto及其真的100%，为了达到自动增加height，请自行解决哟。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![[资源]万华镜4汉化版下载 – 百度云盘-月宅酱的博客](https://cos.moejpg.com/yzj/wp-content/uploads/wp-img/uploads/2017/08/ikmoe_2017-08-18_03-39-59.jpg)
- 最新
- 最热
只看作者