DIV+CSS网页调用的文章列表前面的小点
调用的文章列表前面都有一个小点,这是在修改标签时 里面含有div等标记符,去掉他们的方法就是用css控制 去除标记符 带的点
具体方法：
在css中加入list-style:none;
这就是为了去掉UL前的那个黑点，并且清除浏览器中UL的默认值。
你也可以在CSS文件的开头用一句
*{padding:0; margin:0; list-style:none;}
来清理一下标签在浏览器中的默认值。
精神共享~ 组合使用选择器创造精致的设计效果 用漂亮的图案代替普通无序列表前沉闷的黑点。站点http://marine.happycog.com/ 先用css规则告诉类别属性inventory的无序列表。 ul.inventory{ list-style:disc url(/images/common/lister2.gig) inside;} 它的调用标记: <ul class="inventory"> <li><a href="/angelfish">Angelfish</a>(67 items)</li> <li><a href="/angeld">Angels/Frogfish</a>(35 items)</li> <li><a href="/anthias">Angelfish</a>(5526 items)</li> <li><a href="/basslets">Angelfish</a>(15 items)</li> <ul> (9)缩写是按照顺时针的顺序 margin:25px 0 25px 0; (10)行高 line-height:150% 说明行距为正常的150% 10)结构化代码div(division)、id、class 用它们来书写紧凑的xhtml，更明智的使用css. (1)结构化id标签，与class的有区别：如果你的属性页面包含了一个div，它的id为"content",它就不可能有另外一个div或者其他元素拥有相同的名字。相反，class属性可以在意个页面中一次又一次地使用。 (2)id的规则 一个id值必须用一个字母或者下划线开头，它不能用一个数字进行开头，然后跟随字母、数字和下划线。空格和连字符-都是不允许的。 11）制作好的网站可以到w3c进行标准校正 http:validator.w3.org http://jigsaw.w3.org/css-validator/ 本帖最后由 华夏久久 于 2010-2-12 01:00 编辑
今天介绍如何用ul和li制作横向菜单。ul是html中的无序列表，li是列表中的列表项。如果没有CSS定义它的外观，它默认是显示成一列列表，并且它会存在项目符号（比如方块或实心的黑点）的列表内容。
CSS网页布局中，除了新闻列表、链接运行ul、li制作以外，我们通常将菜单也用ul、li来实现。我们下面用CSS来改变它的外观，使它能横向在一行中显示，并且将项目符号去掉。
我们看下面的XHTML代码：
Example Source Code
<ul id="nav">
<li><a href="http://www.99seo.cn/">Div+CSS教程</a></li>
<li><a href="http://www.99seo.cn/">CSS布局实例</a></li>
<li><a href="http://www.99seo.cn/">CSS2.0教程</a></li>
<li><a href="http://www.99seo.cn/">CSS酷站欣赏</a></li>
<li><a href="http://www.99seo.cn/">CSS模板下载</a></li>
</ul>
我们建立了一个id为nav的无序列表，包含了五个列表项li，这就是我们的菜单了。我们通过下面的css代码，对它进行重新定义：
Example Source Code
#nav li {
display: inline;
list-style-type: none;
padding: 5px 10px;
}
对id为nav的无序列表中的列表项li，我们进行CSS定义。每句代码的意义解释如下：
display: inline; 内联（行内）。将li限制在一行来显示。
list-style-type: none; 列表项预设标记为无。这就去掉了“方块或实心的黑点”
padding: 5px 10px; 设置li的填充，距离上下均为5px，距离左右均为10px.
这样定义以后，我们的列表就有一个菜单的雏形了，它看上去不是很美观，我们在以后的教程中，再对它进行更加深入的修饰。
最终的运行效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.52css.com</title>
<style type="text/css">
#nav li {
display: inline;
list-style-type: none;
padding: 5px 10px;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="http://www.99seo.cn/">Div+CSS教程</a></li>
<li><a href="http://www.99seo.cn/">CSS布局实例</a></li>
<li><a href="http://www.99seo.cn/">CSS2.0教程</a></li>
<li><a href="http://www.99seo.cn/">CSS酷站欣赏</a></li>
<li><a href="http://www.99seo.cn/">CSS模板下载</a></li>
</ul>
</body>
</html>
页:
[1]