入門筆記 Day six

時間 2019-12-05

標籤入門筆記 day 简体版

原文原文鏈接

經典佈局方案

上中下一欄式

header ：頭部
section：中間
footer：底部

<style>
    body{
        margin: 0;
        font-size: 20px;
        text-align: center
    }
    .wrap{
        width:900px;
        margin: 0 auto;
    }
    #header{
        height:100px;
        background:red;
    }
    #main{
        height: 500px;
        background: green;
    }
    #footer{
        height: 80px;
        background: yellow;
    }
</style>
<body>
    <header id="header" class="wrap">1</header>
    <section id="main" class="wrap">2</section>
    <footer id="footer" class="wrap">3</footer>
</body>
複製代碼

左右兩欄式

1、混合浮動+普通流bash

<style>
     .wrap{
         margin: 0 auto;
         width: 900px;
     }
     #left{
         width: 200px;
         height: 500px;
         background: red;
         float: left;
     }
     #right{
         height: 500px;
         margin-left: 200px;
         background: green;
     }
    </style>
</head>
<body>
   <div class="wrap">
        <aside id="left"></aside>
        <section id="right"></section>
   </div>
</body>
複製代碼

2、純浮動ide

<style>
     .wrap{
         margin: 0 auto;
         width: 900px;
         overflow: hidden;
     }
     #left{
         width: 200px;
         height: 500px;
         background: red;
         float: left;
     }
     #right{
         width: 700px;
         height: 500px;
         background: pink;
         float: left;
     }
    </style>
</head>
<body>
   <div class="wrap">
        <aside id="left"></aside>
        <section id="right"></section>
   </div>
</body>
複製代碼

3、絕對定位式佈局

<style>
     .wrap{
         margin: 0 auto;
         width: 900px;
         position: relative;
     }
     #left{
         width: 200px;
         height: 500px;
         background: red;
         position: absolute;
         top: 0;
         left: 0;
     }
     #right{
         width: 700px;
         height: 500px;
         background: pink;
         position: absolute;
         top: 0;
         right: 0;
     }
    </style>
</head>
<body>
   <div class="wrap">
        <aside id="left"></aside>
        <section id="right"></section>
   </div>
</body>
複製代碼

左右兩欄加頁眉頁腳

<style>
     .wrap{
         margin: 0 auto;
         width: 900px;
         overflow: hidden;
     }
     #header{
         height: 100px;
         background: yellow;
     }
     #main{
         height: 500px;
         background: red;
     }
     #footer{
         height: 80px;
         background: green;
     }
     #left{
         width: 200px;
         height: 100%;
         float: left;
         background: #ccff22;
     }
     #right{
         width: 700px;
         height: 100%;
         float: right;
         background: pink;
     }
    </style>
</head>
<body>
   <header id="header" class="wrap"></header>
   <section id="main" class="wrap">
        <aside id="left"></aside>
        <div id="right"></div>
   </section>
   <footer id="footer" class="wrap"></footer>
</body>
複製代碼

左中右三欄

<style>
     .wrap{
         margin: 0 auto;
         width: 80%;
     }
     #left{
         width: 200px;
         height: 500px;
         background: red;
         float: left;
     }
     #right{
         width: 200px;
         height: 500px;
         background: green;
         float: right;
     }
     #main{
         height: 500px;
         margin: 0 210px;
         background: pink;
         
     }
    
    </style>
</head>
<body>
   <div class="wrap">
       <aside id="left"></aside>
       <aside id="right"></aside>
       <section id="main"></section>
   </div>
</body>
複製代碼

左中右三欄之雙飛翼

<style>
     .wrap{
         margin: 0 auto;
         width: 80%;
     }
     #main{
         width: 100%;
         float: left;
         background:pink;
     }
     #left{
         width: 200px;
         float: left;
         height: 500px;
         background: red;
         margin-left: -100%;
     }
     #right{
         width: 200px;
         float: left;
         height: 500px;
         background: green;
         margin-left: -200px;
     }
     .content{
         height: 500px;
         margin: 0 200px;
     }
    </style>
</head>
<body>
   <div class="wrap">
       <section id="main">
           <div class="content">1</div>
       </section>
       <aside id="left">2</aside>
       <aside id="right">3</aside>
       
   </div>
</body>
複製代碼

左中右三欄加頁眉頁腳

<style>
        .wrap{
            margin: 0 auto;
            width: 900px;
        }
        #header{
            height: 100px;
            background: blue;
        }
        #main{
            height: 500px;
            background: red;
        }
        #footer{
            height: 80px;
            background: pink;
        }
        #middle{
            width: 100%;
            float: left;
            
        }
        #left{
            width: 200px;
            height: 100%;
            background: green;
            float: left;
            margin-left: -100%;
        }
        #right{
            width: 200px;
            height: 100%;
            background: green;
            float: left;
            margin-left: -200px;
        }
        .content{
            height: 500px;
        }
    </style>
</head>
<body>
  <header id="header" class="wrap">1</header>
  <section id="main" class="wrap">
      <section id="middle">
          <div class="content">2</div>
      </section>
      <aside id="left">3</aside>
      <aside id="right">4</aside>
  </section>
  <footer id="footer" class="wrap">5</footer>
</body>
複製代碼

1. 入門筆記 Day five
2. 入門筆記Day one
3. 入門筆記 Day four
4. 入門筆記 Day three
5. 紀中學習之（第六季）DAY SIX
6. python入門day 1
7. MATLAB入門 day 01
8. vue入門（first day）
9. MATLAB入門 day 02
10. 筆記：Six Pointers for Creating Strong Operational Business Values
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• Tomcat學習筆記（史上最全tomcat學習筆記）
• YAML 入門教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。