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訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些