以制作360网页为例（只做到了静态网页）
提纲：
悬浮窗:
源代码：
<!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> <link href="360网页css第二遍.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="搜索栏"> <div id="综合搜索"><img src="360小图标/好搜logo.png"/></div> <div id="文本框"><input type="text"></div> <div><input type="button" value="好搜一下" class="font1" /></div> </div> <div id="左上"><table height="300px" width="230px" cellpadding="4"> <tr> <td><a href="http://www.people.com.cn"> 新闻</font></a><span>•</span><a href="http://www.xinhuanet.com">视频</a></td> <td><a href="http://www.people.com.cn">电影</a><span>•</span><a href="http://www.xinhuanet.com">电视剧</a></td> </tr> <tr > <td><a href="http://www.people.com.cn"> 购物</a><span>•</span><a href="http://www.xinhuanet.com">团购</a></td> <td><a href="http://www.people.com.cn">彩票</a><span>•</span><a href="http://www.xinhuanet.com">理财</a></td> </tr> <tr > <td><a href="http://www.people.com.cn"> 活期</a><span>•</span><a href="http://www.xinhuanet.com">基金</a></td> <td><a href="http://www.people.com.cn">小说</a><span>•</span><a href="http://www.xinhuanet.com">海淘</a></td> </tr> <tr> <td><a href="http://www.people.com.cn"> 游戏</a><span>•</span><a href="http://www.xinhuanet.com">小游戏</a></td> <td><a href="http://www.people.com.cn">动漫</a><span>•</span><a href="http://www.xinhuanet.com">直播秀</a></td> </tr> <tr > <td><a href="http://www.people.com.cn"> 搞笑</a><span>•</span><a href="http://www.xinhuanet.com">解梦</a></td> <td><a href="http://www.people.com.cn">教育</a><span>•</span><a href="http://www.xinhuanet.com">度假</a></td> </tr> <tr > <td><a href="http://www.people.com.cn"> 查询</a><span>•</span><a href="http://www.xinhuanet.com">星座</a></td> <td><a href="http://www.people.com.cn">机票</a><span>•</span><a href="http://www.xinhuanet.com">火车票</a></td> </tr> <tr > <td><a href="http://www.people.com.cn"> 手机</a><span>•</span><a href="http://www.xinhuanet.com">娱乐</a></td> <td><a href="http://www.people.com.cn">商城</a><span>•</span><a href="http://www.xinhuanet.com">好药</a></td> </tr> </table> </div> <div id="左中"> <table height="120px" width="230px" cellpadding="0"> <tr><td><img src="360小图标/左中广告.png" height="60px" width="230px"/></td></tr> <tr><td>子韬杨幂游戏秀恩爱单身狗哭了</td></tr> <tr><td>装备靠打，玩就知道</td></tr> </table> </div> <div id="左下"> <div id="左下分1"> <table height="30px" width="230px"> <tr><td align="left">猜你爱看</td><td align="right">换一下</td></tr> </table> </div> <div id="左下分2"> <table height="30px" width="230px"> <tr align="center"> <td>头条</td><td>八卦</td><td>正能量</td><td>军事</td> </tr> </table> </div> <div id="左下图片"><img src="360小图标/左下广告.png" /></div> <div id="左下分3"> <table height="30px"; width="230px"> <tr><td>工信部称完成提速降费年度目标</td></tr> </table> </div> <div id="左下分4"> <table height="30px"; width="230px"> <tr><td>现金红包免费送 亚洲新楼王</td></tr></table> </div> </div> <div id="右上"> <table height="360px" width="760px" cellpadding="10"> <tr align="center"> <td><a href="http://www.people.com.cn">好搜</a><span>•</span><a href="http://www.xinhuanet.com">360商城</a></td> <td><a href="http://www.people.com.cn">新浪</a><span>•</span><a href="http://www.xinhuanet.com">微博</a></td> <td><a href="http://www.people.com.cn">天猫</a><span>•</span><a href="http://www.xinhuanet.com">圣诞狂欢</a></td> <td><a href="http://www.people.com.cn">搜狐</a><span>•</span><a href="http://www.xinhuanet.com">视频</a></td> <td><a href="http://www.people.com.cn">网易</a><span>•</span><a href="http://www.xinhuanet.com">邮箱</a></td> <td><a href="http://www.people.com.cn">凤凰</a><span>•</span><a href="http://www.xinhuanet.com">军事</a></td> </tr> <tr align="center"> <td><a href="http://www.people.com.cn">360游戏</a></td> <td><a href="http://www.people.com.cn">淘宝网</a></td> <td><a href="http://www.people.com.cn">购物</a><span>•</span><a href="http://www.xinhuanet.com">团购</a></td> <td><a href="http://www.people.com.cn">百度</a><span>•</span><a href="http://www.xinhuanet.com">热搜</a></td> <td><a href="http://www.people.com.cn">360</a><span>•</span><a href="http://www.xinhuanet.com">手机卫士</a></td> <td><a href="http://www.people.com.cn">携程旅游</a></td> </tr> <tr align="center"> <td><a href="http://www.people.com.cn">爱淘宝</td> <td><a href="http://www.people.com.cn">360影视</a></td> <td><a href="http://www.people.com.cn">聚划算</td> <td><a href="http://www.people.com.cn">国美在线</a></td> <td><a href="http://www.people.com.cn">东财</a><span>•</span><a href="http://www.xinhuanet.com">理财</a></td> <td><a href="http://www.people.com.cn">央视网</a><span>•</span><a href="http://www.xinhuanet.com">直播</a></td> </tr> <tr align="center"> <td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新华</a></td> <td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新华</a></td> <td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新华</a></td> <td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新华</a></td> <td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新华</a></td> <td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新华</a></td> </tr> <tr align="center"> <td><a href="http://www.autohome.com.cn">汽车之家</a></td> <td><a href="http://zibo.bitauto.com">易 车 网</a></td> <td><a href="http://www.pcauto.com.cn">太平洋汽车</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="#00CC33">苏宁易购</a></td> </tr> <tr align="center"> <td><a href="http://www.12306.cn">12306官网</a></td> <td><a href="http://www.people.com.cn">人民</a><span>•</span><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="360小图标/途牛.jpg" width="15" /><a href="http://www.tuniu.com">途牛旅游网</a></td> <td><a href="http://www.baidu.com"><font color="#00CC33"><i><b>1号店</b></i></a> <a href="http://www.baidu.com"><img src="360小图标/抢福袋.jpg" width="40"/></a></td> </tr> <tr align="center"> <td><a href="http://www.zhenai.com">真爱婚恋网</a></td> <td><a href="http://www.moonbasa.com">梦 芭 莎</a></td> <td><a href="http://www.baidu.com">亚 马 逊</a></td> <td><a href="http://www.baidu.com">艺 龙 网</a></td> <td><a href="http://www.baidu.com">去哪儿网</a></td> <td><a href="http://www.baidu.com">美 丽 说</a></td> </tr> <tr align="center" > <td><a href="http://www.baidu.com">美 团 网</a></td> <td><a href="http://www.baidu.com">乐视视频</a></td> <td><img src="360小图标/唯品会.jpg" width="15"/><a href="http://www.baidu.com">唯 品 会</a></td> <td><a href="http://www.baidu.com"><font color="#CC6600">聚美优品</a></td> <td><a href="http://www.baidu.com">搜 房 网</a></td> <td><a href="http://www.baidu.com">蘑 菇 街</a></td> </tr> <tr align="center"> <td><a href="http://www.baidu.com">猎 聘 网</a></td> <td><a href="http://www.baidu.com">1 药 网</a></td> <td><a href="http://www.baidu.com">陆金所理财</a></td> <td><a href="http://www.baidu.com">六 间 房</a></td> <td><a href="http://www.baidu.com">携程机票</a></td> <td><a href="http://www.baidu.com">12306·抢票</a></td> </tr> </table> </div> <div id="右下"> <div id="右下1"></div> <table> <tr><td align="left">猜你喜欢</td></tr> </table> <div id="右下2"> <table height="240px" width="760px" cellpadding="2"> <tr align="center"><td>游戏</td><td>永久免费游戏</td><td>全部装备靠打</td><td>非人民币玩家</td><td>传奇公益服</td><td>2015新版传奇</td><td>传奇单机版</td></tr> <tr align="center"><td>财经</td><td>金钱</td><td>信用卡</td><td>软件</td><td>p2p</td><td>理财</td><td>赚钱</td></tr> <tr align="center"><td>汽车</td><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>物流</td><td>赚钱</td></tr> <tr align="center"><td>购物</td><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>机票</td><td>火车</td></tr> </table> </div> </div> <div id="悬浮窗">这是一个广告</div> </body> </html>
CSS表
@charset "utf-8"; /* CSS Document */ <style type="text/css"> * { margin:0px; padding:0px; } body{ background-image:url(360%E5%B0%8F%E5%9B%BE%E6%A0%87/%E7%99%BD%E7%81%B0%E6%B8%90%E5%8F%98.png)} #搜索栏 { border:1px solid #999; height:60px; width:1000px; position:absolute; } #综合搜索 { width:100; height:60px; left:200px; top:10px; position:absolute; } input[type=text]/*难点一：修改文本框高和宽*/ { width:400px; height:40px; top:8px; left:320px; position:absolute; } input[type=button]/*难点二：修改文本框高和宽，也可以直接在style里面改*/ { width:100px; height:40px; top:10px; left:730px; position:absolute;} .font1/*难点三：修改按钮里面的字体——用class引用*/ { font-family:"宋体"; font-size:15px;} #左上 { background-color:#FFF; border:1px solid #999; height:300px; width:230px; left:10px; top:80px; position:absolute; } #左中 { background-color:#FFF; border:1px solid #999; height:120px; width:230px; left:10px; top:390px; position:absolute; } #左下 { background-color:#FFF; border:1px solid #999; height:240px; width:230px; left:10px; top:520px; position:absolute; } #左下分1 { height:30px; width:230px; left:0px; position:absolute; } #左下分2 { height:30px; width:230px; left:0px; top:30px; position:absolute; } #左下图片 { height:120px; width:230px; top:60px; left:10px; position:absolute; } #左下分3 { height:30px; width:230px; left:0px; top:180px; position:absolute; } #左下分4 { height:30px; width:230px; left:0px; top:210px; position:absolute; } #右上 { background-color:#FFF; border:1px solid #999; height:360px; width:760px; left:250px; top:80px; position:absolute; } #右下 { background-color:#FFF; border:1px solid #999; height:280px; width:760px; left:250px; top:450px; position:absolute; } #右下1 { height:40px; width:760px; left:250px; top:0px; position:absolute;} #右下2 { height:240px; width:760px; left:0px; top:40px; position:absolute;} #悬浮窗 { border:5px solid #999; width:150px; height:80px; margin:10px; background-color:#666; right:30px; bottom:20px; position:fixed; } a:link { color:#000; text-decoration:none;}/*下划线*/ a:visited { color:#000; text-decoration:none} a:hover { color:#F00; text-decoration:underline;} a:active { color:#F60; text-decoration:underline;} </style>
总结
原文：http://www.cnblogs.com/Chenshuai7/p/5074798.html