亲品藏
^
dreamweaver cs6项目列表符号样式_dreamweaver cs6如何设置ul/li项目列表符号

  dreamweaver cs6中ul和li是有序和无序项目列表,它们也有自己的样式,在不同的情况下配合不同的符号样式会使设计出的网页更加的美观漂亮,在默认的情况下,项目列表前的符号是实心小圆点,这样很不美观,我们可以设置将其格式化或者换成其他样式,下面为大家提供了具体的代码和操作方法。

  dreamweaver cs6设置ul/li项目列表符号代码:

  LI代码的格式化:

  A).运用CSS格式化列表符:

  ul li{

  list-style-type:none;

  }

  例如下面的:

  供求信息

  B).如果你想将列表符换成图像,则:

  ul li{

  list-style-type:none;

  list-style-image: url(images/icon.jpg);

  }

  例如下面的:

  供求信息

  C).为了左对齐,可以用如下代码:

  ul{

  list-style-type:none;

  margin:0px;

  }

  例如下面的:

  供求信息

  D).如果想给列表加背景色,可以用如下代码:

  ul{

  list-style-type: none;

  margin:0px;

  }

  ul li{

  background:#CCC;

  }

  例如下面的:

  供求信息

  E).如果想给列表加MOUSEOVER背景变色效果,可以用如下代码:

  ul{ list-style-type: none; margin:0px; }

  ul li a{ display:block; width: 100%; background:#ccc; }

  ul li a:hover{ background:#999; }

  说明:display:block;这一行必须要加的,这样才能块状显示!

  例如下面的:

  供求信息

  F).LI中的元素水平排列,关键FLOAT:LEFT:

  ul{

  list-style-type:none;

  width:100%;

  }

  ul li{

  width:80px;

  float:left;

  }

  dreamweaver cs6设置ul/li项目列表符号步骤

  首先我们打开Dreamweaver CS6软件。

dreamweaver cs6项目列表符号样式_dreamweaver cs6如何设置ul/li项目列表符号

  然后新建一个html文档,添加项目列表代码,并保存到合适的位置。

dreamweaver cs6项目列表符号样式_dreamweaver cs6如何设置ul/li项目列表符号

  在浏览器中预览会看到默认有黑色的圆点。

dreamweaver cs6项目列表符号样式_dreamweaver cs6如何设置ul/li项目列表符号

  去掉这些圆点其实很简单,只要把li标签的list-style-type:none;设置成这样就可以了。

dreamweaver cs6项目列表符号样式_dreamweaver cs6如何设置ul/li项目列表符号

dreamweaver cs6项目列表符号样式_dreamweaver cs6如何设置ul/li项目列表符号

  可以写成行内样式,但是比较繁琐,我们可以单独写在li的样式中。

dreamweaver cs6项目列表符号样式_dreamweaver cs6如何设置ul/li项目列表符号

  预览一下效果发现圆点都没有了。

dreamweaver cs6项目列表符号样式_dreamweaver cs6如何设置ul/li项目列表符号

  总结:以上就是全部的内容,有了代码和具体的操作步骤大家害怕弄不了ul/li项目列表符号?想要将符号设置成怎样就设置成怎样的。

相关阅读

CopyRight 亲品藏移动版(m.qinpinchang.com)