DIV+CSS网页调用的文章列表前面的小点

华夏久久 · 发表于 2010-2-11 20:43:27

调用的文章列表前面都有一个小点,这是在修改标签时里面含有div等标记符,去掉他们的方法就是
用css控制去除标记符带的点
具体方法：
在css中加入list-style:none;
这就是为了去掉UL前的那个黑点，并且清除浏览器中UL的默认值。
你也可以在CSS文件的开头用一句
*{padding:0; margin:0; list-style:none;}
来清理一下标签在浏览器中的默认值。

精神共享~

华夏久久 · 发表于 2010-2-12 00:31:24

组合使用选择器创造精致的设计效果用漂亮的图案代替普通无序列表前沉闷的黑点。站点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 00:57:55

本帖最后由华夏久久于 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>

复制代码

		自动登录	找回密码
密码			立即注册