Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1022作业 1. 实例演示列间隙的二种设置方案,并比较异同 2. 参考课堂案例,自己实现一个等高列的案例(不得抄源码)
Blogger Information
Blog 7
fans 0
comment 1
visits 4249
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1022作业 1. 实例演示列间隙的二种设置方案,并比较异同 2. 参考课堂案例,自己实现一个等高列的案例(不得抄源码)
Vic
Original
618 people have browsed it

实例演示列间隙的三种设置方案

代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8. .main1, .side1, .main2, .side2{
  9. /* 靠左浮动 */
  10.      float: left;
  11.         /* 转换为IE盒子，方便计算。 */
  12.      box-sizing: border-box;
  13. }
  14.  /* 列间隙设置方案1 */
  15. /* 主要内容1 */
  16.         .main1 {
  17. background-color: blueviolet;
  18. border-radius: 1em;
  19.        width: 60%;
  20.         }
  22. /* 侧栏内容1 */
  23.         .side1 {
  24. background-color: blueviolet;
  25. border-radius: 1em;
  26.    width: 30%;
  27.     margin-left: 10%;
  28.         }
  32.  /* 列间隙设置方案2 */
  33.  /* 主要内容2 */
  34. .main2{
  35.     background-color: darkblue;
  36. border-radius: 1em;
  37. width: 60%;
  38. }
  39. /* 侧栏内容2 */
  40. .side2{
  41. background-color: darkblue;
  42. border-radius: 1em;
  43. width: calc(40% - 5em);
  44. margin-left: 5em;
  45. }
  48.  /* 列间隙设置方案3 */
  49.  /* 把下列3内容个装在一个块表格table里面 */
  50. .main3, .side3{
  51.           box-sizing: border-box;
  52.    display: table-cell;
  53.        background-color:blue;
  54. border-radius: 1em;
  55. }
  56. /* 左侧浮动 */
  57. .main3{
  58. width: 60%;
  59. float: left;
  60. }
  61. /* 右侧浮动 */
  62. .side3{
  63. width: 30%;
  64. float: right;
  65. }
  66.     </style>
  67. </head>
  68. <body>
  69.     <div class="box">
  70. <main class="main1">
  71.     <h3>主要内容1</h3>
  72.     </main>
  74.     <aside class="side1">
  75.         <h3>侧栏内容1</h3>
  76.     </aside>
  78. <main class="main2">
  79. <h3>主要内容2</h3>
  80. </main>
  82. <aside class="side2">
  83.     <h3>侧栏内容2    </h3>
  84. </aside>
  85. </div>
  88. <main class="main3">
  89.     <h3>主要内容3</h3>
  90. </main>
  93. <aside class="side3">
  94.     <h3>侧栏内容3</h3>
  95. </aside>
  98. </body>
  99. </html>

效果展示

不同视窗大小尺寸的对比


实现一个等高列的案例

代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .main, .side, .empty{
  10. display: table-cell;
  11.      /* 转换为IE盒子，方便计算。 */
  12.         box-sizing: border-box;
  13.         size: 100%;
  14.         }
  16.         .main, .side{
  17.  background-color: darkcyan;
  18. border-radius: 1em; 
  19.         }
  21.         .main{
  22. width: 40%;
  23.         }
  25.      .empty{
  26. width: 30%;
  27.      }
  29.         .side{
  30.             width: 30%;
  31.         }
  33.     </style>
  34. </head>
  35. <body>
  36.    <main class="main">
  37.        <h3>主要内容</h3>
  38.        <h4>这是主要内容里的文字部分，只是凑个数。</h4>
  39.    </main>
  40.    <div class="empty"></div>
  41.    <aside class="side">
  42.        <h3>侧栏内容</h3>
  43.    </aside>
  44. </body>
  45. </html>

效果展示

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：同学是刚报名的吧, 才一个作业.. . 非常的不错, 很认真
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
1 comments
Vic 2020-10-25 19:07:45
是的。老师。刚开始来上了1节课。
1 floor
Author's latest blog post