• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >Dreamweaver教程 > Dreamweaver CSS网页布局ul和li范例

Dreamweaver CSS网页布局ul和li范例

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含Dreamweaver,CSS,网页布局等相关知识,佚名 希望在学习及工作中可以帮助到您

在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工作区布局有哪些工具?
  • dreamweaver状态栏的工具该怎么使用?
  • dreamweaver怎么批量替换超链接?
  • Dreamweaver预览提示浏览器指定位置已不存怎么办?
  • Dreamweaver网页中怎么制作锚点链接?
  • Dreamweaver怎么给网页添加下拉的条幅?
  • dreamweaver命名锚记怎么使用?
  • dreamweaver cs5不写写代码怎么添加meta标签?
  • Dreamweaver怎么怎么利用层布局网页?
  • Dreamweaver站点怎么检查链接错误?

相关文章

  • 2017-08-06Dreamweaver 批处理去除a中间不需要的部分
  • 2017-08-06Dreamweaver 禁止自动换行的设置方法
  • 2017-08-06Dreamweaver怎么绘制视化表格?
  • 2017-08-06dreamweaver怎么设置段落首行自动缩进两个字符?
  • 2017-08-06dreamweaver8调出新建、打开两个命令的快捷工具栏
  • 2017-08-06Dreamweaver、Notepad++ 代码配色(提高自身代码阅读能力)
  • 2017-08-06通过Dreamweaver学习了解CSS
  • 2017-08-06DreamWeaver cs5软件安装破解详细教程附软件下载
  • 2017-08-06Dreamweaver CS3网页制作之布局实例
  • 2017-08-06dreamweaver站点导入和导出操作步骤

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • DW CS6怎么新建站点并管理站点?
    • Dreamweaver预览提示浏览器指定位置已不存怎么办?
    • Dreamweaver8制作网页滚动文字效果的实例教程
    • dreamweaver如何改变代码的字体大小?
    • Dreamweaver中Spry区域功能说明
    • Dreamweaver怎么添加文本?怎么设置文本?
    • 用Dreamweaver制作WordPress的留言本III
    • 在Dreamweaver中实现网页状态栏中活动文字效果的方法
    • Dreamweaver 制作基于WordPress的留言本II
    • Dreamweaver中的表格怎么排版?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有