这一节,我们将使用joomla模块来实现网页侧边栏的内容,并且优化显示效果
学习如何使用模块来产生设计图中的内容
2.1,搜索部分
我们在后台新建了一个搜索模块,然后发布到前台的sidebar这个位置
2.2 为您推荐部分
这一部分使用文章组件的 新闻轮播模块,然后同样发布到sidebar这个位置
2.3 更多文章部分
这一部分使用文章组件的 文章类别列表模块,然后同样发布到sidebar这个位置
显示的效果如下:
上面,已经成功的展示出来了数据。下一步就是为这些数据写css代码了。具体细节就不说了。
优化后的效果如下:
在本版本中,我已经侧边栏输出的内容进行了css调整,让他美观一点。(实际上,模板开发的大部分工作就是写CSS代码,请大家记住这一点)。
4.1 代码如下:
/*新闻轮播部分的CSS样式*/ .newsflash { border: solid 1px #f2f2f2; padding: 5px; } h4.newsflash-title { border-bottom: solid 1px #f2f2f2; padding: 5px; } /*搜索部分的CSS样式*/ .search { margin: 20px 0px; padding-bottom: 20px; border-bottom: solid 1px #eee; } .search label { display: none; } .search input[type=search] { border: 1px solid #ddd; width: 100%; padding: 5px 10px; border-radius: 20px; } /*分类模块*/ ul.categories-module { margin: 0px; padding: 10px; } ul.categories-module li{ list-style:none; }
4.2 学习模板开发的方法
4.3 v0.0.11版本的代码
关于v0.0.11版本的代码,可以在此下载 tpl_plancv0.0.11_2019-01-14_for_j3x.zip