6.3 色块法完成页面的布局-v0.0.4版本

在前一节中，已经对设计图有了一个大概的模块位置划分，在这一节中我们就使用代码，来初步实现这个划分。

1，本节目标

使用简单的HTML和CSS代码，对页面进行划分。

2，说明

本节的代码仅为教程演示使用，并不推荐作为模范代码。另外，为了便于观看，我会删掉一些和知识点无关的代码，并不保证给出的代码都是可复制粘贴就运行的

3，用代码来分隔

使用代码来实现模板的分隔的过程其实和使用html手写页面没有区别，无外乎就是html和CSS.

3.1 按照整体结构，将页面分隔

在开发模板的时候，我个人比较喜欢从整体到局部来逐一完成，将每一部分使用一个色块来标识，让人一目了然。首先我们将页面分隔成顶部，中间，底部三部分。

修改index.php文件：

<?php

//得到文档对象
$doc = JFactory::getDocument();

//向文档中加入CSS
$doc->addStyleSheet($cssFile);

?>
<!DOCTYPE html>
<html>
	<head>
<jdoc:include type="head" />
	</head>
	<body>
<div class="top">
	<div class="container">
<p class="text">顶部</p>
	</div>

</div>
<div class="mid">
	<div class="container">
<p class="text">中间</p>
	</div>
</div>
<div class="bottom">
	<div class="container">
<p class="text">底部</p>
	</div>
</div>
	</body>
</html>

修改template.css文件

body ,p {
    padding: 0;
    margin: 0;
}

.top {
    height: 60px;
    background: #336699;
}
.mid {
    height: 600px;
    background: #ff3366;
}

.bottom {
    height: 200px;
    background: #003366;
}

.container {
    width: 1140px;
    margin: 0 auto;
}
.text {
    color: #fff;
    font-size: x-large;
}

刷新前台，看到此时的结果如图：

至此，我们将完成了页面布局的开发。

3，v0.0.4版本

关于v0.0.4版本的代码，可以在此下载tpl_plancv0.0.4_2019-01-07_for_j3x.zip

作者：张敏

原文：http://www.joomlachina.cn/articles/1821-jiaocheng/joomla-plan-c/1529-first-template-7?tmpl=component&zhuanti=1

6.3 色块法完成页面的布局-v0.0.4版本

1，本节目标

2，说明

3，用代码来分隔

3，v0.0.4版本

Joomla模板开发教程

获取最新资讯

基础学习教程

Joomla系列教程

站内链接