|
大部分DIV+CSS网站制作布局时经常会遇到LI点的情况，特别是对新手来说可能有点陌生，如何去掉<li></li>中的点呢，或者如何改变点成数字1234或者改成空心圆方块等呢，又如何改变点的颜色？其实很简单：直接定义LI的CSS为list-style-type :none即可去掉点，如 li{ list-style-type :none; } 如果要改变点的颜色，那么li里的字也会变颜色与大小的了，但你可以使用图片来作为前面的点，这样就可以随心所欲地装饰了。 li{ list-style: url("pre.gif") outside circle; } LI点的其他用法CSS代码： list-style-type : disc 默认值。实心圆 circle 空心圆 square 实心方块 decimal 阿拉伯数字 lower-roman 小写罗马数字 upper-roman 大写罗马数字 lower-alpha 小写英文字母 upper-alpha 大写英文字母 none 不使用项目符号 也可以在body样式里加上list-style:none;就Ok了。 值得注意的是，如果在CSS里面定义了BODY的样式，请注意在CSS里面定义。不要直接在<body>代码里加入。 如果是要去掉单个UL，LI前面的点可以直接： <ul style="list-style-type:none"> <li>...</li><li>...</li><li>...</li><li>...</li> </ul> css对li标签前面圆点和空白的显示控制方式： 去掉标签前的点：#ul{list-style:none; } 要去掉空格，则添加 #ul{margin:0; padding:0; } 在ul中加入margin:0px; 空白处没了,不过圆点也没了。其实在ul中加margin:0px; 不是圆点没了,而是看不到了，可以用空白定义来控制设置显示，看如下演示： HTML代码 <ul style="margin:0;"> <li>志文工作室</li> <li>计算机技术学习博客</li> <li>志文工作室</li> <li>计算机技术学习博客</li> <li>志文工作室</li> <li>计算机技术学习博客</li> <li>志文工作室</li> <li>计算机技术学习博客</li> </ul> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] HTML代码 <body style="margin:0;"> <ul > <li>志文工作室</li> <li>计算机技术学习博客</li> <li>志文工作室</li> <li>计算机技术学习博客</li> <li>志文工作室</li> <li>计算机技术学习博客</li> <li>志文工作室</li> <li>计算机技术学习博客</li> </ul> </body> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 使用margin控制： HTML代码 <ul style="margin-left:6px;"> <li>志文工作室</li> <li>计算机技术学习博客</li> <li>志文工作室</li> <li>计算机技术学习博客</li> <li>志文工作室</li> <li>计算机技术学习博客</li> <li>志文工作室</li> <li>计算机技术学习博客</li> </ul> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 不过值得注意的是，各浏览器对margin的解释不同，在IE下是这样的，在FF下可能完全是另一个样子。 所以如果真的需要显示这个圆点的话，可以用background来设置。 其他几点DIV+CSS设计参考建议： div最好只用在大部区块 细部的地方尽量别用div h1标题在一个页面最好只出现一次 次标题就用h2 段落标题用h3 以此类推 不是属於资料的图片尽量以背景插入的方式来呈现 如果真有心迈向标准 style="..."这个东西就尽量别用 img标签记得加上alt="" 外一篇拓展参考学习： 如何应用ul、li标签 创建css横向导航菜单？ 我们制作导航条按照传统的方法由放在一行表格单元里的图形图像构成，或者由单元格内的文字所组成，由于人们不再推荐用表格来定位任何非表格的页面内容，所以很多制作Web的人正在寻找新的方法，用结构化的XHTML标记和CSS格式来创建导航条。这样的创建方式也更对搜索引擎蜘蛛友好，这对我们来说是非常重要的。 创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里，这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以，为了避免所有的链接都挤在一起，你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔，让这些文字分离开来，不至于混在一起。但这样有意义吗？ 现在我们正常的做法是应用ul、li标签把链接作为无序列表（unordered list）来标识。再应用CSS样式对其进行控制，按我们预想的形式在容器中显示出来。对导航条使用无序列表似乎是不符合直观感受的，因为我们习惯于把无序列表作为一个竖着推起来的列表项目，每个前面都放着一个列表预设标记。这似乎不符合导航条水平方向的习惯。但作为独立列表项目集合的列表逻辑结构能够适用于导航条里的链接；而CSS的规则让你能够强制取代列表项目缺省的表现形式，以消除它们并安排列表项在容器内按水平方向排列，而不是从上而下的规则。现在让我们来看看实例，根据无序列表创建CSS样式和XHTML标签的横向导航菜单。 (责任编辑：laiquliu) |
