标签：信息 ade xhtml 1.0 padding meta org 导航栏 idt header
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>最后一题框架</title> 6 <style> 7 *{margin:0;padding: 0;} 8 body{background-color: #ccc;} 9 .box{ 10 width: 1020px; 11 height: 2200px; 12 margin:0 auto; 13 border: 1px solid blue; 14 background-color: skyblue; 15 } 16 .box .header{ 17 height: 160px; 18 border: 1px solid red; 19 background-color: #eee; 20 } 21 .box .header .top1{ 22 height: 50px; 23 background-color: #f00; 24 } 25 .box .header .top2{ 26 height: 60px; 27 background-color: #0f0; 28 } 29 .box .header .top3{ 30 height: 50px; 31 background-color: #00f; 32 } 33 34 /*********************************/ 35 .box .banner{ 36 width: 1020px; 37 height: 420px; 38 margin: 20px auto; 39 border: 1px solid red; 40 background-color: #fff; 41 } 42 /**********************************/ 43 .box .fenlei{ 44 width: 980px; 45 height: 100px; 46 margin:0 auto; 47 border:1px solid blue; 48 background-color: #333; 49 } 50 /***********************************/ 51 .box .jptj{ 52 width: 980px; 53 height: 500px; 54 margin: 20px auto; 55 border: 1px solid red; 56 background-color: #444; 57 } 58 .box .rmsp{ 59 width: 980px; 60 height: 500px; 61 margin: 20px auto; 62 border: 1px solid red; 63 background-color: #444; 64 } 65 .box .weibu{ 66 width: 980px; 67 height: 100px; 68 margin: 0px auto; 69 border:1px solid blue; 70 background-color: #555; 71 } 72 .box .footer{ 73 width: 980px; 74 height: 40px; 75 margin:20px auto; 76 background-color: #666; 77 border: 1px solid blue; 78 } 79 </style> 80 </head> 81 <body> 82 <div class="box"> 83 <!-- 头部开始 --> 84 <div class="header"> 85 <div class="top1">登录注册位置</div> 86 <div class="top2">搜索位置</div> 87 <div class="top3">导航栏位置</div> 88 </div> 89 <!-- 头部结束 --> 90 <!-- banner开始 --> 91 <div class="banner">放banner的位置</div> 92 <!-- banner结束 --> 93 <!-- 商品分类开始 --> 94 <div class="fenlei"> 95 <div class="fenlei1">商品分类</div> 96 <div class="fenlei2">商品分类导航</div> 97 </div> 98 <!-- 商品分类结束 --> 99 <!-- 精品推荐开始 --> 100 <div class="jptj">精品推荐</div> 101 <!-- 精品推荐结束 --> 102 <!-- 热卖商品开始 --> 103 <div class="rmsp">热卖商品</div> 104 <!-- 热卖商品结束 --> 105 <!-- 尾部开始 --> 106 <div class="weibu">尾部广告</div> 107 <!-- 尾部结束 --> 108 <!-- 页脚信息 --> 109 <div class="footer">页脚</div> 110 <!-- 页脚信息结束 --> 111 </div> 112 </body> 113 </html>
标签：信息 ade xhtml 1.0 padding meta org 导航栏 idt header
原文地址：http://www.cnblogs.com/CAODADA/p/6132481.html
