中华网通行证
用户名 密码
  科技动态 硬件广场 下载基地 网络教室 网络冲浪 科学博览 移动时代 手机上网 桌面壁纸 科技商情  

 定义自己的项目图片符号
 冯永曜  黄山村夫

  CSS提供的项目符号样式似乎少了点,我也有同感。能不能再增加呢?回答是肯定的,我们不仅可以利用Dreamweaver3的CSS定义功能去重新定义“项目符号和编号”,而且可以定义自己的“项目图片符号”。请看下面的例子:


  上面这个例子中行首那个“箭头”图片可不是在每行插入图片做出来的,而是重新定义“项目图片符号”的结果,利用下面的方法可以把“项目符号”中图标换成各种各样的图片符号,在Dreamweaver3中操作也不难。
  操作方法:
  1、准备一张小图片,最好是背景透明的gif图片,效果会更好一些;
  2、按F7(或点击快速启动栏里那个象“八卦图”似的图标),调出CSS面板,选择“none”,再点击面板下部的编辑图标,在弹出的“Edit Style Sheet”对话框上按“New”按钮,在弹出的“New Style”对话框中选择“Redifine HTML TAG(重定义HTML标记)”后,在下面的“Tag”选择框中选择“ul”,按OK,立即弹出“Style Definition for ul”对话框,如下图所示:


  在“Style Definition for ul”对话框左边的选择窗口中选择“list”,在右边的面板上我们只要定义“bullet”就行了,实际上就是在输入框中输入图标的文件名(含相对路径),若不太记得清楚文件名,可按右面的“Browse...”打开文件夹选择。“Bullet”属性只有两个值:〈url〉:图片符号地址,也就是输入或选择带相对路径的图片文件名;“none”:没有自定义的图片符号。本例定义好“Bullet”后的对话框如上图所示,按OK按钮返回;
  3、在“Edit Style Sheet”对话框上按“Done”按钮结束。在网页源代码的〈head〉与〈/head〉之间见到的CSS代码是这样的:
〈style type="text/css"〉
〈!--
ul { list-style: url(image/dot.gif)}
--〉
〈/style〉
  对于不是使用Dreamweaver3的网友,直接把上述代码复制在〈head〉与〈/head〉之间,把蓝色部分换成你的图片文件名,产生的效果相同。
  4、这样当我们在设计网页时,在属性面板上点击项目编号图标,就能获得自己的项目图片符号了,但在编辑时看到的还是默认的项目图片符号,只有在浏览时才显示其本来面目。这里要注意的是:一旦定义了“Bullet”属性且有效(即图片文件存在),则“Type”属性将不起作用,这就是为什么在上篇文章中我们在定义“Type”属性时要求不能定义“Bullet”属性的原因。
  若是要使按下图标后也能达到上面的效果,只要在第一步中选择“Tag”标记时不要选“ul”而改为选“ol”,其它操作完全相同。得到的CSS代码是这样的:
〈style type="text/css"〉
〈!--
ol { list-style: url(image/dot.gif)}
--〉
〈/style〉
  从这里可以看,这两个图标所起的作用基本相同,只是标记不同而已。
  从上面的“Style Definition for ul”对话框中还有一个属性:“position”,它只有两个值,“inside”和“outside”,它们的作用是决定列项中的第二行文字的起始位置。其中“outside”是默认值,其效果就是本文例子中的效果;“position”属性选择“inside”时的效果如下所示:


  从上面的例子中可以看出,选择“inside”时,列项的第二行(及以后所有行)的左边距与列项第一行的项目符号对齐;选择“outside”时列项的第二行(及以后所有行)的左边距与列项第一行除了项目符号外的第一个字符对齐。


 赛迪网 


 

 
更多本栏目内容
Windows 2000系统安全设置攻略
Dreamweaver编写CSS需要掌握的技巧
使用Flash MX过程中的3个小技巧
短暂离开也不怕 轻松锁定保护用户隐私
再次提速 Firefox和IE提速必备技巧
给瑞星添加移动存储自动杀毒功能
Photoshop设计逼真中国传统水墨画效果
用云端剿灭不听话的进程与服务
三招轻松恢复被修改的浏览器主页
轻型设计省资源 微软免费杀软MSE试用

本站检索



中华网推荐

·国家级治脑病新药思维源
·中藏药治疗脑病新突破
·治类风湿,强直性脊柱炎
·养肾·痛风·长寿
·肝病泌尿脑萎缩新药介绍
·强直性脊柱炎康复乐园
·让中医辩证不孕不育
·国医治股骨头坏死一绝
·乙肝为何久治不愈?
·二千元垄断批发做老板
·中医中药专治前列腺
·治牛皮癣白癜风已成现实
·专治痛风病的白衣天使
·不孕不育的杏林奇葩
·专卖店零售管理系统





   

网络教室编辑信箱
<script type="text/javascript"> ac_as_id = 2384;ac_click_track_url = "";ac_format = 0;ac_mode = 1;ac_width = 280;ac_height = 210;</script><script type="text/javascript" src="http://static.acs86.com/g.js"></script>