入门笔记 Day six

曾经终败给现在 2022-01-20 09:37 127阅读 0赞

# 经典布局方案 #

## 上中下一栏式 ##

*  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>
    复制代码

## 左右两栏式 ##

一、混合浮动+普通流

<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>
    复制代码

二、纯浮动

<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>
    复制代码

三、绝对定位式

<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>
    复制代码

发表评论取消回复

表情：

评论列表（有 0 条评论，127人围观）

还没有评论，来说两句吧...

相关阅读

相关 Day64 vue入门

博客参考地址请查询：[https://www.cnblogs.com/Michael--chen/p/11246214.html][https_www.cnblogs.com_

喜欢ヅ旅行/ 2023年08月17日 15:29/ 0 赞/ 74 阅读

相关编程之道--Book Six - Management

摘自《编程之道》将此书献给那些爱笑也爱思考的程序设计者,以及那些同程序设计者打交道的管理人员,当然他们也爱笑爱思考。编程之道--Book Five - Ma

红太狼/ 2022年09月17日 06:25/ 0 赞/ 133 阅读

相关 shell笔记day04

目录 grep sed -------------------- 正则本章学习的 grep/egrep、sed、awk grep gre

小鱼儿/ 2022年04月03日 06:48/ 0 赞/ 213 阅读

相关 day01 笔记--java入门

1.Java开发环境： 1）java编译运行过程————————常见的面试题 1.1）编译期：.java源文件，经过编译，生成.class字节码文

缺乏、安全感/ 2022年02月26日 02:06/ 0 赞/ 201 阅读

相关入门笔记 Day six

经典布局方案上中下一栏式 header ：头部 section：中间 footer：底部 <style> body{

曾经终败给现在/ 2022年01月20日 09:37/ 0 赞/ 128 阅读

相关 java day05 笔记

主要内容 1，数组的概述 2，数组的初始化 3，数组中出现的两个异常 4，数组的常用操作数组的概述 1，数组：用于储存相同数据类型数据的一个容器。

红太狼/ 2022年01月08日 00:11/ 0 赞/ 279 阅读

相关 day02笔记

1.linux环境配置阿里云yum源 linux软件包管理之 yum工具（如同pip3工具） pip3是管理python模块的工具，自动解决模块依赖，降

小咪咪/ 2021年12月14日 04:23/ 0 赞/ 389 阅读

相关 Six Quick Crystal Reports Design Tips

<table> <tbody> <tr> <td colspan="2"> <p><span><a rel="nofollow"></a></span></p

素颜马尾好姑娘i/ 2021年12月13日 16:23/ 0 赞/ 221 阅读

相关 day6笔记

主要内容二维数组面向对象概述封装二维数组每个元素都是一个一维数组的数组，就是二维数组。本质还是一个一维数组，只不过数组中的每个元素，都是一个一

野性酷女/ 2021年12月12日 06:41/ 0 赞/ 233 阅读

相关 Uninstalling six-1.4.1:

在安装virtualenvwrapper 的时候，报错了 sudo pip install virtualenvwrapper Installing coll

àì夳堔傛蜴生んèń/ 2021年06月24日 14:36/ 0 赞/ 370 阅读