首页 > 代码库 > 考试最后一题网页框架一个

考试最后一题网页框架一个

2024-08-25 06:44:16   221人阅读

  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>

 

考试最后一题网页框架一个


联系
我们