| 网站首页 | 动易教程 | 动易下载 | 意见反馈 | 动易论坛 | 动易商城 | 服务项目 | 个人主页 | 书画互动首页 | 

您现在的位置: 书画互动动易专区 >> 动易教程 >> 系统美化 >> 文章正文

  没有公告

  [组图]常用CSS修改实际操作技巧        【字体:  
常用CSS修改实际操作技巧
作者:佚名    文章来源:不详    点击数:    更新时间:2006-11-5    

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:
此主题相关图片如下:
按此在新窗口浏览图片

先整理了这些,其他的没有想起来,在日后再做补充。

有不明白的在此跟贴;


hongyang

谢谢加号版主,教材简单明了,特别实用,都是大家建站中经常遇到也是问的特别多的问题,希望今后多提供这些帮助。

以下是引用mycniu在2005-10-27 13:49:06的发言:

GetSlidePicArticle的函数在调用的时候,遇见如下两个问题:

1  图片和下面的文字我觉得太紧了,如何调大 图片和文字 的间距?

2  如何定义 下面那些文字 的风格?

1.在后台风格里加上:

.pic1 /*文章栏目图片边框 */
{
border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 5px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ffffff;
border-right-color: #ffffff;
border-bottom-color: #ffffff;
border-left-color: #ffffff;
filter:progid:dximagetransform.microsoft.glow(color=#29bef5,strength=2);
}

注: border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 5px;

依次分别是图片边框距离的上、右、下、左为5px,如果不想显示某个图片边框距离则把黄色的“solid”设为“none”

filter:progid:dximagetransform.microsoft.glow(color=#29bef5,strength=2);

/*这个是定义边框的发光颜色和距离,自己根据需要测试修改或删除。*/

2. 详细:http://bbs.asp163.net/dispbbs.asp?BoardID=28&ID=174309&replyID=&skin=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: 0000ff;FONT-SIZE: 9pt;}
a.aaa:visited {color: 0000ff;FONT-SIZE: 9pt;}
a.aaa:hover{color: ff6600;FONT-SIZE: 9pt;}
a.aaa:active {color: 0000ff;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;
}

现在定义的字体为蓝色。

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

以下是引用有球必应在2005-9-22 17:04:45的发言:

虚线背景效果为什么对首页的四个默认的栏目文章列表不起作用啊?

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

文章录入:admin    责任编辑:admin 
  • 上一篇文章:

  • 下一篇文章:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    最新热点 最新推荐 相关文章
    最简单的利用CSS定义图片边框
    图片频道如何修改CSS,才能统
    数据库表字段说明对照(4个常
    CSS入门必读
    动易系统中存在但风格中未定
    星星雨V4.0 DIV+CSS全站风格
    动易2006常用动态函数标签,
    动易2006常用动态函数标签,
    节省资源,我不用checklogin
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    236147427 QQ群(书画艺术):9872875 QQ群(网站设计):11616321 bszzg@163.com
    书画互动版权所有 吉ICP备05008388号
    Copyright 2005 www.bs2005.com All Rights Reserved