DreamweaverCSS网页布局ul和li范例是怎么样的-创新互联

这篇文章主要为大家展示了“Dreamweaver CSS网页布局ul和li范例是怎么样的”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Dreamweaver CSS网页布局ul和li范例是怎么样的”这篇文章吧。

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站制作、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的锡林郭勒盟网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

在CSS布局中，ul,li的运用是非常常见的。配合DIV与CSS，创建无表格布局。
其实Dreamweaver中也有自带的CSS布局的范例，如下图：

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;
}

以上是“Dreamweaver CSS网页布局ul和li范例是怎么样的”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

名称栏目：DreamweaverCSS网页布局ul和li范例是怎么样的-创新互联
转载来源：http://6mz.cn/article/cshpoc.html