复制代码代码如下:
<div id="menu"> 
<ul> 
<li><a href="#">首页</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">博客</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">设计</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">相册</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">论坛</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">关于</a></li> 
</ul> 
</div> 
 
CSS: 
 
复制代码代码如下:
#menu ul {list-style:none;margin:0px;} 
#menu ul li {float:left;} 
 
 
解释一下: 
 
#menu ul {list-style:none;margin:0px;} 
list-style:none,这一句是取消列表前点,因为我们不需要这些点。 
margin:0px,这一句是删除UL的缩进,这样做可以使所有的列表内容都不缩进。 
 
#menu ul li {float:left;} 
这里的 float:left 的左右是让内容都在同一行显示,因此使用了浮动属性(float)。 
 
CSS中的ul与li样式详解
 
ul和li列表是使用CSS布局页面时常用的元素。在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性、list-style-image属性、list-style-position属性和list-style属性。 
  一、list-style-type属性
 
  list-style-type属性是用来定义li列表的项目符号的,即列表前面的修饰。list-style-type属性是一个可继承的属性。其语法结构如下:(列举一些常用的属性值)
 
  list-style-type:none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman
 
  list-style-type属性的属性值有很多,在这里我们只是列举了比较常用的几个。
 
none:不使用项目符号。 disc:实心圆。 circle:空心圆。 square:实心方块。 demical:阿拉伯数字。 lower-alpha:小写英文字母。 upper-alpha:大写英文字母。 lower-roman:小写罗马数字。 upper-roman:大写罗马数字。 
  使用list-style-type属性的示例代码如下:
 
li{
list-style-type:square;}
 
<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
 
  该样式应用到页面的效果如下图所示。
 
 
 
  二、list-style-image属性
 
  list-style-image属性用来定义使用图片代替项目符号。它也是一个可继承属性,其语法结构如下:
 
  list-style-image:none/url
 
  list-style-image属性可以取两个值:
 
none:没有替换的图片。 url:要替换图片的路径。 
  来看一段代码:
 
li{
list-style-image:url(images/bg03.gif);}
 
<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
 
  效果如下图。
 
 
 
  三、list-style-position属性
 
  list-style-position属性,是用来定义项目符号在列表中显示位置的属性。它同样是一个可继承的属性,语法结构如下:
 
  list-style-position:inside/outside
 
inside:项目符号放置在文本以内。 outside:项目符号放置在文本以外。 
  使用list-style-position属性的示例如下:
 
li{
list-style-type:square;
list-style-position:outside;}
 
<ul>
<li>这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
 
  效果如下图所示。
 
 
 
  再来看一下属性值为inside的样式。
 
li{
list-style-type:square;
list-style-position:inside;}
 
<ul>
<li>这里是使用list-style-position属性值为inside的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
 
 
 
  四、list-style属性
 
  list-style属性是综合设置li样式的属性,也是一个可以继承的属性,语法结构如下:
 
  li-style:list-style-type/list-style-image/list-style-position
 
  各个值的位置可以交换。比如:
 
li{
list-style:url(images/bg03.gif) inside;}
 
<ul>
<li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
</ul>
 
  可以看一下应用到页面的效果。
 
 
-
 
详细出处参考:http://www.jb51.net/css/44250.html

li ul 说明的更多相关文章

  1. css中的 nav ul li ul 与 nav>ul>li 这两种写法的区别

    <nav> <ul id="a"> <li>a1</li> <li>a2</li> <li>a3 ...

  2. Html 列表 li ul使用

    html中偶尔会使用到列表,记录一下. <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  3. DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码

    (含上下左右滚动代码) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  4. 请把<ul><li>第1行</li><li>第2行</li>...</ul>(ul之间有10个li元素)插入body里面,注意:需要考虑到性能问题。

    var html = [],i;for(i = 0; i < 10; i++){ html.push('<ul><li>第' + (i+1) + '行</li> ...

  5. ol,li,ul,dl,dt,dd

    块级元素div尽量少用,其实和table一样,嵌套越少越好,它也是会影响速度的! ol 有序列表. <ol> <li>……</li> <li>……< ...

  6. 多个ul中第一个li获取定位

    如果我们只是获取一个ul中的第一个li的话,那么我们可以这样写: $("ul li:first"); $("ul li").eq(0); $("ul ...

  7. ul li设置横排,并除去li前的圆点

    效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...

  8. 使用CSS把ul,li制作成表格

    查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...

  9. 选中多个<ul>中的第一个<li>方法

    获取第一个ul中的第一个li标签的方法: //获取第一个ul中的第一个li /* $("ul li:first").css("background"," ...

随机推荐

  1. spring源码学习之路---深度分析IOC容器初始化过程(四)

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 最近由于工作和生活,学习耽搁 ...

  2. text-indent:-9999px 字体隐藏问题

    为什么要字体隐藏? 通常为了传达更好的视觉效果,我们常用图片替代掉字体.但是为了html语义化,常常要给内容模块加上一些标题来让页面更有意义,在抛开css裸奔的情况下也能很顺利的汲取到页面信息.为此我 ...

  3. [CareerCup] 18.11 Maximum Subsquare 最大子方形

    18.11 Imagine you have a square matrix, where each cell (pixel) is either black or white. Design an ...

  4. python 获得当前路径

    先要装载 os模块: import os print os.getcwd() 或者 print os.path.abspath(os.curdir) print os.path.abspath('.' ...

  5. Js文字特效—文字段逐个变色循环

    自己用来练习的,附上详细注释,如果有和我一样喜欢并想要学习Dom特效创作的朋友,推荐先系统了解Javascript中Html Dom Object部分的内容,包括常用方法及属性. <!DOCTY ...

  6. html5学习小结,float练习。

    经过两天的H5学习之后,做了一下float属性的练习,要做出来的效果为: 下面为代码部分,所用到的知识不多,不过才现在刚开始,以后要学的东西还有很多,大家继续加油! <!DOCTYPE html ...

  7. Sql Server按树形结构排序查询表记录

    http://blog.csdn.net/dxnn520/article/details/8089149 ----------------------------------------------- ...

  8. 使用plupload做一个类似qq邮箱附件上传的效果

    公司项目中使用的框架是springmvc+hibernate+spring,目前需要做一个类似qq邮箱附件上传的功能,暂时只是上传小类型的附件 处理过程和解决方案都需要添加附件,处理过程和解决方案都可 ...

  9. # 20145334赵文豪 《Java程序设计》第6周学习总结

    20145334赵文豪 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 输入/输出 数据流 I/O操作主要是指使用Java进行输入,输出操作. Java所有的I/O机制都是基 ...

  10. 响应式网站通用css

    /* core.css v1.1 | MIT License | corecss.io */ html { font-family: sans-serif; font-size: 100%; line ...