技巧文章：常用CSS修改实际操作技巧

tznktg · 发表于 2007-10-8 09:16:04

1.--栏目文章列表内容间隔颜色的定义1--

1): 方法1，表格虚线定义：

进入后台，打开网站风格管理，按ctrl+F查找 .listbg2 找到：
  .listbg /* --栏目文章列表内容间隔颜色的定义1-- */
{
background:#ffffff;
}
.listbg2 /* --栏目文章列表内容间隔颜色的定义2-- */
{
background:#f7f7f7;
}

修改为：

  .listbg /* --栏目文章列表内容间隔颜色的定义1-- */
{
background:url(Skin/blue/xxx.gif);height: 24;font-size:9pt;color: #000000;
}
.listbg2 /* --栏目文章列表内容间隔颜色的定义2-- */
{
background:url(Skin/blue/xxx.gif);height: 24;font-size:9pt;color: #000000;
}

注释：xxx.gif为虚线图片大小为3X24 px 与 height: 24 必须对称。color: #000000; 字体颜色。

事例图片1：

2): 方法2，标签来定义(需要手动把代码加到后台风格里)

自己定义连接的文字颜色与行高等参数。

{$GetArticleList(1,0,True,0,True,6,False,False,"",0,3,2,16,0,False,3,True,False,0,False,False,False,True,True,False,1,1,aaa,bbb,ccc)}

例子：
* 自定义列表标签链接文字颜色定义 */
a.aaa{text-decoration: none;}
a.aaa:link {color: 000000;FONT-SIZE: 9pt;}
a.aaa:visited {color: 000000;FONT-SIZE: 9pt;}
a.aaa:hover{color: ff6600;FONT-SIZE: 9pt;}
a.aaa:active {color: 000000;FONT-SIZE: 9pt;}
.bbb /* --自定义列表标签中偶数表格行背景颜色定义-- */
{
background:url(Skin/blue/hengxian.gif);height: 24;font-size:9pt;color: #000000;
}

.ccc /* --自定义列表标签中偶数表格行背景颜色定义-- */
{
background:url(Skin/blue/hengxian.gif);height: 24;font-size:9pt;color: #0000ff;
}

注释基本同上。

事例图片2：

2.留言版、论坛新贴、专题列表、最新推荐等……用JS来调用的列表CSS

  留言举例说明：

<span style="FONT-SIZE: 12px; LINE-HEIGHT: 24px; LETTER-SPACING: 1px">
<script src="guestbook/newguest.asp?KindId=0&num=8&tlen=13&order=0&info=0"></span>

其他调用的列表CSS方法类似，不一一列出。

事例图片3：

3.表格边框CSS定义

1):方法1；
动易默认文章首页CSS

进入后台，打开网站风格管理，按ctrl+F查找 .main_title_282 找到：
.main_title_282 /* 栏目文章列表标题表格背景、文字颜色定义(282) */
{
background:#FFE3DC;color:#ff0000;height: 24;border-top: 1px solid #ff0000;border-left: 1px solid #ff0000;border-right: 1px solid #ff0000;padding-left:20;
}
.main_tdbg_282 /* 栏目文章列表内容表格背景、文字颜色定义(282) */
{
border: 1px solid #ff0000;line-height: 150%;text-align: left;padding-left:5;padding-right:5;
}

注释：(border-top: 1px solid #ff0000;border-left: 1px solid #ff0000;border-right: 1px solid #ff0000;)上、左、右、边框的颜色和粗细；
   (background:#FFE3DC;)背景颜色；
   (border: 1px solid #ff0000;)border: 1px solid #ff0000;边框颜色为红色。
   (line-height: 150%;text-align: left;padding-left:5;padding-right:5;) 分别是行高，距离左和右的距离是5px。

事例图片4：

2):方法2；

自己定义表格边框的CSS

  代码：
<table width="180" align="center" style="BORDER-RIGHT: #ff0000 1px solid; BORDER-LEFT: #ff0000 1px solid; border-top: #ff0000 1px solid; border-bottom: #ff0000 1px solid" >
  <tr>
<td></td>
  </tr>
</table>

分别定义了表格上、下、左、右粗细为1像素，边框为红色的表格。效果同上。

这里一般只用左、右就可以了(style="BORDER-RIGHT: #ff0000 1px solid; BORDER-LEFT: #ff0000 1px solid;)，可以根据自己的需要来删除和添加。

4. 文章内容页主标题与内容文字的CSS

  文章主标题的颜色与字体大小；
  进入后台，打开网站风格管理，按ctrl+F查找 main_ArticleTitle 找到：

.main_ArticleTitle /* 主标题文字颜色定义 */
{
color: ff0000;font-weight:bold;font-size: 18;line-height: 150%;
}

这个不用注释了吧，颜色和字体大小都在这里。

文章内容文字的字体大小，行高，行距等；

<SPAN style="font-size:14.8px;line-height:24px;letter-spacing:1px">{$ArticleContent}</span>

事例图片5：

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

技巧文章：常用CSS修改实际操作技巧

相关帖子