JA文档中文翻译 - JA模板定制FAQ - 头部及页脚的圆角样式
前面一篇文档中，我们为页面整体设置了内边距及背景色等样式，今天继续，看看怎样为头部(header)和页脚(footer)添加圆角样式，使其更加贴近目标页面的风格样式。
先来看看头部的圆角做法。打开layouts/blocks路径中的header.php文件，在第一行代码后面添加：
接下来打开css文件夹中的template.css文件，在922行附近找到如下代码：
#ja-header { background: #333; position: relative; z-index: 10; }
在这行后面添加如下代码：
#corner-top-left {background: #333 url(../images/top-left.jpg) no-repeat top left;
float:left;height:10px;width:10px;}
#corner-top-right {background: url(../images/top-right.jpg) no-repeat top right;
position:absolute; right:0; top:0; height:10px;width:10px;z-index:12;}
现在header部分的实际圆角样式应该如下图所示了：
再来看页脚圆角样式的做法；打开layouts/blocks路径中的footer.php文件，在20行附近找到如下代码：
<div id="ja-footer" class="main">
在这行后面添加如下代码：
同样，回到template.css文件中，将1297行附近的#ja-footer样式代码替换为：
#ja-footer {
background: #F6F6F6;
border-top: 1px solid #fff;
clear: both;
padding: 20px 0;
}
并在这段后面添加如下代码：
#corner-bot-left {background: url(../images/bot-left.jpg) no-repeat bottom left;
position:absolute; left:0; bottom:0; height:10px;width:10px;}
#corner-bot-right {background: url(../images/bot-right.jpg) no-repeat bottom right;
position:absolute; right:0; bottom:0; height:10px;width:10px;z-index:12;}
我们还要隐藏掉banner模块位，它在我们的设计需求中是不必要的。
接下来，我们对页脚中的元素样式做一下调整。在template.css文件的1308行附近找到#ja-footer .main的样式代码，并整体替换为：
#ja-footer .main {
color: #666666;
padding: 0;
position: relative;
}
这样可以去掉版权信息模块左侧的点状边框线。接下来，我们要将页脚导航菜单移至右侧，与版权信息模块的位置对调。在1320行附近找到#ja-footer .ja-footernav的样式代码，并整体替换为：
#ja-footer .ja-footnav {
float: right;
font-size: 100%;
margin: 0 0 10px;
overflow: hidden;
position: relative;
}
然后将版权信息模块移至左侧；在1314行附近找到#ja-footer .inner样式代码，并替换为：
#ja-footer .inner { float: left; padding: 0 15px; }
搞定；现在的页脚样式应该如下图所示：
译者：Viiiix7210
如需转载，请注明官方英文文档及本人译文的出处，谢谢。查看官方英文文档: JA Template Framework/FAQs
| < Prev | Next > |
|---|
RSS Feed
评论刷新