1. 首页
  2. 网络干货

[教程]月宅推荐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" rel="external noopener nofollow"  rel="external noopener nofollow" >
</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" rel="external noopener nofollow"  rel="external noopener nofollow" >
</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,请自行解决哟。

  • 版权声明:本文基于《知识共享署名-相同方式共享 3.0 中国大陆许可协议》发布,转载请遵循本协议
  • 文章链接:https://ikmoe.com/7383.html [复制] (转载时请注明本文出处及文章链接)
上一篇:
:下一篇

公告:雪樱主题,春节优惠价:168¥ 点我查看!

作者:月宅

介绍:今天也要看我装逼吗?

文章:2396篇

博客:https://ikmoe.com/
最后更新:18-01-24

14 条评论

gravatar

  1. tao 1
    初来乍到

    一代水王 [林大B8]

    #倒数1楼
  2. noxxxx 1
    初来乍到

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

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

    #倒数2楼
  3. Archeb 1
    初来乍到

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

    #倒数3楼
  4. 某昴 4
    正正正正

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

    学到了 :阿鲁8:

    #倒数4楼
  5. owen 1
    初来乍到

    这个可以有 [林大B13]

    #倒数5楼
  6. c 1
    初来乍到

    天美……可啪 :阿鲁11:

    #倒数6楼
  7. 广树 1
    初来乍到

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

    #倒数7楼
  8. 狂放 5
    援交大佬

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

    #倒数8楼
  9. 后宫学长 3
    拥有正字

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

    #倒数9楼
  10. 猫酱杂货店 3
    拥有正字

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

    [微博表情6]

    #倒数10楼
    1. 月宅 6
      开后宫的
      [最萌站长]
  11. 月宅 6
    开后宫的
    [最萌站长]

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

    #倒数11楼
    1. 倪酱 1
      初来乍到

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

      1. 月宅 6
        开后宫的
        [最萌站长]

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