下面我们来看小兔子，学网页布局；
一 网页文字搭配
1 左图右文字
2 右文字左图
3 上图下文字
4 文字环绕图片
二 代码
<!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>图文布局</title>
<head>
</head>
<body>
<div id="container" style="width:900px;height:436px;">
<div id="leftimg" style="width:500px;height:436px;float:left;">
<img src="img/99.jpg" alt=""/>
</div>
<div id="content" style="width:400px;height:436;float:left">
<br />
<br />
<br />
<p>
好好吃的胡萝卜；好好吃的胡萝卜；好好吃的胡萝卜；
</p>
<p>
好好吃的胡萝卜 好好吃的胡萝卜；好好吃的胡萝卜；
</p>
<p>
好好吃的胡萝卜 好好吃的胡萝卜；好好吃的胡萝卜；
</p>
<p>
好好吃的胡萝卜 好好吃的胡萝卜；好好吃的胡萝卜；
</p>
<p>
好好吃的胡萝卜；好好吃的胡萝卜；好好吃的胡萝卜；
</p>
<p>
好好吃的胡萝卜 好好吃的胡萝卜；好好吃的胡萝卜；
</p>
<p>
好好吃的胡萝卜 好好吃的胡萝卜；好好吃的胡萝卜；
</p>
<p>
好好吃的胡萝卜 好好吃的胡萝卜；好好吃的胡萝卜；
</p>
</div>
</div>
<!-- 分隔div -->
<div style="margin: 0 auto; width:1400px; height:50px;" >
</div>
<div id="container" style="width:1040px;height:462px;">
<div id="leftwz" style="width:400px;float:left;">
<br />
<p>
我还这么小，我能吃胡萝卜么；我还这么小，我能吃胡萝卜么；
</p>
<p>
我还这么小，我能吃胡萝卜么；我还这么小，我能吃胡萝卜么；
</p>
<p>
我还这么小，我能吃胡萝卜么；我还这么小，我能吃胡萝卜么；
</p>
<p>
我还这么小，我能吃胡萝卜么；我还这么小，我能吃胡萝卜么；
</p>
<p>
我还这么小，我能吃胡萝卜么；我还这么小，我能吃胡萝卜么；
</p>
<p>
我还这么小，我能吃胡萝卜么；我还这么小，我能吃胡萝卜么；
</p>
<p>
我还这么小，我能吃胡萝卜么；我还这么小，我能吃胡萝卜么；
</p>
<p>
我还这么小，我能吃胡萝卜么；我还这么小，我能吃胡萝卜么；
</p>
</div>
<div id="content" style="width:640px;height:462;float:left;">
<img src="img/95.jpg" width="640" height="460" alt="" />
</div>
</div>
<!-- 分隔div -->
<div style="margin: 0 auto; width:1400px; height:50px;" >
</div>
<div id="container" style="height:600px">
<div id="upimg" style="height:424px;">
<img src="img/xiaoheitu5-2.jpg" alt=""/>
</div>
<div id="content" style="height:170px;">
<p>
我直立了;我直立行走了;
</p>
<p>
我直立了;我直立行走了;
</p>
<p>
我直立了;我直立行走了;
</p>
<p>
我直立了;我直立行走了;
</p>
<p>
我直立了;我直立行走了;
</p>
</div>
</div>
<!-- 分隔div -->
<div style="margin: 0 auto; width:1400px; height:50px;" >
</div>
<div id="container" style="width:1200px">
<div id="leftimg" style="width:510px;float:left;/* background:green; */">
<img src="img/xiaohui1.jpg" alt="" width="500" height="375" style="margin-left:5px" />
</div>
<br />
我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；
我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我要吃
胡萝卜；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔
；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我
是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我要吃胡
萝卜；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；
我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是
小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我要吃胡萝
卜；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我
要吃胡萝卜；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小
灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔
；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我要
吃胡萝卜；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰
兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；
我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我要吃胡萝卜；我是小灰兔；我是小灰兔兔；我是
小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔
兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我
是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我要吃胡萝卜；我是小灰兔；我是小灰兔兔；我是小
灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔
；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；我是小灰兔；我是小灰兔兔；
</div>
</body>
</html>
代码不解释了， 前三个是一个div套2个div; 最后一个是一个div套一个div，图片在内层div, 文字不用再套div，会自然环绕；
2604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
