joomla1.5模板制作详解  下载本文

给菜单加样式

打开文件/templates/jk_joomlask/css/template.css编写代码:(基于上节的代码,修改#jk_nav .main部分,并将颜色标识去除,CSS中的调用 图片见安装包)

并且我们新加了一些公用样式,和菜单配套的图片以及菜单、广告的底边距,请注意区分

@charset \

/*------------------------------------------------------------------------ # Copyright (C) JOOMLASK. All Rights Reserved. # @license - Copyrighted Commercial Software # Author: JOOMLASK # Websites: http://www.joomlask.com # This file may not be redistributed in whole or significant part. -------------------------------------------------------------------------*/

/*--------------*/

body{background:#fff;color:#000;font-family:Tahoma, Geneva, sans-serif;line-height:1.5;font-size:12px;} /*新加了一些公用样式*/

body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input,textarea,select,button,th,td{margin:0;padding:0;} ol,ul,li{list-style-type:none;} /*global*/

#jk_wrapper{}

/*定义每个框架的宽度、居中对齐*/

#jk_wrapper .main{width:1000px; margin:0 auto;} /*定义需要设定固定高度的DIV高度*/

#jk_header .main{ height:70px; background:black;} /*菜单详细样式代码*/

#jk_nav{ margin-bottom:6px;}

#jk_nav .main{ height:63px; background: url(../images/nav_bg.gif) repeat-x left top; }

#jk_nav ul#dropdown {display: block;height: 63px;margin: 0; padding: 0 0 0 16px; position: relative;}

#jk_nav ul#dropdown li {float: left; font-family: \微软雅黑

\,Tahoma,Geneva,sans-serif;font-size: 14px;font-weight: bold;height: 35px;}

#jk_nav ul#dropdown li a {color: #FFFFFF;display: inline-block; height: 29px; padding: 6px 12px 0;}

#jk_nav ul#dropdown li.active a {color: #336699;}

#jk_nav ul#dropdown li.hover, ul#dropdown li.active {background: url(../images/nav_hover.gif) repeat-x scroll 50% top transparent;} #jk_nav ul#dropdown li.active ul li.active {background: none repeat scroll 0 0 transparent !important;font-weight: normal;height: 28px !important;}

#jk_nav ul#dropdown li.active ul {display: block;font-weight: normal;height: 28px !important;visibility: visible;}

#jk_nav ul#dropdown ul {font-weight: normal;height: 28px;left: 0; position: absolute; top: 34px; visibility: hidden; width: 728px;z-index: 9999;}

#jk_nav ul#dropdown ul li { background: none repeat scroll 0 0

transparent;color: #000000;float: left; font-weight: normal; height: 28px;}

#jk_nav ul#dropdown ul li.hover { background: none repeat scroll 0 0 transparent; font-weight: normal;}

#jk_nav ul#dropdown ul li a { background: none repeat scroll 0 0 transparent; color: #006699; display: inline-block !important; font-size: 12px; font-weight: normal; height: 22px !important;

#jk_nav ul#dropdown ul li a span { display: inline-block;height: 22px;}

/*最新的广告尺寸为1000*80的大小*/ #jk_ad_top{ margin-bottom:6px;}

#jk_ad_top .main{ height:80px; background:yellow;} #jk_body .main{ height:800px; background:blue;} #jk_bottom .main{ height:170px; background:green;}

上述样式是针对主菜单进行的设计,保存之后打开前台测试得下图结果: 那么我们现在测试以上改的结果如下图

菜单就成形了。

大横幅广告

上一节中我们有提过,旗帜广告和广告模块的创建,同上节,我们把演示中的黄色部分替换为广告,把准备好的广告上传到/images/banners目录下。 记得在旗帜广告管理中,要创建一个新的分类,因为广告模块要按分类调用。

创建广告模块并设置到我们预设的jk_adlong模块位置,结果如下图 *注意上述的样式中,我们也要把原来预设的黄色背景去掉,高度改成现在的80px,并且让广告的下面显的有一些边距 #jk_ad_top{ margin-bottom:6px;} #jk_ad_top .main{ height:90px;}

底部版权信息

一) 底部主菜单(底部友情链接本节不讲)

上面我们创建过了主菜单,也创建了主菜单的模块,这里我们还要创建一个底部的主菜单模块,样式与上面的主菜单也略有不同

进入后台->扩展->模块管理->创建一个新的菜单模块(mod_mainmenu),模块位置选择jk_bnav,不显示子菜单,上

在我们也讲到了高级配置中设置的菜单ID来区分,这里的底部菜单我们就填入ID为: dropdown_bottom

继续给底部菜单添加样式,补充后的样式为(底部的绿色标识背景也去除):

@charset \