我们共同的家 div制作新闻列表|css+div列表

罗艾淋 - 2008-3-30 18:55:39

不知道大家在用div+css做新闻列表的时候有没有我出现的问题.就是标题左对齐.可时间怎么样也不能右对齐.

这里是解决的方法,纯css制作新闻列表

<!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新闻列表制作</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>

罗艾淋 - 2008-3-31 21:33:27

[size=3]<style>
div.bg{background:#ffc20e;width:50%}
b{display:block;}
/*将所有B标签转成块级元素*/[/size]
[size=3]div b.topb b,div b.bottomb b{height:1px;overflow:hidden;background:#ffc20e;}
/*div标签内类名为topb/bottomb的那个b标签的css属性值--高为1px，溢出部份隐藏,背景色同div.bg的背景色*/[/size]
[size=3]div b.topb,div b.bottomb{background:white}
/*div标签内类名为topb/bottomb的背景色要与body背景色一致*/[/size]
[size=3]b.t1{margin:0 5px}
/*标签margin值将决定溢出的多少值被隐藏*/
b.t2{margin:0 3px}
b.t3{margin:0 2px}
b.t4{margin:0 1px;height:2px;}[/size]
[size=3]</style>[/size]
[size=3]<div align="center">
<div class="bg">[/size]
[size=3]<b class="topb">
<b class="t1"></b>
<b class="t2"></b>
<b class="t3"></b>
<b class="t4"></b>[/size]
[size=3]</b>
<br>
年度总结：涉世未深，好吃懒做，眼高手低，胆小心粗，<br>爱慕虚荣，贪图富贵，眷恋美色，才疏学浅。
<br>
<br>[/size]
[size=3]<b class="bottomb">
<b class="t4"></b>
<b class="t3"></b>
<b class="t2"></b>
<b class="t1"></b>
</b>[/size]
[size=3]</div>
</div>[/size]
[size=3]============================================[/size]
[size=3]2.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[/size][url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd][size=3][color=#0000ff]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/color][/size][/url][size=3]">
<html xmlns="[/size][url=http://www.w3.org/1999/xhtml][size=3][color=#0000ff]http://www.w3.org/1999/xhtml[/color][/size][/url][size=3]">
<head>
<title>runcode</title>
<meta http-equiv="Content-Type" c />
<meta name="Author" c />
<script type="text/javascript">
</script>
<style type="text/css">[/size]
[size=3].xsnazzy h3{margin:0; padding:0 10px 5px 10px; border-bottom:1px solid #444;}
.xsnazzy h3, .xsnazzy h3 a{font-size:1em;}
.xsnazzy {background: transparent; width:530px; margin:10px 3px 0;}[/size]
[size=3].xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#fff; border-left:1px solid #444; border-right:1px solid #444;}
.xb1 {margin:0 5px; background:#444;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}[/size]
[size=3].xboxcontent {display:block; border:0 solid #444; border-width:0 1px; height:auto;}
* html .xboxcontent {height:1px;}
.color_a {background:#E2F3B8; color:#000;}
</style>
</head>
<body>
<div class="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a"></b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class='xboxcontent'>
<h3 class="color_a">这里是标题</h3>
<p>这里是内容</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
</body>
</html>[/size]

河南新华电脑学院