CSS左图右文混排布局_层和布局特效

CSS图文混排是我们布局网页时经常要用到的布局方法，本实例就是一个典型的左图右文的常用布局，美观大方，方法简便，你可以运行一下代码，看下效果，是不是你想要的呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title>CSS左图右文混排布局</title>
<meta http-equiv="mrc-Type" mrc="text/html;charset=gb2312">
<style type="text/css">
* {
	margin:0;
	padding:0;
}
h3 {
	font-size:12px;
	color:#0066CC;
	line-height:2em;
}
p {
	font-size:12px;
	text-indent:2em;
	line-height:1.5em;
}
#container {
	width:300px;
	margin:0 auto;
	margin-top:10px;
	padding-right:3px;
	border:1px dotted #666;
	position:relative;
}
#leftContent {
	position:absolute;
	top:4px;
	left:4px;
}
#leftContent img{
	height:80px;
                     width:100px;
	border:1px solid #ccc;
	padding:2px;
}
#rightContent {
	margin-left:120px;
}
</style>
</head>
<body>
<div id="container">
  <div id="leftContent"><img src="/jscss/demoimg/wall_s6.jpg"></div>
    <div id="rightContent">
      <h3><a href="/">模板无忧</a></h3>
      <p>mb5u.com是一个以学习为主的源码下载站，每一款源程序都经过了站长的精心测试，节省了您在网上找资源的宝贵时间。</p>
    </div>
  </div>
</div>
</body>
</html>

所属频道：层和布局特效/更新时间：2012-12-01

[收藏][报错][返回列表]

CSS左图右文混排布局_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些