⊕ 网站首页  ⊕注册会员  ⊕ 本站免费电影 ⊕ 留言板  ⊕ 繁體中文

 　

您现在的位置： 陈鹏个人网站 >> 电脑应用 >> 网络应用 >> 网页制作 >> 正文
　

|
电脑应用首页
|
硬件天堂
|
产品导购
|
软件学苑
|
网络应用
|
IT新闻
|
应用技巧
|
电脑维修
|
视频教程
|
 　 　
专 题 栏 目
 没有任何专题栏目
 [图文]谁是最佳性价比?一
 [图文]DX11主流显卡驾到
 [图文]佳能450D与尼康D6
 [图文]新版iPod全程拆解
 [组图]不看不知道 图解电
 [组图]菜鸟晋级必修课程
 [推荐]Linux常用命令
 [推荐]1秒钟 XP极速关机
 [推荐]如何使用瑞星升级
 [推荐]如何在本站发布文
相 关 文 章

图解Firefox 3.1版的私密
FireFox 3.0的新书签程序
PPS网络电视（PPStream）
Mozilla FireFox 3.5.1中
Mozilla FireFox V3.5 正
DirectShow漏洞来了 Z武
百无一用的一些雷人Fire
eMule Xtreme V7.2 fina
Webware100 傲游浏览器再
系统优化和隐私保护工具
　
Dreamweaver的CSS布局ul和li范例           
Dreamweaver的CSS布局ul和li范例
作者：陈鹏 文章来源：eNet 点击数：117 更新时间：2009-9-12 2:52:48
　




　

在CSS布局中，ul,li的运用是非常常见的。配合DIV与CSS，创建无表格布局。

其实Dreamweaver中也有自带的CSS布局的范例，如下图：

Dreamweaver


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

文章录入：陈鹏    责任编辑：陈鹏 
  • 上一篇文章：

  • 下一篇文章：
    • 【字体：小 大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】
    　
    		　
    　
    　
    　

    Copyright © 2007 - 2009 chenpeng123.com All Rights Reserved
    本站所有文章,软件等均来自网络收集,不代表本站观点，仅供学习和研究使用。如有侵犯您的版权，请联系我们，本站将立即删除。
    鲁ICP备07014697号
    你是本站第 位访客
    51La