4当前位置:网页制作DreamWeaver教程-Dreamweaver的CSS布局ul和li范例
4网页制作分类
CSS | HTML
FrontPage | DreamWeaver
JavaScript | ASP
.Net | PHP
JSP | XML
数据库 | PhotoShop
FireWorks | Flash
视频 | 其它
4赞助商链接
4最新网页制作
·Dreamweaver CS5抢鲜看!
·Dreamweaver CS5启用/禁用样式表功能
·Dreamweaver的CSS布局ul和li范例
·Dreamweaver利用CSS控制页面外观
·Dreamweaver制作多彩文字链接
·Dreamweaver使用库的方法
·DW固定网页语言编码、字号及字体
·Dreamweaver制作复杂的交换图像
·玩转Dreamweaver 8之设置段落格式
·玩转Dreamweaver 8之属性检查器和文本格式设置
4热门网页制作
·菜鸟学DW MX做ASP之一(站点设置篇)
·菜鸟学DW MX做ASP之二(数据库设置)
·菜鸟学DW MX做ASP之三(数据显示篇)
·菜鸟学DW MX做ASP之五(登录系统篇)
·Dreamweaver连接数据库典型问题解决方法
·菜鸟学DW MX做ASP之四(注册系统篇)
·菜鸟学DW MX做ASP之六(忘记密码篇)
·Dreamweaver制作多彩文字链接
·Dreamweaver MX 2004设计留言本(二)
·DreamWeaver经典50问
4相关网页制作
·对Dreamweaver组织CSS的建议
·Dreamweaver利用CSS控制页面外观
·Dreamweaver嵌入式框架
·DW判断字符串是否换行
·细品DW MX 2004内建Fireworks技术
·使用Dreamweaver模板构建网站
·Dreamweaver固定单元格宽度
·Dreamweaver网页制作技巧
·Dreamweaver制作多彩文字链接
·Dreamweaver制作多彩文字链接
Dreamweaver的CSS布局ul和li范例
类别:DreamWeaver教程    来源:网络    时间:2009/9/2    贴士:推荐给好友
收藏本页 8 
  在CSS布局中,ul和li的运用是非常常见的,配合DIV与CSS,创建无表格布局。其实Dreamweaver中也有自带的CSS布局的范例,如下图:

点击图片打开新窗口浏览


  li代码的格式化: 

  1、运用CSS格式化列表符: 
ul li{ 
 list-style-type:none; 
}


  2、如果你想将列表符换成图像,则: 
ul li{ 
 list-style-type:none; 
 list-style-image:url(images/icon.gif); 
}


  3、为了左对齐,可以用如下代码:
ul{ 
 list-style-type:none; 
 margin:0px; 
}
 

  4、如果想给列表加背景色,可以用如下代码: 
ul{ 
 list-style-type: none; 
 margin:0px; 

ul li{ 
 background:#CCC; 
}


  5、如果想给列表加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;”这一行必须要加的,这样才能块状显示! 

  6、LI中的元素水平排列,关键“float:left”: 
ul{ 
 list-style-type:none; 
 width:100%; 

ul li{ 
 width:80px; 
 float:left; 
}
·上一篇:Dreamweaver利用CSS控制页面外观
·下一篇:Dreamweaver CS5启用/禁用样式表功能
本站部分内容收集整理于网络,仅用于学习,不存在商业目的,如有涉及版权等问题请联系站长,本站将在第一时间内进行处理!
Copyright © 2007-2010 Zzsky.Cn  中国站长天空  网站制作维护:可乐猫  QQ:8127544(请注明来意)
设为首页  加入收藏  联系站长  友情链接  闽ICP备12017729号