CSS左圖右文混排布局_層和布局特效

CSS圖文混排是我們布局網(wǎng)頁(yè)時(shí)經(jīng)常要用到的布局方法，本實(shí)例就是一個(gè)典型的左圖右文的常用布局，美觀大方，方法簡(jiǎn)便，你可以運(yùn)行一下代碼，看下效果，是不是你想要的呢？

<!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="/">模板無(wú)憂</a></h3>
      <p>mb5u.com是一個(gè)以學(xué)習(xí)為主的源碼下載站，每一款源程序都經(jīng)過(guò)了站長(zhǎng)的精心測(cè)試，節(jié)省了您在網(wǎng)上找資源的寶貴時(shí)間。</p>
    </div>
  </div>
</div>
</body>
</html>

所屬頻道：層和布局特效/更新時(shí)間：2012-12-01

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)層和布局特效：

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索CSS左圖右文混排布局
特效說(shuō)明：
層和布局模板-CSS左圖右文混排布局。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

CSS左圖右文混排布局_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些