pozition:absolute绝对定位

pozition:relative相对定位

用这两种做了360主页的布局,个人觉得absolute更好理解一些,可能是一开始就用relative那时候还没有完全理解,虽然做出了大体布局,可是觉得云里雾里,一点点调整bottom和left,晚上用absolute又重新做了一个整体的布局,觉得更好理解和操作,而且用top更容易计算相对的像素,可能是做的多了理解了也有关系吧,relative做的那种牵一发而动全身导致有好多地方不敢动,所以有些凌乱,后面absolute这个相对好一些,但是只做了布局,没有填充内容……下面把两种布局都截图看一下

360布局

截图是网页缩到60%的比例截得

怎么做android仿动物连连看游戏界面 7k7k小游戏动物连连看_ci

代码:每一个div里都插入了相应大小的表格,这个布局没有完全做完,所以后续有好多行列都是空的,还没有输入相应的标签

<!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>360</title>
<style>.t1 
{ border:1px solid #CCC;
 width:960px;
 height:105px;
 background-color:#F7F7F7; 
}
.t2 
{ border:1px solid #CCC;
 width:220px;
 height:225px;
 }
 .t3
 {border:1px solid #CCC;
 width:730px;
 height:260px;
 left:220px;
 bottom:235px;
 position:relative;
 margin:10px;
 }
 .t4 
{ border:1px solid #CCC;
 width:220px;
 height:125px;
 bottom:260px;
 right:10px;
 position:relative;
 margin:10px;
 }
 .t5
 {border:1px solid #CCC;
 width:730px;
 height:250px;
 left:220px;
 bottom:370px;
 margin:10px;
 padding:10px; 
 position:relative;
 }
 .t6
{ border:1px solid #CCC;
 width:200px;
 height:250px;
 bottom:520px;
 right:10px;
 position:relative;
 margin:10px;
 padding:10px; 
 }
 .t7
 {border:1px solid #CCC;
 width:730px;
 height:320px;
 left:220px;
 bottom:600px;
 margin:10px; 
 position:relative;

 } .t8
{ border:1px solid #CCC;
 width:200px;
 height:280px;
 bottom:840px;
 right:10px;
 position:relative;
 margin:10px;
 padding:10px;

 }
 .t9
 {border:1px solid #CCC;
 width:730px;
 height:270px;
 left:220px;
 bottom:850px;
 margin:10px; 
 padding:10px;
 position:relative;
 }
 .t10
{ border:1px solid #CCC;
 width:200px;
 height:250px;
 bottom:1100px;
 right:10px;
 position:relative;
 margin:10px;
 }
 .t11
 {border:1px solid #CCC;
 width:730px;
 height:270px;
 left:220px;
 bottom:1085px;
 margin:10px; 
 position:relative;
 }

 .t12
{ border:1px solid #CCC;
 width:200px;
 height:250px;
 bottom:1396px;
 right:10px;
 position:relative;
 margin:10px;
 }
 .t13
 {border:1px solid #CCC;
 width:730px;
 height:350px;
 left:220px;
 bottom:1350px;
 margin:10px; 
 position:relative;
 }
 .t14
{ border:1px solid #CCC;
 width:200px;
 height:330px;
 bottom:1770px;
 right:10px;
 position:relative;
 margin:10px;
 }</style>
</head><body topmargin="100" leftmargin="200" rightmargin="200">
<div class="t1">
<center><table width="540" height="30" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50">网页</td> <td width="50">新闻</td> <td width="50">视频</td> <td width="50">图片</td> <td width="50">音乐</td> <td width="50">微博</td> <td width="50">地图</td> <td width="50">问答</td> <td width="50">购物</td> <td width="50">机票</td> <td width="50">汽车</td> 
</tr>
</table></center>
<center><form c>
<select style="width:120px; height:30px; font-size:20px" c>
<option value="" selected="selected">综合搜索</option>
</select>
<form><input style="width:500px; height:36px;" type="text" />
<input style="width:100px; height:40px; font-size:18px"type="submit" value="搜一下" />
</form></center>
</div><br />
<br /><div class="t2">
<table width="220" height="225" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="318759-13102321332070.jpg" width="10"</td> <td>新闻·</td> <td>视频</td> <td><img src="318743-131106211J827.jpg" width="10" /></td> <td>电影·</td> <td>电视剧</td> 
</tr><tr>
<td></td> <td>购物·</td> <td>海淘</td> <td></td> <td>彩票·</td> <td>理财</td> 
</tr><tr>
<td></td> <td>活期</td> <td>定期</td> <td></td> <td>小说</td> <td>智能</td> 
</tr><tr>
<td></td> <td>游戏</td> <td>小游戏</td> <td></td> <td>动漫</td> <td>直播秀</td> 
</tr><tr>
<td></td> <td>搞笑</td> <td>解梦</td> <td></td> <td>教育</td> <td>度假</td> 
</tr><tr>
<td></td> <td>查询</td> <td>星座</td> <td></td> <td>机票</td> <td>火车票</td> 
</tr><tr>
<td></td> <td>手机</td> <td>娱乐</td> <td></td> <td>好药</td> <td>旅游</td> 
</tr>
</table>
</div>
<div class="t3"><table width="730" height="260" cellpadding="0" cellspacing="0" border="0" >
<tr align="center">
<td>360搜索·好药</td> <td>新浪·微博</td> <td><img src="318759-13102321332070.jpg" width="20" />天猫·精选</td> <td>搜狐·视频</td> <td>网易·邮箱</td> <td>凤凰·军事</td> 
</tr><tr align="center">
<td>360游戏</td> <td>淘宝网</td> <td>网上购物</td> <td>百度·热搜</td> <td>360·手机卫士</td> <td>携程旅行<img src="318743-13110621042819.jpg" width="20" /></td> 
</tr><tr align="center">
<td>爱淘宝</td> <td><img src="318743-13110621042819.jpg" width="20" />360影视</td> <td>聚划算</td> <td>国美在线</td> <td>东财·理财</td> <td>央视网·直播</td> 
</tr><tr align="center">
<td>京东商城</td> <td>58同城</td> <td>太平洋电脑</td> <td>世纪佳缘</td> <td>同程旅游</td> <td>中关村在线</td>
</tr><tr align="center">
<td>汽车之家</td> <td>易车网</td> <td>太平洋汽车</td> <td>安居客</td> <td>折800</td> <td>苏宁易购</td> 
</tr><tr align="center">
<td>驴妈妈旅途</td> <td>人民·新华</td> <td>赶集网</td> <td>当当网</td> <td>途牛旅游</td> <td>1号店</td> 
</tr><tr align="center">
<td>珍爱婚恋网</td> <td>乐居二手房</td> <td>亚马逊</td> <td>艺龙网</td> <td>去哪儿网</td> <td>沪江网校</td> 
</tr><tr align="center">
<td>蘑菇街</td> <td>宜人货</td> <td>唯品会</td> <td>聚美优品</td> <td>搜房网</td> <td>12306官网</td> 
</tr><tr align="center">
<td>猎聘网</td> <td>工商银行</td> <td>陆金所理财</td> <td>六间房</td> <td>携程机票</td> <td>大主宰</td>
</tr></table>
</div>
<div class="t4">
<table width="220" height="125" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="2" rowspan="2"><img src="QQ截图20160323154916.png" width="220" /></td>
</tr><tr>
</tr>
<tr>
<td colspan="2">心动不如行动 拿起鼠标刷起来</td>
</tr>
<tr>
<td colspan="2">全民撒欢儿 嗨翻假期旅游盛宴</td>
</tr>
</table>
</div>
<div class="t5">
<table width="730" height="250" cellpadding="0" cellspacing="0" border="0" >
<tr>
<td colspan="8" height="20"><font color="#38A71D"><b>发现你喜欢</b></font></td> 
</tr><tr>
<td width="50"><font color="#006393">影视</font></td> <td>360影视</td> <td>全球追剧</td> <td>美女直播</td> <td>69美女秀</td> <td>大秧歌</td> <td>三个奶爸</td> <td><font size="-5">换一换</font></td> 
</tr><tr>
<td><font color="#006393">购物</font></td> <td>蘑菇街</td> <td>易购9块9</td> <td>一折网特价</td> <td>京东服装城</td> <td>360购物</td> <td>潮男派</td> <td><font size="-5">换一换</font></td> 
</tr><tr>
<td><font color="#006393">游戏</font></td> <td>我是大主宰</td> <td>每日轻松游戏</td> <td>手机游戏中心</td> <td>游侠网</td> <td>太平洋游戏</td> <td>178游戏网</td> <td><font size="-5">换一换</font></td>
</tr><tr>
<td><font color="#006393">小说</font></td> <td>秋冬女装</td> <td>热销解馋零食</td> <td>洗牙套餐3折</td> <td>香辣火锅涮肉</td> <td>量贩ktv团购</td> <td>儿童摄影1折</td> <td><font size="-5">换一换</font></td>
</tr><tr>
<td><font color="#006393">热卖</font></td> <td>不花钱看小说</td> <td>言情小说大全</td> <td>小说排行榜</td> <td>斗破苍穹</td> <td>奇幻仙侠</td> <td>最新武侠小说</td> <td><font size="-5">换一换</font></td> 
</tr><tr>
<td><font color="#006393">军事</font></td> <td>军事头条</td> <td>鼎盛军事</td> <td>铁血军事</td> <td>环球新军事</td> <td>军事装备</td> <td>航空网</td> <td><font size="-5">换一换</font></td> 
</tr></table>
</div><div class="t6">
<table width="200" height="250" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="3" height="20"><font color="#38A71D"><b>发猜你爱看</b></font></td> <td align="right"><font size="-5">换一下</font></td>
</tr><tr align="center">
<td height="30">头条</td> <td>八卦</td> <td>正能量</td> <td>军事</td>
</tr><tr>
<td colspan="4" rowspan="2"><img src="QQ截图20160323154939.png" height="92"/></td>
</tr><tr>
</tr>
<tr>
<td colspan="4">朝鲜外交官酒驾 </td> 
</tr><tr>
<td colspan="4">小偷被抓大喊</td>
</tr><tr>
<td colspan="4">魔力鸟或无缘曼联</td> 
</tr><tr>
<td colspan="2">裁军30万</td> <td colspan="2">窦靖童顶绿发</td>
</tr>
</table>
</div>
<div class="t7">
<table height="30" cellpadding="0" cellspacing="0" border="0" >
<tr >
<td width="50"><font color="#006393">游戏</font></td> <td width="50" ><font color="#006393">电影</font></td> <td width="50" ><font color="#006393">电视剧</font></td> <td width="50"><font color="#006393">小说</font></td> <td width="50"><font color="#006393">音乐</font></td> <td width="50"><font color="#006393">购物</font></td> <td width="50"><font color="#006393">海淘</font></td> <td width="50"><font color="#006393">服装</font></td> <td width="60"><font color="#006393">聚划算</font></td> <td width="90"><font color="#006393">游戏精选</font></td> <td width="70"><font color="#006393">2016省考</font></td> 
</tr>
</table><hr /><table width="730" cellpadding="0" cellspacing="0" border="0">
<tr height="35">
<td width="60"><font color="#006393">页游</font></td> <td width="100">主宰西游</td> <td width="110">沙巴克</td> <td width="110">魔域3.2</td> <td>女神联盟2</td> <td>九阴绝学</td> <td>我是大主宰</td> <td><font size="-5">更多</font></td>
</tr><tr height="35">
<td><font color="#006393">影视</font></td> <td>电影</td> <td>电视剧</td> <td>综艺</td> <td>娱乐</td> <td>动漫</td> <td>电视直播</td> <td><font size="-5">更多</font></td> 
</tr><tr height="35">
<td><font color="#006393">视频</font></td> <td>爱奇艺高清</td> <td>芒果TV</td> <td>360影视</td> <td>乐视高清</td> <td>六间房秀场</td> <td>美女视频</td> <td><font size="-5">更多</font></td>
</tr><tr height="35">
<td><font color="#006393">小说</font></td> <td>晋江文学城</td> <td>言情小说吧</td> <td>纵横中文网</td> <td>飞卢小说网</td> <td>免费听书</td> <td>360小说</td> <td><font size="-5">更多</font></td>
</tr><tr height="35">
<td><font color="#006393">音乐</font></td> <td>酷狗音乐</td> <td>一听音乐网</td> <td>九酷音乐网</td> <td>音乐主播秀</td> <td>酷狗美女秀</td> <td>酷我秀场</td> <td><font size="-5">更多</font></td>
</tr><tr height="35">
<td><font color="#006393">游戏</font></td> <td>4399小游戏</td> <td>7K7K小游戏</td> <td>2144小游戏</td> <td>传奇盛世</td> <td>360小游戏</td> <td>游戏网</td> <td><font size="-5">更多</font></td>
</tr><tr height="35">
<td><font color="#006393">购物</font></td> <td>京东商城</td> <td>苏宁易购</td> <td>亚马逊</td> <td>天猫精选</td> <td>优购网鞋城</td> <td>网上购物</td> <td><font size="-5">更多</font></td>
</tr></table>
</div><div class="t8">
<table width="220" height="280" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="20"><b>游戏</b></td> <td>最好玩</td> <td>最火爆</td> <td>小游戏</td>
</tr><tr>
<td colspan="4" rowspan="2"><img src="QQ截图20160323154954.png"</td>
</tr><tr>
</tr>
<tr>
<td colspan="2">·冷笑话</td> <td colspan="2">·女生玩心跳</td> 
</tr><tr>
<td colspan="2">·砍刀升级</td> <td colspan="2">·宅男玩尖叫</td> 
</tr><tr>
<td colspan="2">·儿童游戏</td> <td colspan="2">·植物大战僵尸</td> 
</tr><tr>
<td colspan="2">·连连看</td> <td colspan="2">·休闲游戏</td> 
</tr>
</table>
</div><div class="t9">
<table cellpadding="0" cellspacing="0" border="0" width="730">
<tr>
<td width="50"><font color="#006393">新闻</font></td> <td width="50"><font color="#006393">军事</font></td> <td width="50"><font color="#006393">体育</font></td> <td width="50"><font color="#006393">NBA</font></td> <td width="50"><font color="#006393">财经</font></td> <td width="50"><font color="#006393">基金</font></td> <td width="50"><font color="#006393">贷款</font></td> <td width="50"><font color="#006393">网游</font></td> <td width="50"><font color="#006393">小游戏</font></td> <td width="50"><font color="#006393">棋牌</font></td> <td width="50"><font color="#006393">背单词</font></td> <td width="50"><font color="#006393">考试</font></td> <td width="50"><font color="#006393">公务员</font></td>
</tr>
</table><table width="730"height="270" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><font color="#006393">邮箱</font></td> <td>163邮箱</td> <td>126邮箱</td> <td>阿里云</td> <td>QQ邮箱</td> <td>新浪邮箱</td> <td>Hotmail</td> <td><font size="-5">更多</font></td>
</tr><tr>
<td><font color="#006393">新闻</font></td> <td>头条新闻</td> <td>搜狐·未来网</td> <td>网易·凤凰</td> <td>CRI·网信网</td> <td>环球·中国网</td> <td>新华网</td> <td><font size="-5">更多</font></td> 
</tr><tr>
<td><font color="#006393">军事</font></td> <td>中华军事网</td> <td>铁血军事</td> <td>米尔军情网</td> <td>环球军事网</td> <td>军事头条</td> <td>复兴军事网</td> <td><font size="-5">更多</font></td> 
</tr><tr>
<td><font color="#006393">体育</font></td> <td>新浪体育</td> <td>搜狐体育</td> <td>网易体育</td> <td>虎扑体育</td> <td>乐视体育</td> <td>直播吧</td> <td><font size="-5">更多</font></td>
</tr><tr>
<td><font color="#006393">财经</font></td> <td>东方财富网</td> <td>金融界</td> <td>宜信宜人贷</td> <td>爱投资理财</td> <td>晋商贷理财</td> <td>证券之星</td> <td><font size="-5">更多</font></td>
</tr><tr>
<td><font color="#006393">网游</font></td> <td>老炮传奇</td> <td>热血传奇</td> <td>征途2</td> <td>龙武2</td> <td>火龙传奇</td> <td>佛本是道</td> <td><font size="-5">更多</font></td>
</tr>
</table>
</div><div class="t10">
<table width="200" height="250" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td>
</tr>
</table>
</div><div class="t11">
<table width="730" height="270" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td>
</tr>
</table>
</div><div class="t12">
<table width="200" height="250" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td>
</tr>
</table>
</div><div class="t13">
<table width="730" height="300" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td>
</tr><tr>
<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td>
</tr>
</table>
</div><div class="t14">
<table width="200" height="330" cellpadding="0" cellspacing="0" border="0">
<tr> 
<td></td> <td></td> <td></td> <td></td>
</tr><tr> 
<td></td> <td></td> <td></td> <td></td>
</tr><tr> 
<td></td> <td></td> <td></td> <td></td>
</tr><tr> 
<td></td> <td></td> <td></td> <td></td>
</tr><tr> 
<td></td> <td></td> <td></td> <td></td>
</tr><tr> 
<td></td> <td></td> <td></td> <td></td>
</tr><tr> 
<td></td> <td></td> <td></td> <td></td>
</tr><tr> 
<td></td> <td></td> <td></td> <td></td>
</tr><tr> 
<td></td> <td></td> <td></td> <td></td>
</tr><tr> 
<td></td> <td></td> <td></td> <td></td>
</tr><tr> 
<td></td> <td></td> <td></td> <td></td>
</tr><tr> 
<td></td> <td></td> <td></td> <td></td>
</tr></table>
 
</div>
</body>
</html>

360布局2 纯粹的布局图,没有任何的文字输入,今晚想早点睡,所以不具体再去一个个插入表格输入标签了,早上起来睁开眼睛就开始忙东忙西,不知道同班的小伙伴们怎么度过休息日,我基本上都是在忙,每周抽出一天的时间回妈妈那里去看她妈妈住在桓台,来回基本一天就没有了,余下的一天会好好收拾家里陪小妞儿陪先生基本就是这个模式也会去逛个街看个电影但是这几个月估计没闲心意志,因为有时候做题卡到了就会一直想……跑偏了呃……

代码:不完整只是布局的

<!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>360布局-2</title>
<style>
.*{
 margin:0px;
 padding:0px;}
.a
{ width:1050px; border:1px solid #CCC;
 position:absolute; 
}
.b
{ width:1050px;
 height:110px;
 border:1px solid #CCC;
 position:absolute;
}
.b1{border:1px solid #CCC;
 width:1050px;
 height:40px;
 top:125px; 
 position:absolute
 }
.c
{ border:1px solid #CCC;
 width:240px;
 height:240px;
 padding:10px;
 top:175px;
 position:absolute;
}
.d
{ border:1px solid #CCC;
 width:755px;
 height:290px;
 padding:10px;
 top:175px;
 left:275px;
 position:absolute; 
}
.e
{ border:1px solid #CCC;
 width:240px;
 height:120px;
 padding:10px;
 top:445px;
 position:absolute; 
}
.f
{border:1px solid #CCC;
 width:755px;
 height:215px;
 padding:10px;
 top:495px;
 left:275px;
 position:absolute; 
}
.g
{border:1px solid #CCC;
 width:240px;
 height:280px;
 padding:10px;
 top:595px;
 position:absolute; 
}
.h
{border:1px solid #CCC;
 width:755px;
 height:245px;
 padding:10px;
 top:770px;
 left:275px;
 position:absolute; 
}
.i
{border:1px solid #CCC;
 width:240px;
 height:280px;
 padding:10px;
 top:905px;
 position:absolute; 
}
.j
{border:1px solid #CCC;
 width:755px;
 height:220px;
 padding:10px;
 top:1045px;
 left:275px;
 position:absolute; 
}
.k
{border:1px solid #CCC;
 width:240px;
 height:280px;
 padding:10px;
 top:1215px;
 position:absolute; 
}
.l
{border:1px solid #CCC;
 width:755px;
 height:220px;
 padding:10px;
 top:1295px;
 left:275px;
 position:absolute; 
}
.m
{border:1px solid #CCC;
 width:240px;
 height:280px;
 padding:10px;
 top:1525px;
 position:absolute; 
}
.n
{border:1px solid #CCC;
 width:755px;
 height:400px;
 padding:10px;
 top:1545px;
 left:275px;
 position:absolute; 
}
.o
{border:1px solid #CCC;
 width:240px;
 height:320px;
 padding:10px;
 top:1835px;
 position:absolute; 
}
.p
{border:1px solid #CCC;
 width:755px;
 height:175px;
 padding:10px;
 top:1980px;
 left:275px;
 position:absolute; 
}
.q
{ border:1px solid #CCC;
 width:330px;
 height:220px;
 padding:10px;
 top:2200px;
 position:absolute;
 }
 .r
{ border:1px solid #CCC;
 width:330px;
 height:220px;
 padding:10px;
 top:2200px;
 left:350px;
 position:absolute;
 }.s
{ border:1px solid #CCC;
 width:330px;
 height:220px;
 padding:10px;
 top:2200px;
 left:700px;
 position:absolute;
 } 
 
</style>
</head>
<body topmargin="68" leftmargin="158" rightmargin="158">
<div class="a">
<div class="b"></div>
<div class="b1"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
<div class="i"></div>
<div class="j"></div>
<div class="k"></div>
<div class="l"></div>
<div class="m"></div>
<div class="n"></div>
<div class="o"></div>
<div class="p"></div>
<div class="q"></div>
<div class="r"></div>
<div class="s"></div> 
</div>
</body>
</html>