zoukankan      html  css  js  c++  java
  • 布局的练习

    做如图所示的布局:

      1 <!DOCTYPE html> 2 <html lang="en"> 3 <h 4 <meta charset="UTF-8">

     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>Document</title>
     7     <style>
     8         *{
     9             margin: 0;padding: 0;
    10         }
    11         #head{
    12             height: 40px;background: red;
    13         }
    14         #head .list{
    15             width: 900px;height: 40px;background: rosybrown;margin: 0 auto;
    16         }
    17         #banner{
    18             height: 200px;background:purple;
    19         }
    20         #category{
    21             width: 705px;height: 100px;background:palevioletred;margin:auto;
    22         }
    23         #category .item{ //在进行.item的宽高编写时是需要结合父元素#category的宽高来编写的,.item的宽高加上设置的内边距和边框等于#category的宽高
    24             width: 75px;height: 65px;border-right: 1px dashed black;//75*6+25*10+1*5=450+250+5=705;65+10+25=100
    25             padding-left: 25px;padding-right: 25px;padding-top: 10px;
    26             padding-bottom: 25px;float: left;
    27         }
    28         #category .item.first{ //在item后又设置了first,属于同一个class,他们之间不用空格隔开,直接相连
    29             padding-left: 0;
    30         }
    31         #category .item.last{
    32             padding-right: 0;
    33             border: 0;
    34         }
    35         #case{
    36             height: 200px;background: palegoldenrod;
    37         }
    38         #case .title-text{
    39             width: 705px;margin: auto;padding-top: 20px;padding-bottom: 10px;
    40             font-size: 25px;
    41         }
    42         #case .item-wrapper{
    43             width: 700px;margin: auto;overflow:auto;//子元素用了float:left;父元素需用overflow:auto;
    44         }
    45         #case .item-wrapper .item{
    46             width: 200px;
    47             height:100px;
    48             background:greenyellow;float: left;

     1 }
     2         #case .item-wrapper .item.mg{
     3             margin-left: 10px;
     4             margin-right: 10px;
     5         }
     6         #case p{
     7             font-size: 15px;text-align: center;padding-top: 10px;padding-bottom: 10px;
     8             color: grey;
     9         }
    10     </style>
    11 </head>
    12 <body>
    13     <div id="head">
    14         <div class="list"></div>
    15     </div>
    16     <div id="banner"></div>
    17     <div id="category">
    18         <div class="item first"></div>
    19         <div class="item"></div>
    20         <div class="item"></div>
    21         <div class="item"></div>
    22         <div class="item"></div>
    23         <div class="item last"></div>
    24     </div>
    25     <div id="case">
    26         <div class="title-text">
    27             Case
    28         </div>
    29         <div class="item-wrapper">
    30             <div class="item"></div>
    31             <div class="item mg"></div>
    32             <div class="item"></div>
    33         </div>
    34         <p>查看更多+</p>
    35     </div>
    36 </body>
    37 </html>
    
    

    总结:重点是HTML结构的书写,每一个div又包含了子div

  • 相关阅读:
    bzoj5178 [Jsoi2011]棒棒糖 主席树+线段树二分
    bzoj4408 [Fjoi 2016]神秘数 & bzoj4299 Codechef FRBSUM 主席树+二分+贪心
    bzoj3123 [Sdoi2013]森林 树上主席树+启发式合并
    bzoj4448 [Scoi2015]情报传递 主席树+树上差分
    bzoj4399 魔法少女LJJ 线段树合并+线段树二分+并查集
    CF1009F Dominant Indices 长链剖分
    bzoj4543 [POI2014]Hotel加强版 长链剖分+树形DP
    bzoj4009 [HNOI2015]接水果 整体二分+扫描线+树状数组+dfs序
    bzoj4940 [Ynoi2016]这是我自己的发明 莫队+dfs序
    bzoj5016 & loj2254 [Snoi2017]一个简单的询问 莫队
  • 原文地址:https://www.cnblogs.com/zqlym/p/13511955.html
Copyright © 2011-2022 走看看