关于li和hr代码的风格定义简要定义说明

作者:动易网络 来源:本站原创 点击数: 发布时间:2006年11月22日

  最近有网友询问,如何在首页把最新留言标题前的的小圆点换成其他式样。其实这里的小圆点是用了“li”这一个列表项目HTML代码,这个代码可以在后台风格管理中定义成其它各种样式,如实心圆、阿拉伯数字、图像等。如果您要更改默认的小圆点效果,请进入系统后台,在[系统设置]-[网站风格管理]中,添加以下风格定义:
li
{
list-style-image: url(Skin/blue/j32.gif);
}
  li的这个定义是将列表项目使用图片来显示的小圆点。当然您也可以显示成其它效果,详细请参阅下面的定义:

/* 列表项目效果的CSS定义
*list-style-type: circle; 列表项目样式
disc :  CSS1 实心圆
circle :  CSS1 空心圆
square :  CSS1 实心方块
decimal :  CSS1 阿拉伯数字
lower-roman :  CSS1 小写罗马数字
upper-roman :  CSS1 大写罗马数字
lower-alpha :  CSS1 小写英文字母
upper-alpha :  CSS1 大写英文字母
none :  CSS1 不使用项目符号
armenian :  CSS2 传统的亚美尼亚数字
cjk-ideographic :  CSS2 浅白的表意数字
georgian :  CSS2 传统的乔治数字
lower-greek :  CSS2 基本的希腊小写字母
hebrew :  CSS2 传统的希伯莱数字
hiragana :  CSS2 日文平假名字符
hiragana-iroha :  CSS2 日文平假名序
katakana :  CSS2 日文片假名字符
katakana-iroha :  CSS2 日文片假名序号
lower-latin :  CSS2 小写拉丁字母
upper-latin :  CSS2 大写拉丁字母
*list-style-image: url(Skin/sg_blue/li1.gif); 用图像代替列表项目
*list-style-position : outside | inside
outside :  列表项目标记放置在文本以外,且环绕文本不根据标记对齐
inside :  列表项目标记放置在文本以内,且环绕文本根据标记对齐
*/
li
{
list-style-image: url(Skin/blue/j32.gif);
}

  在HTML代码中,还有一些特殊的如水平条hr,也可以在风格管理中加上定义,以更改其默认的显示效果:

/* 水平条效果的CSS定义
BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted;height:1;width:100%;align:left;color:#86BCD4;Shade:no; 水平条虚线效果定义一
border:1px dashed #86BCD4; height: 1; 水平条虚线效果定义二
align: center;width: 100%;height: 1;color: #86BCD4;Shade:no;SIZE=1; 水平条实线无阴影效果定义
*/
hr
{
border:1px dashed #86BCD4; height:1;
}

/* 栏目导航发光阴影效果的CSS定义,调用代码为*** */
.Glow
{
FILTER: Glow(Color=0733B2, Strength=1) dropshadow(Color=0733B2, OffX=1, OffY=1,); WIDTH: 100%; COLOR: #ffffff; LINE-HEIGHT: 20px
}

  说 明:在《动易网站管理系统》中,CSS样式风格定义是可以自己自由定义的,也说是说您可以自由添加N多个自定义的风格,然后在各频道的版式模板中调用就行了。下面提供的是系统默认提供的CSS样式风格定义,里面有详细的定义注释,注释标记为:/* ...... */。
  友情提醒:修改风格设置必须具备一定网页css样式设计知识,建议您找些这方面的书看一下,在定义中也不能使用单引号或双引号,否则会容易造成程序错误。