编辑“Art2008CMS/Art2008CMS模版的CSS设计”

{{Art2008CMS top}}

之前讲过从零开始学[[Art2008CMS]]模板，用户对Art2008CMS模板设计的方法有一定的了解，但是对[[css]]控制新闻列表中各元素户具体的写法不是 很清楚，这里跟大家做一个讲解：

==步骤一==

在模板中插入标签：模板是前台网面效果的基础，在程序中Template文件夹下，是[[网站]]所有页面的模板,一般情况下我们会把控制页面的css样式写在一个文件下，然后在模板中调用 ，比如在Template/css/style.css文件，需要说明的是在Template/css/文件夹下有两个文件，一个是css.css它里面的样式是程序系统必要的样式，控制这各个功能页面的效果，具体有说明，如果需要修改按照说明修改，不能修改要是名称，只能修改其参数；另一个是style.css，这个文件是用户自定义页面样式，可以任意修改或添加；我们今天讲的内容就是修改这个文件！

*在模板中首先需要连接style.css这个样式文件，不然的话这个样式表中的样式就不起作用；具体代码如下：
<pre>
<link rel="stylesheet" type="text/css" href="#HOPE_InstallDir#Template/css/ style.css">
</pre>
*模板中插入标签的方法很简单，上一节我们已经讲过：
<pre>
(一)：
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td class= NewsList1>#HOPE_NewsList(0,0,0,0,0,0,10,15,1,0,0,0,10,0)#</td>
 </tr>
</table>
（二）
<DIV class= NewsList1>#HOPE_NewsList(0,0,0,0,0,0,10,15,1,0,0,0,10,0)#</DiV>
</pre>

*在这里的NewsList1是对这个列表进行样式控制的样式名称

==步骤二==

*在style.css文件中添加控制这个列表的样式参数：
*CSS代码：
<pre>
    .NewsList1{ padding:2px; width:488px}  /* 整体宽度*/    
    .NewsList1 .NewsList_title{ float:left} /* 列表标题控制*/          
    .NewsList1 span.NewsList_time{ float:rightright}    
    /* 时间对齐控制*/       
    .NewsList1 li{ background:url(../images/icon/ico_3.gif) 
    no-repeat center left; padding-left:20px; list-style:none}    
    /* 列表标题前图标控制*/    
    .NewsList1 .NewsList_lmname { } /* 栏目名称控制*/     
    .NewsList1 .NewsList_more { }  /* 显示'更多'控制*/   

</pre>

*每个元素的样式名称可以到标签辅助工具上找到！

*通过这段就可以控制文章列表的显示效果了，比如字体大小颜色，列表的行距，时间的对齐方式，等等，具体参数还需用户自己根据需要添加。

*值得注意的是要想把网站设计得很好，用户还需掌握一些关于 [[DIV]]+CSS 设计的相关知识，只有这样才能真正做到得心应手！

==参考来源==
*http://www.art2008cms.com/html/install/

{{Art2008CMS}}

[[category:Art2008CMS|A]]