首 页 ┆ 源码下载 ┆ IT学院 ┆ 字体下载 ┆ 模板下载 ┆ 源码发布 ┆ 广告合作 ┆ 网站地图 ┆ 虚拟主机 ┆ 中文域名
► 设为首页
► 加入收藏
► 联系我们
源码下载 >> ASP源码 | PHP源码 | ASP.net源码 | JSP源码 | CGI源码 | VC/C++源码 | VB源码 | Delphi源码 | Flash源码
文章学院 >> 网络编程 | 网页设计 | 图形图象 | 数据库 | 服务器 | 网络媒体 | 网络安全 | 操作系统 | 办公软件 | 软件开发 | 黑客知识
字体下载 >> 精制字体 | 非英字体 | 艺术字体 | 著名字体 | 哥特式 | 简单字体 | 手写体 | 节假日 | 图案字体 | 精度像素 | 中文字体
模板下载 >> 企业门户 | 数码网络 | 休闲娱乐 | 影视音乐 | 旅游名胜 | 文化艺术 | 电子商务 | 个性展示 | 登陆导航 | Flash模板
►►您当前的位置:源码园 → IT学院 → 网页设计 → Html/Css → 文章内容

ul和li标签结合CSS样式表的进行网页布局

作者:佚名  来源:网上收集  发布时间:2007-10-6 2:13:29
 

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

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

ul和li标签结合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;
}

[] [返回上一页] [打 印]
  • 上一篇文章:网页中用于构造图表的一些基本CSS代码
  • 下一篇文章:Web标准(XHTML + CSS)开发经验总结

  • 相关文章:
  • [图文]FP2003中网页布局功能的应用
  • [图文]Dreamweaver MX2004视频宝典教程(4) 网页布局...
  • DIV+CSS网页布局之边框的设置方法
  • 简单学习CSS实现网页布局的基础知识
  • [图文]详细学习CSS中的网页布局的属性
  • CSS网页布局中HTML标签的语义
  • 经验分享:CSS组合CLASS来完成网页布局风格
  • 整理:网页技术CSS网页布局的居中问题
  • 经验共享:网页技术CSS样式表网页布局经验
  • DIV CSS网页技巧:网页布局中border断线现象
  • DIV CSS网页布局技巧:background-color奇怪问题
  • 页脚始终保持在页面底部的网页布局方法
关于本站 - 网站帮助 - 广告合作 - 下载声明 - 友情连接 - 网站地图 - 源码发布
Copyright © 2003-2009 Ymyasp.Com. All Rights Reserved .
备案序号:粤ICP备07029071号