7.4 为模块设置样式 - v0.0.8版本

在前面一节中，我们已经能够在前台输出菜单模块了，但菜单显示出来的样式似乎并不如我们的期待，在这一节我们就来优化这个菜单，让他显示得比较美观。

1，本节目标

美化菜单模块，了解模板开发的工作范畴

2，网站的前端与后端

开发一个完整的网站，一般需要两个部门的技术支持，也就是我们经常所说的前端和后端。后端负责输出数据，前端负责美化。

使用Joomla的一个好处就是你无需后端，就可以制作出一个功能齐全的网站，因为Joomla已经为我们实现了一个非常强大的后端，输出数据完全没有问题（如菜单管理，文章管理，模块管理等等，这就是Joomla为我们体用的后端支持）。上一节我们在前台发布了一个菜单模块，那么菜单模块的数据就已经有了。

剩下的部分也就是对数据展示的外观进行调整了。这也是模板开发的主要内容。理论上，你不需要任何的后端只是，只要你懂得基本的CSS知识，了解Joomla的模板原理，是可以做出很复杂的网站。

3，美化页面

当你能够熟练的使用Joomla来生产数据（如：文章，模块等等），那么模板开发的问题已经和Joomla并没有太多的关系了。剩下的都是简单的HTML,CSS知识。

前台已经输出了我们要的数据，如图

如何来优化，自然就是写一些css样式了。这些是很基础的内容，如果你不清楚，请参考相关的章节：CSS

 4，浏览器调试工具

现在要说的内容已经和Joomla关系不大了，是一些通用的技术——CSS。在写CSS之前，我们需要了解一下浏览器提供的调试工具，能够大大的加快工作进度。

各种浏览器的调试工具并不一样，建议大家安装chrome浏览器，或者firefox浏览器。

• firefox浏览器的下载地址：https://www.mozilla.org
• chrome浏览器的下载地址：https://www.google.cn/chrome/

5，如何使用浏览器的调试器来快速的写css样式

个人比较喜欢chrome的调试工具，在这里就以chrome浏览器为例来说明。

5.1，将鼠标放到需要调整样式的元素的上面。然后点击右键，在弹出框中选择审查选项，打开浏览器的调试器。如图：

5.2，在调试器中，系统会自动定位到当前元素的位置，然后你就可以查看该元素的HTML代码结构，以及现有的CSS样式。如图：

5.3，直接在右边的css样式栏中更改即可，可以立刻看到效果。

5.4，将写好的样式复制下来，存储到CSS文件中。（如何在页面加载css文件前面已经介绍了，不清楚的可以参考：给模板增加CSS文件，JS文件-v0.0.2版本）

6，v0.0.8版本

在本版本中，我仅仅只是调整了一下菜单部分的CSS代码。让他美观一点。（实际上，模板开发的大部分工作就是写CSS代码，请大家记住这一点）。

6.1 代码如下：

.nav {
    height: 60px;
    color: #000;
}
.nav .nav.menu {
    background: #fff;
}
.nav .nav>li {
    position: relative;
    display: inline-block;
    height: 60px;
    line-height: 40px;
}

6.2 前台显示的效果如图：

6.3  v0.0.8版本的代码

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

7，说明

7.1 有一些样式我并没有写，为什么会被应用到元素上面呢？

joomla是模块化的，每一个模块都可以有自己的样式文件。一般的开发者会提供一个相对简单的样式，如果模块默认的样式不满足你的要求的时候，你可以在模板中对这些默认的样式进行覆盖重写

7.2 关于css的说明

模板开发的大部分的工作是为模块的位置写css。由于本教程的核心是介绍Joomla模板开发相关的内容，并不会详细介绍每一段css代码相关细节。大家如果对css代码不熟悉，请自行补全

7.3 剩下的工作 

学到了现在，如果你曾经手写过页面，那么基本上写一个简单的Joomla模板已经不成问题了。剩下的要做的，就是按照你的要求，在后台输出内容，然后调整样式。