一个左图右文的简单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=utf-8" />
<title>CSS布局</title>
<style>
*{margin:0;padding:0;border:0; list-style:none}
body{background:white;}
.event{ width:442px;height:90px;  margin:5px; clear:both; border:1px white solid; }
.event .pic{ float:left;margin:5px; width:80px; height:80px; margin-right:20px;}
.event .title{float:left;margin:5px;line-height:16px;width:300px;}
.d_over{background:#deeaf8;border:1px solid #aaccee}
.d_out{background:white;border:1px solid  white;}
h2{ font-size:14px; font-weight:bolder; color:#444444;}
p{ font-size:12px; color:#666666; margin-top:4px; line-height:19px;}

</style>
</head>

<body>
<div class="event" onmouseover="this.className='d_over event'" onmouseout="this.className='d_out event'">      
<div class="pic"><img src="/jscss/demoimg/wall_s6.jpg" width="100" border="0" /></div>     
<div class="title">
<h2>网页制作</h2>
<p>网页特效，CSS使用示例、JavaScript代码实例等，助您WEB设计一路绿灯……</p>
</div>
</div>
</body>
</html>

上一个：CSS中1PX的使用—缺口提示框
下一个：Javascript实现带阴影的提示框

更多图片编程知识: