< 返回 6.3 色块法完成页面的布局-v0.0.4版本 - C计划

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

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;
}

刷新前台,看到此时的结果如图:

 

上面的代码非常的基础,在此不做讲解,如果你感觉理解不来,那么你需要自己补充学习相关的HTML,CSS基础。更多请参考:知识储备

3.2 按照模块的位置,将每一部分进行细分

使用同样的方法,在网页上标注出每一个模块的色块。最终的效果如下:

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

3,v0.0.4版本


关于v0.0.4版本的代码,可以在此下载[下载文件:]tpl_plancv0.0.4_2019-01-07_for_j3x.zip

C计划

第3章:Joomla模板机制
第13章:让模板支持多语言
  • 内容提要
  • 留言讨论 (0)
  • 视频教程
在前一节中,已经对设计图有了一个大概的模块位置划分,在这一节中我们就使用代码,来初步实现这个划分。

评论 (0)

  • 最新在前
  • 最佳在前

内容待完善

该课程提供视频版,可以观看完整的视频教程