Dreamweaver的CSS布局ul和li范例

 时间:2026-02-15 15:46:01

1、 LI代码的格式化:

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

  以下为引用的内容:

  ul li{


  list-style-type:none;
  }
  例如下面的:

  供求信息

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

  以下为引用的内容:

  ul li{


  list-style-type:none;
  list-style-image: url(images/icon.gif);
  }
  例如下面的:
  供求信息

  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;
  }
  • 手工折纸——旺旺
  • 文档属性在Flash中如何设置
  • Dreamweaver CS3使用资源面板创建模板
  • 恶魔猎手详解攻略
  • 怎么免费开通哔哩哔哩B站大会员
  • 热门搜索
    什么是生化汤 灵芝胶囊的功效与作用 来月经前有什么症状 初一数学知识点 女生什么发型好看 高丽参的作用 多巴胺的功效与作用 运动会项目有哪些 幼儿园安全知识教育 微波炉能做什么