HTML&CSS布局练习---360导航页面
一共分为7个部分：由HTML和CSS外部样式表做成
<!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>好123-上网从这里开始</title> <link href="Untitled-练习360外部样式表.css" rel="stylesheet" type="text/css" /> </head> <body background="未标题-1.jpg"> <div id="导航栏"> <div id="logo"><img src="3605.png"/></div> <div><input type="text" id="文本框"></div> <div><input type="button" value="好搜一下" id="按钮" /></div> </div> <div id="右上"> <table height="200px" width="500px"> <tr align="center"><font size="1"> <td><a href="http://www.baidu.com">好搜</a>•<a href="http://www.ganji.com/">360商城</a></td> <td><a href="http://www.baidu.com">新浪</a>•<a href="http://www.ganji.com/">微博</a></td> <td><a href="http://www.baidu.com">天猫</a>•<a href="http://www.ganji.com/">圣诞狂欢</a></td> <td><a href="http://www.baidu.com">搜狐</a>•<a href="http://www.ganji.com/">视频</a></td> <td><a href="http://www.baidu.com">网易</a>•<a href="http://www.ganji.com/">邮箱</a></td> <td><a href="http://www.baidu.com">凤凰</a>•<a href="http://www.ganji.com/">军事</a></td> </tr></font> <tr align="center"><font size="1"> <td><a href="http://www.baidu.com">360游戏</a></td> <td><a href="http://www.baidu.com">淘 宝 网</a></td> <td><a href="http://www.ganji.com/">购物</a>•<a href="http://www.ganji.com/">团购</a></td> <td><a href="http://www.ganji.com/">百度</a>•<a href="http://www.ganji.com/">热搜</a></td> <td><a href="http://www.ganji.com/">360</a>•<a href="http://www.ganji.com/">手机卫士</a></td> <td><a href="http://www.ganji.com/">携程旅游</a></td> </tr></font> <tr align="center"><font size="1"> <td><a href="http://www.ganji.com/">爱 淘 宝</a></td> <td><a href="http://www.ganji.com/">360影视</a></td> <td><a href="http://www.ganji.com/">聚 划 算</a></td> <td><a href="http://www.ganji.com/">国美在线</a></td> <td><a href="http://www.ganji.com/">东财</a>•<a href="http://www.ganji.com/">理财</a></td> <td><a href="http://www.ganji.com/">央视</a>网•<a href="http://www.ganji.com/">直播</a></td> </tr></font> <tr align="center"><font size="1"> <td><a href="http://www.ganji.com/">京东商城</a></td> <td><a href="http://www.ganji.com/">58 同 城</a></td> <td><a href="http://www.ganji.com/">太平洋电脑</a></td> <td><a href="http://www.ganji.com/">世纪佳缘</a></td> <td><a href="http://www.ganji.com/">同程旅游</a></td> <td><a href="http://www.ganji.com/">中关村在线</a></td> </tr></font> <tr> <td colspan="6"><hr /> </td> </tr> <tr align="center"><font size="1"> <td><a href="http://www.ganji.com/">汽车之家</a></td> <td><a href="http://www.ganji.com/">易车网</a></td> <td><a href="http://www.ganji.com/">太平洋汽车</a></td> <td><a href="http://www.anjuke.com/">安居客</a></td> <td><a href="http://out.zhe800.com/">折800</a></td> <td><a href="http://www.suning.com/"><font color="#00FF00">苏宁易购</a></td> </tr></font> <tr align="center"><font size="1"> <td><a href="http://www.4399.com/">4399小游戏</a></td> <td><a href="http://www.people.com.cn/">人民</a> • <a href="http://www.xinhuanet.com/">新华</a></td> <td><a href="http://www.ganji.com/">赶集网</a></td> <td><a href="http://union.dangdang.com/">当当网</a></td> <td><img src="素材/wan.ico" height="15"> <a href="http://www.tuniu.com/">途牛旅游网</a></td> <td><a href="http://www.yhd.com/"><font color="#00FF00"><b><i>一号店</i></b></a> <a href="http://cms.yhd.com"><font color="#FFFF00" size="-1"><b><i>抢福袋</i></b></a></td> </tr></font> <tr align="center"><font size="1"> <td><a href="http://www.zhenai.com/">珍爱婚恋网</a></td> <td><a href="http://www.moonbasa.com/">梦芭莎</a></td> <td><a href="http://www.amazon.cn/">亚马逊</a></td> <td><a href="http://www.elong.com/">艺龙网</a></td> <td><a href="http://www.qunar.com/">去哪儿网</a></td> <td><a href="http://www.meilishuo.com/">美丽说</a></td> </tr></font> <tr align="center"><font size="1"> <td><a href="http://www.meituan.com/">美团网</a></td> <td><a href="http://www.letv.com/">乐视视频</a></td> <td><img src="素材/bitbug_favicon (33333).ico" height="15"/> <a href="http://n.vip.com/">唯品会</a></td> <td><a href="http://www.jumei.com/"><font color="#FFFF00">聚美优品</a></td> <td><a href="http://www.fang.com/">搜房网</a></td> <td><a href="http://www.mogujie.com/">蘑菇街</a></td> </tr></font> <tr align="center"><font size="1"> <td><a href="http://www.liepin.com/">猎聘网</a></td> <td><a href="http://www.111.com.cn/">1药网</a></td> <td><a href="http://t.lu.com/">陆金所理财</a></td> <td><a href="http://www.6.cn/?src=z9weij928">六房间</a></td> <td><a href="http://u.ctrip.com/">携程机票</a></td> <td><a href="http://www.12306.cn/">12306</a> • <a href="http://12306.360.cn/">抢票</a></td> </tr></font></table> </div> <div id="右下"><table height="200px" width="500px"> <tr> <td><a href="http://t.lu.com/"><font color="#00FF00" size="1"><b>发现你喜</b>欢</font></a></td> <td></td> </tr> <tr><font size="1"> <td><a href="http://www.12306.cn/"> 影视</a></td> <td><a href="http://www.12306.cn/">360影视</a></td> <td><a href="http://www.12306.cn/">全球追剧</a></td> <td><a href="http://www.12306.cn/">美女主播</a></td> <td><a href="http://www.12306.cn/">69美女秀</a></td> <td><a href="http://www.12306.cn/">大秧歌</a></td> <td><a href="http://www.12306.cn/">三个奶爸</a></td> <td><a href="http://www.12306.cn/"><font size="-1" color="#999999">换一换</font></a></td> </tr></font> <tr><font size="1"> <td><a href="http://www.12306.cn/"> 购物</a></td> <td><a href="http://www.12306.cn/">蘑菇街</a></td> <td><a href="http://www.12306.cn/">易购9块邮</a></td> <td><a href="http://www.12306.cn/">一折网特价</a></td> <td><a href="http://www.12306.cn/">京东服装城</a></td> <td><a href="http://www.12306.cn/">360购物</a></td> <td><a href="http://www.12306.cn/">潮南派</a></td> <td><a href="http://www.12306.cn/"><font size="-1" color="#999999">换一换</font></a></td> </tr></font> <tr><font size="1"> <td><a href="http://www.12306.cn/"> 游戏</a></td> <td><a href="http://www.12306.cn/">我是大主宰</a></td> <td><a href="http://www.12306.cn/">每日轻松网游</a></td> <td><a href="http://www.12306.cn/">手机游戏中心</a></td> <td><a href="http://t.lu.com/">游侠网</a></td> <td><a href="http://www.12306.cn/">太平洋游戏</a></td> <td><a href="http://www.12306.cn/">178游侠网</a></td> <td><a href="http://www.12306.cn/"><font size="-1" color="#999999">换一换</font></a></td> </tr></font> <tr><font size="1"> <td><a href="http://www.12306.cn/"> 热卖</a></td> <td><a href="http://t.lu.com/">秋冬女装</a></td> <td><a href="http://www.12306.cn/">热解馋零食</a></td> <td><a href="http://www.12306.cn/">洗牙套餐3折</a></td> <td><a href="http://www.12306.cn/">香辣火锅刷肉</a></td> <td><a href="http://www.12306.cn/">限量版KTV团购</a></td> <td><a href="http://www.12306.cn/">儿童摄影1折</a></td> <td><a href="http://www.12306.cn/"><font size="-1" color="#999999">换一换</font></a></td> </tr></font> <tr><font size="1"> <td><a href="http://www.12306.cn/"> 小说</a></td> <td><a href="http://www.12306.cn/">不花钱看小说</a></td> <td><a href="http://www.12306.cn/">言情小说大全</a></td> <td><a href="http://www.12306.cn/">小说排行榜</a></td> <td><a href="http://www.12306.cn/">斗破苍穹</a></td> <td><a href="http://t.lu.com/">奇幻仙侠</a></td> <td><a href="http://www.12306.cn/">最新武侠小说</a></td> <td><a href="http://t.lu.com/"><font size="-1" color="#999999">换一换</font></a></td> </tr></font> <tr><font size="1"> <td><a href="http://www.12306.cn/"> 军事</a></td> <td><a href="http://t.lu.com/">军事头条</a></td> <td><a href="http://www.12306.cn/">鼎盛军事</a></td> <td><a href="http://t.lu.com/">铁血军事</a></td> <td><a href="http://www.12306.cn/">环球新军事</a></td> <td><a href="http://t.lu.com/">军事装备</a></td> <td><a href="http://www.12306.cn/">航空网</a></td> <td><a href="http://t.lu.com/"><font size="-1" color="#999999">换一换</font></a></td> </tr></font> </table></div> <div id="左上"><table height="150px" width="240px" cellpadding="4"> <tr><font size="1"> <td><a href="http://www.baidu.com"> 新闻</font></a><span>•</span><a href="http://www.hao123.com/">视频</a></td> <td><a href="http://www.baidu.com">电影</a><span>•</span><a href="http://www.hao123.com/">电视剧</a></td> </tr></font> <tr ><font size="1"> <td><a href="http://www.baidu.com"> 购物</a><span>•</span><a href="http://www.hao123.com/">团购</a></td> <td><a href="http://www.baidu.com">彩票</a><span>•</span><a href="http://www.hao123.com/">理财</a></td> </tr></font> <tr ><font size="1"> <td><a href="http://www.baidu.com"> 活期</a><span>•</span><a href="http://www.hao123.com/">基金</a></td> <td><a href="http://www.baidu.com">小说</a><span>•</span><a href="http://www.hao123.com/">海淘</a></td> </tr></font> <tr><font size="1"> <td><a href="http://www.baidu.com"> 游戏</a><span>•</span><a href="http://www.hao123.com/">小游戏</a></td> <td><a href="http://www.baidu.com">动漫</a><span>•</span><a href="http://www.hao123.com/">直播秀</a></td> </tr></font> <tr ><font size="1"> <td><a href="http://www.baidu.com"> 搞笑</a><span>•</span><a href="http://www.hao123.com/">解梦</a></td> <td><a href="http://www.baidu.com">教育</a><span>•</span><a href="http://www.hao123.com/">度假</a></td> </tr></font> <tr ><font size="1"> <td><a href="http://www.baidu.com"> 查询</a><span>•</span><a href="http://www.hao123.com/">星座</a></td> <td><a href="http://www.baidu.com">机票</a><span>•</span><a href="http://www.hao123.com/">火车票</a></td> </tr></font> <tr ><font size="1"> <td><a href="http://www.baidu.com"> 手机</a><span>•</span><a href="http://www.hao123.com/">娱乐</a></td> <td><a href="http://www.baidu.com">商城</a><span>•</span><a href="http://www.hao123.com/">好药</a></td> </tr></font> </table> </div> <div id="左中"><table height="100px" width="240px" cellpadding="0"> <tr><td><a href="http://www.hao123.com/"><img src="3602.png" height="60px" width="230px"/></a></td></tr> <tr><font size="1"><td><a href="http://www.hao123.com/">子韬杨幂游戏秀恩爱单身狗哭了</a></font></td></tr> <tr><font size="1"><td><a href="http://www.hao123.com/">装备靠打，玩就知道</a></font></td></tr> </table></div> <div id="左下"><table height="140px" width="240px"> <tr> <td colspan="3"><font color="#00FF00" size="1"><b>猜你爱看</b></font></td> <td><a href="http://t.lu.com/"><font size="-1" color="#999999">换一下</font></a></td> </tr> <tr align="center"> <td><a href="http://www.hao123.com/">头条</a></td> <td><a href="http://www.hao123.com/">八卦</a></td> <td><a href="http://www.hao123.com/">正能量</a></td> <td><a href="http://www.hao123.com/">军事</a></td> </tr> <tr> <td rowspan="3" colspan="4" align="center"><a href="http://www.hao123.com/"><img src="3603.png" height="60px" width="230px" /></a></td> </tr> <tr></tr> </table></div> </div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <div id="广告"><a href="htpp://www.baidu.com/"><img src="3607.png"></a></div> </body> </html>
@charset "utf-8"; /* CSS Document */ <style type="text/css"> * { margin:0px; padding:0px;} a:link { color:#000; text-decoration:none;} a:visited { color:#000; text-decoration:none;} a:hover { color:red; text-decoration:underline;} a:active { color:orange; text-decoration:underline;} #导航栏 { background-color:#FFF; margin:10px; height:60px; width:1000px; position:absolute;} #右上 { background-color:#FFF; border:1px solid gray; margin:10px; height:200px; width:500px; right:10px; top:80px; position:absolute;} #右下 { background-color:#FFF; border:1px solid gray; margin:10px; height:200px; width:500px; right:10px; top:290px; position:absolute;} #左上 { background-color:#FFF; border:1px solid gray; margin:10px; height:150px; width:240px; left:10px; top:80px; position:absolute;} #左中 { background-color:#FFF; border:1px solid gray; margin:10px; height:100px; width:240px; left:10px; top:240px; position:absolute;} #左下 { background-color:#FFF; border:1px solid gray; margin:10px; height:140px; width:240px; left:10px; top:350px; position:absolute;} #logo { width:100; height:20px; left:200px; top:10px; position:absolute; } #文本框 { width:400px; height:20px; top:10px; left:320px; alignment-adjust:middle; position:absolute; } #按钮 { width:100px; height:30px; top:10px; left:730px; position:absolute;} #广告 { margin:10px; height:150px; width:166px; right:2px; bottom:2px; position:fixed;} </style>
显示结果图片如下：
页面内广告如下图：
