天府星空网络科技成都网站制作公司，专业从事成都网站建设、成都网页制作、成都网站设计以精深技术为核心、以专业队伍为支撑。致力于为成都政府网站建设、成都公司网站建设、成都学校网站建设等提供高技术含量的成都网站设计服务。凭借多年的成都网页设计成功经验，公司已拥有数百例经典网站案例，是一家正规经营，诚实守信的专业成都网站建设公司
您当前的位置：天府星空网络科技有限公司! → 网站知识 → 网站建设知识 → 成都网页制作 → 知识内容

纯CSS制作的新闻网站中的文章列表

作者：佚名  来源：本站整理  发布时间：2008-1-23 9:38:53

应用CSS制作的新闻网站中的文章列表：ul是html中的无序列表，li是列表中的列表项。如果没有CSS定义它的外观，它默认是显示成一列列表，并且它会存在项目符号(比如方块或实心的黑点)的列表内容。CSS网页布局中，除了新闻列表、链接运行ul、li制作以外，我们通常将菜单也用ul、li来实现。 以下是引用片段：
<!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>CSS新闻列表制作webjx.com</title>
<style type="text/css">
.list{
margin: 0px 10px 20px;
text-align: left;
}
.list ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.list li{
width: 100%;
}
.list li a{
color: #777777;
display: block;
padding: 6px 0px 4px 15px;
}
.list li span{
float: right;/*使span元素浮动到右面*/
text-align: right;/*日期右对齐*/
}
.list li a:hover{
color: #336699;
}
</style>
</head>
<body>
<ul class=list>
<li><span>2007年12月21日</span><a href="#">新闻标题01</a></li>
<li><span>2007年12月21日</span><a href="#">新闻标题02</a></li>
<li><span>2007年12月21日</span><a href="#">新闻标题03</a></li>
<li><span>2007年12月21日</span><a href="#">新闻标题04</a></li>
</ul>
注意:span一定要放在前面,反之会产生换行
</body>
</html>

【公司简介】：
   天府星空网络科技成都网站制作公司，专业从事成都网站建设 成都网页制作 成都网站设计以精深技术为核心、以专业队伍为支撑。致力于为成都政府网站建设、成都公司网站建设、成都学校网站建设等提供高技术含量的成都网页设计服务。
   公司始终以不懈的努力、更高的目标来要求自己。凭借多年的成都网页设计成功经验，公司已拥有数百例经典网站成功案例，是正规的成都网站建设公司。
   成都网站建设的专业服务商，强大的成都网页制作技术团队，在网站设计等方面始终保持领先地位，并获得了网页制作公司业界的广泛赞誉和认同。公司重视网页制作质量，打造成都地区网站制作公司知名品牌，以优秀的网站设计技术，创一流的成都网站建设作品。建网站就找天府星空，助您马到成功！