SS模板页面量大 调用可后台生成 这样的调用模式对新手来说可能象天书一样难以读懂
而SS的每个分类页内容页可以指定单独的模板文件让我们的站更多样话，这样就需要从调用开始
在读懂调用之前我们需要掌握基本的HTML语言 以现在主流DIV+CSS 只要我们读懂了调用的模式和掌握基本的
DIV+CSS 做一个漂亮的风格不是难事
首先来说如何读懂DIV
在模板文件中 很难看出页面到底是个什么的样式，现在我们以默认default模板为例
怎么来修改默认模板宽度 需要软件DW
我们用DW打开模板文件 index.html.php
打开后有三总模式可以选择 怎么样才能清除的看出模板的布局结构呢 我们来选择拆分 这样可以看到代码
和基本的布局结构 ，更方便我们下边的修改
打开后是不是看着很乱，根本就没什么所谓的所见即所得呢
这里我们需要把默认模板CSS文件插入到文件中
插入模板的CSS文件就可清除的看出 布局了
可能很多人会问 我怎么才知道那个是这个文件的CSS呢，我们可以从文件中看出
这里可以看到他使用的是style.css文件
接下来我们修改他页面的宽度
在DW中点击所见模式中的最外层边框部分
这时候我们可以在代码部分 看到 标签的选择器部分 <div id="wrap"> id="wrap"
在我们前边选侧的CSS中查找到 wrap 可以看到如下部分
#wrap { margin: 0 auto; text-align: left; width: 778px; padding: 0 4px; w\idth: 770px; }
这里我们看到
margin: 0 auto;
text-align: left;
width: 778px;
padding: 0 4px;
w\idth: 770px;
这些是#wrap一些属性
margin: 0 auto; margin 为间距 这里的属性为0 auto 代表上下是0左右自动，意思就是上下间距是0 左右自动，也就是剧中。
text-align: left; 文本居左
width: 778px; 宽度778像素
padding: 0 4px; 填充 上下0像素 左右4像素
w\idth: 770px; IE6以后版本不考虑 可删除掉
有了这些 我们就可以根据自己的需要做相应的改动了
-------------------------------------------------------------------------------------
接上--------
-------------------------------------------------------------------------------------
现在我们还是接上次的开始 来修改导航部分 很多人想把模板改宽一些 我们现在就吧宽度改为950px
接上次的修改#wrap部分 修改宽度即可
-------------------------------------------------------------------------------------
现在开始导航部分修改 改为950像素后效果
下边我们先不管他 现在导航部分少了一部分，在DW中我们可以看到
LOGO 和右侧的导航 现在我们在可视的状态下点LOGO和导航部分 的虚线框 这样我们就看到了这部分的代码也呗选取了
在22图中我们可以看到 22行 那里有一个小减号 我们点下减号 把代码折叠下 这样目的为了不和其他代码弄混
下图可以看到折叠后效果之后我们可以在留出一大片的回车 吧上下分开 以便更清晰的修改我们选取的这一部分
哇哦 打开折叠部分一看 就这么一点代码   （折叠后的代码在行标处会有个加号 点下加号就打开了）-
- <table border="0" cellpadding="0" cellspacing="0" id="headertab">
- <tr>
- <td id="logo">
- <a href="{S_URL}/"><img src="{S_URL}/templates/$_SCONFIG[template]/images/logo.gif" alt="$_SCONFIG[sitename]" style="border: none;" /></a>
- </td>
- <td id="topmenu">
- <ul>
- <li><a href="{S_URL}/">首页</a></li>
- <!--{loop $channels['menus'] $value}-->
- <li><a href="$value[url]">$value[name]</a></li>
- <!--{/loop}-->
- <li><a href="{S_URL}/batch.search.php">搜索</a></li>
- </ul>
- </td>
- </tr>
- </table>
id="headertab" 好 我们到CSS中查找 headertab 到底是什么
在CSS中我们找到了 原来是
#headertab{margin-bottom:4px;}
在继续说下margin 的一些属性
用margin-bottom来做例子
margin有两种三种写法
margin:0; 后边一位数 为上下左右全部是0
margin:0 0; 两位数 顺序为 上下 左右
margin:0 0 0; 三位数要细点说下了 如果这时候 第一位是0 第2位为5 第三位3
意思就是 上0 右2 下3 左 继承第二为的数值左为2 以此类推
顺序分别为 上 右 下 左 4位数时候就不用说了
另外分别还有
margin-top:0;
margin-right:0;
margin-bottom:0;
margin-left:0;
上边四组也分别是 上 右 下 左 这样写起来对某些单独需要调整的位置比较灵活而不影响其他属性
好 这样我们就看出了
#headertab{margin-bottom:4px;}
是下间距4像素 与下边间距是4像素 对我们现在要修改的地方暂时还没什么影响 先不管了继续
在看 <td id="logo"> 这里又出现了 id="logo" 同样到css中查找 logo
在CSS中找到了
#logo{padding: 5px; vertical-align:top; border-right:1px solid #CCC;}
来看下这里 padding: 5px; 和margin 基本差不多 不过他不是间距 简单点说可以理解为内部间距 在标签内部填充5个像素 也是 顺序分别 上 右 下 左
vertical-align
是设置文字竖直方向对齐属性的样式(Style)。注意,这个样式仅对table有效，或者可以说是仅对td有效。
border-right:1px solid #CCC;
border 边框啦 后边是right 那就是右侧 1px 这个好理解 一像素 solid 为实线
在CSS中可以为border设置很多属性 比如虚线 实线 还有好多好多 不妨搜索下CSS border的属性
#CCC 这个是颜色啦~~ 1像素的浅灰色实线 这样就出来结果了
#LOGO填充5像素 垂直顶端 右侧一像素的灰色实现
接下来就是顶部导航部分了
<td id="topmenu"> 又找到了 id="topmenu" 同样到CSS中搜索 topmenu
找到了
- /*顶部导航*/
- #topmenu {vertical-align:middle; width:100%;}
- #topmenu ul{font-family:Simsun,Mingliu; list-style:none; margin:0;padding:0; background:#FAFCFF url(../images/headermenu_bg.gif);}
- /*\*/ * html #topmenu ul{ height: 1%; }/**/ *> #topmenu ul{ overflow: hidden; }
- #topmenu li {float:left; margin:0 6px; height:24px;line-height:24px; white-space:nowrap;}
- #topmenu a {color:#154BA0;}
#topmenu ul{font-family:Simsun,Mingliu; list-style:none; margin:0;padding:0; background:#FAFCFF url(../images/headermenu_bg.gif);}
font-family:Simsun,Mingliu; 字体
list-style:none; list-style是设置列表项目(ol li)相关样式综合属性的样式(Style)。包括list-style-image（图像）list-style-position（位置）list-style-type（定义预设样式）。
这里是none 关闭了
margin:0;padding:0; 间距 填充
background:#FAFCFF url(../images/headermenu_bg.gif); 背景颜色以及背景图片
#topmenu li {float:left; margin:0 6px; height:24px;line-height:24px; white-space:nowrap;}
其中 float:left; 浮动 左 margin:0 6px; 上下0 左右6 height:24px;高度24 line-height:24px; 段落的行高、行间距 如果高度为24 行高也是24 那么可以理解为垂直剧中
white-space:nowrap; 禁止文字换行
有了这些是不是能帮助你更快的修改模板呢
现丑了 接下来在往下看
<div class="banner">$ads[pageheadad]</div>
这个是广告 css中banner
.banner { width:770px; overflow:hidden;clear:both; margin-bottom:4px;}
宽度是770 我们已经吧宽度改为950了 那么这里我们要改为942，为什么要942呢 在
#wrap { margin: 0 auto; text-align: left; width: 950px; padding: 0 4px; } 中有padding: 0 4px; 左右4像素的填充
如果就想950的话可以删掉padding: 0 4px; 部分
在下图中我们来看主导航部分
在dw中我们还是同样方法选取代码后 看到
<div id="menu">
查找cs找到
- #menu { border-top: 3px solid #86B9D6; border-bottom: 1px solid #86B9D6; line-height: 25px; background: url(../images/menu_bg.gif); width: 770px; overflow: hidden; clear:both;}
- #menu ul { list-style: none; margin: 0 1em; padding: 0; width: 100%; overflow: hidden; }
- #menu li { float: left; margin: 0 2px; width: 6em; overflow: hidden; white-space: nowrap; }
- /*首页导航*/
- #menu dl { margin: 0 1.5em; padding: 0; height: 25px; overflow: hidden; }
- #menu dt { float: left; width: 4em; white-space: nowrap; }
- #menu dt a { color: #5086A5 !important; }
- #menu dd { float: left; width: 6em; margin: 0 2px; overflow: hidden; white-space: nowrap; }
单位 em 而不是px 了
em指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。em有如下特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
搜索下 就可以搜索到很多
在
#menu { border-top: 3px solid #86B9D6; border-bottom: 1px solid #86B9D6; line-height: 25px; background: url(../images/menu_bg.gif); width: 770px; overflow: hidden; clear:both;}
部分 只要我们修改 宽度770 就可以了 导航就和整个页面协调了
在插一小段
几个css元素的简单解释 div ul dl dt oldiv，这个很常见，块级元素，div尽量少用，和table一样，嵌套越少越好
ol 有序列表。
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
表现为：
1……
2……
3……
ul 无序列表，表现为li前面是大圆点而不是123
<ul>
<li>……</li>
<li>……</li>
</ul>
很多人容易忽略 dl dt dd的用法
dl 内容块
dt 内容块的标题
dd 内容
可以这么写：
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
dt 和dd中可以再加入 ol ul li和p
理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局
 写的好累 灰色页面真卡 忍了 今天就到着了 也该歇歇了
可以网上搜索下 很多很多相关的介绍
[ 本帖最后由 wpflove111 于 2008-5-21 06:43 编辑 ] |
置顶卡
喧嚣卡
变色卡
千斤顶
显身卡
