3月23日html(五) 格式与布局练习：360浏览器布局
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>360布局</title> <style> .a { border:0px #C0C0C0 solid; margin:5px; height:100px; right:100px; left:100px; top:100px; position:absolute;} .b { border: 1px #C0C0C0 solid; margin: 5px; height: 300px; left: 100px; top: 246px; position: absolute; width: 250px; } .c { border: 1px #C0C0C0 solid; margin: 5px; height: 350px; top: 246px; position: absolute; width: 850px; right: 100px; } .d { border: 1px #C0C0C0 solid; margin: 1px; position:absolute; height:200px; width:250px; top:570px; left: 100px; } .e { border: 1px #C0C0C0 solid; margin: 5px; position:absolute; height:620px; width:250px; top:800px; left: 100px; } .f { border: 1px #C0C0C0 solid; margin: 5px; height: 300px; top: 620px; position: absolute; width: 850px; right: 100px; } .g { border: 1px #C0C0C0 solid; margin: 5px; height: 470px; top: 950px; position: absolute; width: 850px; right: 100px; } .h { border: 1px #C0C0C0 solid; margin: 5px; height:300px; width:350px; left:100px; top:1430px; position: absolute; } .i { border: 1px #C0C0C0 solid; margin: 5px; height:300px; width:400px; position: absolute; top:1430px; left:450px; } .j { border: 1px #C0C0C0 solid; margin: 5px; height:300px; width:390px; position: absolute; top:1430px; left:850px; } </style> </head> <body background="u=247551981,715822094&fm=21&gp=0.jpg"> <div class="a"> <h1><font size="+4" style="margin-left:130px;"><strong> 360导航</strong> <input type="text" style="height:50px; width:500px;" /> <input type="submit" value="搜一下" style="width:60px; height:40px" /> </font></h1> </div> <div></div> <div class="c" > <table width="830" height="187" cellpadding="1" cellspacing="0" style="margin:5px;" > <tr height="20" align="left"> <td colspan="6"><font color="#00FF00"><strong>我的网址</strong></font> </td> </tr> <tr height="15" align="center" > <td height="12" colspan="6" style="border-top:dashed thin #666"><center> <font size="-2" color="#666666">使用一段时间后，你常用的网址会自动在这里哦，现在你也可以手动添加</font> </center></td> </tr> <tr height="25" align="center" > <td style="border-top:dashed thin #666">360搜索•商城</td> <td style="border-top:dashed thin #666">新浪.•微博</td> <td style="border-top:dashed thin #666">天猫•精选</td> <td style="border-top:dashed thin #666">搜狐•视频</td> <td style="border-top:dashed thin #666">网易•邮箱</td> <td style="border-top:dashed thin #666">凤凰•军事</td> </tr> <tr height="25" align="center"> <td >360游戏</td> <td>淘宝网</td> <td>网上购物</td> <td>百度</td> <td>360•手机卫士</td> <td>携程旅游</td> </tr> <tr height="25" align="center"> <td >爱淘宝</td> <td>360影城</td> <td>聚划算</td> <td>国美在线</td> <td>东财•理财</td> <td>央视网•直播</td> </tr> <tr height="25" align="center"> <td >京东商城</td> <td>58同城</td> <td>太平洋电脑</td> <td>世纪佳缘</td> <td>同程旅游</td> <td>中关村在线</td> </tr> </table> <table width="840" height="150" cellpadding="0" cellspacing="0" style="margin:5px";> <tr align="center"> <td width="155" style="border-top:dashed thin #666">汽车之家</td> <td width="125" style="border-top:dashed thin #666">易车网</td> <td width="132" style="border-top:dashed thin #666">太平洋汽车</td> <td width="116" style="border-top:dashed thin #666">安居客</td> <td width="153" style="border-top:dashed thin #666">折800</td> <td width="157" style="border-top:dashed thin #666">苏宁易购</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> <p> </p> </div><br/> <div class="b" > <table width="247" height="279" style="margin:6px"> <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><br/> <div class="d" > <table width="250" height="200" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="125" height="50"><img src="1.png" width="125" height="50" /></td> <td width="125" height="50"><img src="4.png" width="125" height="50" /></td> </tr> <tr> <td width="125" height="50"><img src="2.png" width="125" height="50" /></td> <td width="125" height="50"><img src="6.png" width="125" height="50" /></td> </tr> <tr> <td width="125" height="50"><img src="3.png" width="125" height="50" /></td> <td width="125" height="50"><img src="7.png" width="125" height="50" /></td> </tr> <tr> <td width="125" height="50"><img src="5.png" width="125" height="50"/></td> <td width="125" height="50"><img src="8.png" width="125" height="50" /></td> </tr> </table> </div> <div></div> <div class="e" >e</div> <div class="f" > <table width="848" height="284" cellpadding="0" cellspacing="0" style="margin:5px;"> <tr > <td height="26" colspan="8" > <font size="-1" color="#00CC00"><strong>发现你喜欢</strong></font></td> </tr> <tr> <td width="64"><font color="#00CC33">影视</font></td> <td width="120">360影视</td> <td width="119">全球追剧</td> <td width="120">美女直播</td> <td width="120">69美女秀</td> <td width="120">大秧歌</td> <td width="120">三个奶爸</td> <td width="47" ><font size="-2" color="#808080">换一换</font></td> </tr> <tr> <td><font color="#00CC33">购物</font></td> <td>蘑菇街</td> <td>易购九块邮</td> <td>一折网特价</td> <td>京东服装城</td> <td>360购物</td> <td>潮男派</td> <td width="47" ><font size="-2" color="#808080">换一换</font></td> </tr> <tr> <td><font color="#00CC33">游戏</font></td> <td>我是大主宰</td> <td>每日轻松游戏</td> <td>手机游戏中心</td> <td>游侠网</td> <td>太平洋游戏</td> <td>178游戏网</td> <td width="47" ><font size="-2" color="#808080">换一换</font></td> </tr> <tr> <td><font color="#00CC33">热卖</font></td> <td>冬季女装</td> <td>热销解馋零食</td> <td>洗牙套餐三折</td> <td>香辣火锅涮肉</td> <td>量贩KTV团购</td> <td>儿童摄影一折</td> <td width="47" ><font size="-2" color="#808080">换一换</font></td> </tr> <tr> <td><font color="#00CC33">小说</font></td> <td>不花钱看小说</td> <td>言情小说大全</td> <td>小说排行榜</td> <td>斗破苍穹</td> <td>奇幻仙侠</td> <td>最新武侠小说</td> <td width="47" ><font size="-2" color="#808080">换一换</font></td> </tr> <tr> <td><font color="#00CC33">军事</font></td> <td>军事头条</td> <td>鼎盛军事</td> <td>铁血军事</td> <td>环球新军事</td> <td>军事装备</td> <td>航空间</td> <td width="47" ><font size="-2" color="#808080">换一换</font></td> </tr> </table> </div> <div class="g" >g</div> <div class="h" >h</div> <div class="i" >i</div> <div class="j" >j</div> </body> </html>
