网页布局面试题(一)
需求说明：如上图所示，请用css来实现上图的布局样式。
要求：
１．时间日期紧跟标题其后，距离标题10px。当标题过长时，隐藏标题，但是时间必须显示完整。（注：单行距离自己定）
２．合理的结构方便程序输出
３．兼容以下一些平台：ie6、ie7、Firefox2.x ，Opera版本系列。
代码:
<!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=utf-8" />
<title>list(wwww.hemin.cn)</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px; font-family:"新宋体";}
ol{ background:url(http://www.hemin.cn/blog/wp-content/uploads/2009/06/list.jpg) no-repeat left -2px;}
li{position:relative; padding-left:20px; height:20px; overflow:hidden; line-height:20px; width:250px; list-style:none;padding-right:60px;}
li em{ position:absolute; top:3px; left:4px; line-height:11px; text-align:center; background:url(http://www.hemin.cn/demo/xunleiMS09-6-21/q.gif) no-repeat left top; width:12px; height:11px; color:#FFF; font-style:normal;}
li a{ display:inline-block; text-decoration:none; color:#000;}
li a:hover{ text-decoration:underline;}
li span{ position:absolute; padding-left:5px; color:#CCC;}
</style>
</head>
<body>
<ol>
<li><a href="#">杂技团美女演员的训练</a><span>2009-6-21</span></li>
<li><a href="#">杂技团美女演员的1训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练</a><span>2009-6-21</span></li>
<li><a href="#">杂技团美女演员的训1练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练</a><span>2009-6-21</span></li>
<li><a href="#">杂技团美女演员2的训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练</a><span>2009-6-21</span></li>
<li><a href="#">练演员的训练</a><span>2009-6-21</span></li>
<li><a href="#">练演员的训演员的训练</a><span>2009-6-21</span></li>
<li><a href="#">练演员的训练演员的训练练</a><span>2009-6-21</span></li>
<li><a href="#">练演员的练</a><span>2009-6-21</span></li>
<li><a href="#">练演员的训练</a><span>2009-6-21</span></li>
</ol>
</body>
</html>
引用自：http://topic.csdn.net/u/20091009/11/179bf6c0-437d-4875-b03b-d11211e69779.html?seed=251492551&r=60302840#r_60302840
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>list(wwww.hemin.cn)</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px; font-family:"新宋体";}
ol{ background:url(http://www.hemin.cn/blog/wp-content/uploads/2009/06/list.jpg) no-repeat left -2px;}
li{position:relative; padding-left:20px; height:20px; overflow:hidden; line-height:20px; width:250px; list-style:none;padding-right:60px;}
li em{ position:absolute; top:3px; left:4px; line-height:11px; text-align:center; background:url(http://www.hemin.cn/demo/xunleiMS09-6-21/q.gif) no-repeat left top; width:12px; height:11px; color:#FFF; font-style:normal;}
li a{ display:inline-block; text-decoration:none; color:#000;}
li a:hover{ text-decoration:underline;}
li span{ position:absolute; padding-left:5px; color:#CCC;}
</style>
</head>
<body>
<ol>
<li><a href="#">杂技团美女演员的训练</a><span>2009-6-21</span></li>
<li><a href="#">杂技团美女演员的1训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练</a><span>2009-6-21</span></li>
<li><a href="#">杂技团美女演员的训1练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练</a><span>2009-6-21</span></li>
<li><a href="#">杂技团美女演员2的训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练</a><span>2009-6-21</span></li>
<li><a href="#">练演员的训练</a><span>2009-6-21</span></li>
<li><a href="#">练演员的训演员的训练</a><span>2009-6-21</span></li>
<li><a href="#">练演员的训练演员的训练练</a><span>2009-6-21</span></li>
<li><a href="#">练演员的练</a><span>2009-6-21</span></li>
<li><a href="#">练演员的训练</a><span>2009-6-21</span></li>
</ol>
</body>
</html>
浙公网安备 33010602011771号