简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 默认布局与自定义布局
Blogger Information
Blog 46
fans 2
comment 0
visits 19157
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
默认布局与自定义布局
P粉314265155
Original
400 people have browsed it

默认布局与内联元素

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>固定定位、绝对定位</title>
  9. <style>
  10. .box{
  11.     background-color: aqua;
  12.     width: 400px;
  13.     height: 200px;
  14.     padding: 10px;
  15.     margin: 20px;
  16.     border: 2px solid blue;
  17.     box-sizing: border-box;
  18. }
  19. .box1{
  20.     background-color: aqua;
  21.     width: 400px;
  22.     height: 200px;
  23.     padding: 10px;
  24.     margin: 20px;
  25.     border: 2px solid red;
  26. }
  28. p span:first-of-type{
  29.     background-color: yellow;
  30.     padding: 10px;
  31.     margin: 20px;
  32.     border: 2px;
  33.     width: 300px;
  34.     height: 200px;
  35.     display: block;
  36.     display: inline-block;
  37. }
  39. p span:first-of-type + span {
  40.         background-color: lightgreen;
  41.       }
  42.     </style>
  43. </style>
  44. </head>
  45. <body>
  47.     <div class="box">
  48.       我是默认定位
  49.     </div>
  50.     <div class="box1">
  51.         <p class="p">你猜：<span>我是内联1</span><span class="s">我是内联2</span></p>
  53.     </div>
  55. </body>
  56. </html>

自定义布局：相对定位与固定定位

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>自定义布局 相对定位与固定定位</title>
  9.     <style>
  10.          body {
  11.         height: 2000px;
  12.       }
  13. * {
  14.     border: 1px solid saddlebrown;
  15.     width: 500px;
  17. }
  19. .box{
  20.     width: 400px;
  21.     height: 250px;
  22.     background-color: lightgray;
  23.     border: 5px dashed red;
  24. }
  25. .box .box{
  26.     width: 400px;
  27.     height: 250px;
  28.     background-color: lightcoral
  29.     padding:10px;
  31. }
  32. .box.child.box1 {
  33.         background-color: yellow;
  34.         border: 5px dashed red;
  35.       }
  36.       .box.child.box2 {
  37.         background-color: rebeccapurple;
  38.         border: 5px dashed red;
  39.       }
  41.       .box.child.box3 {
  42.         background-color: blue;
  43.         border: 5px dashed red;
  44.       }
  46.       .box.box.child.box1{
  47.       /* 我是相对定位   0  距离不需单位 */
  48.         position: relative;
  49.         top: 30px;
  50.         left: 50px;
  51.         z-index: 3.125rem;
  52.       }
  54.       .box.box.child.box2{
  55.       /* 我是绝对定位   0  距离不需单位 */
  56.         /* position: absolute; */
  57.         position: absolute; 
  58.         top: 20px;
  59.         left: 30px;
  61.       }
  62.       .box.child.box3 {
  63.         position: fixed;
  64.         right: 0;
  65.         bottom: 0;
  66.       }
  68.       .box{
  69.         /* 取消自定义定位属性,转为默认定位 */
  70.         /* position: static; */
  72.         /* 只是值不是staitc,就自动将该元素转为"定位元素" */
  73.         /* 只有定位元素,可以充当 绝对定位 元素的 定位父级, 定位参照物 */
  74.          position: relative; 
  75.       }
  77.       body {
  78.         height: 500px;
  79.         border: 2px solid blue;
  80.         height: 2000px;
  81.       }
  84.     </style>
  85. </head>
  86. <body>
  87.     <div class="box">
  88.         <div class="box  child  box1  ">我是相对定位</div>
  89.         <div class="box  child box2">我是绝对定位</div>
  90.         <div class="box  child box3">我是固定定位</div>
  91.     </div>
  92. </body>
  93. </html>

粘性定位

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>我是粘性定位</title>
  8. <style>
  9.     * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  13. .box{
  14.     position: relative;
  15.     background-color: lightcyan;
  16.     border: 5px solid brown dashed;
  17. }
  19. .box1{
  20.     background-color: blue;
  21. }
  22. .box div h2 {
  23.     /* 固定静态静态定位  */
  25.        /* position: static;
  26.         position: fixed;
  27.         top: 0;
  28.         right: 0;
  29.         left: 0;   */
  31.         /* 粘性定位 = 静态定义 + 固定定位 */
  32.         /* sticky = static + fixed  */
  33.          position: sticky;
  34.         /* 当到了top=0的位置时,就自动悬停住了,就像粘在那里一样 */
  35.        /* 注意必须跟top=0配合，不然不生效 */
  36.         top: 0; 
  37.       }
  38. </style>
  39. </head>
  40. <body>
  41.     <div class="box">
  42.         <div class="box1">
  43.             <h2>我是内容1标题</h2>
  44.         <p class="p1" style="background-color:yellow ;">我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  45.             我是内容1、我是内容1、我是内容2、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  46.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  47.             我是内容1、我是内容1、我是内容2、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  48.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  49.         </p></div>
  50.         <div class="box2">
  51.             <h2>我是内容2标题</h2>
  52.         <p class="p1" style="background-color:lightcoral ;" >我是内容2、我是内容2、我是内容2、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  53.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  54.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  55.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  56.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  57.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  58.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  59.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  60.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  61.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  62.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  63.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  64.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  65.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容内容1、我是内容2、我是内容2、我是内容2、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  66.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  67.         </p></div>
  68.         <div class="box3">
  69.             <h2>我是内容3标题</h2>
  70.         <p class="p1" style="background-color: brown;">我是内容3、我是内容3、我是内容3、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  71.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  72.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  73.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  74.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  75.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  76.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  77.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  78.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  79.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  80.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  81.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是我是内容3、我是内容3、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  82.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  83.         </p></div>
  84.         <div class="box4">
  85.             <h2>我是内容4标题</h2>
  86.         <p class="p1"  style="background-color: lawngreen">我是内内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  87.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  88.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  89.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  90.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  91.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容容4、我是内容4、我是内容4、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  92.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  93.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  94.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  95.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  96.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  97.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  98.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容是内容是内容4、我是内容4、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  99.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容是1、我是内容是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  100.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  101.         </p></div>
  102.         <div class="box5">
  103.             <h2>我是内容5标题</h2>
  104.         <p class="p1"  style="background-color: brown;">我是内容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  105.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  106.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  107.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  108.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  109.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  110.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  111.             我是内容1、我是内容1、我是内容1、我是内容1容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  112.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  113.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  114.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  115.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  116.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容容5、我是内容5、我是内容5、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  117.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  118.             我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、我是内容1、
  119.         </p></div>
  120.     </div>
  121. </body>
  122. </html>


Correcting teacher：PHPzPHPz

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
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！