zoukankan      html  css  js  c++  java
  • css网页布局

    经典的行布局

    1.基础的行布局

    2.行布局自适应

    3.行布局自适应限制最大宽

    4.行布局垂直水平居中

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style type="text/css">
            body{margin:0;padding: 0;color:#fff;  text-align: center;font-size: 16px}
            .header{width: 100%;height: 50px;background: #333;margin: 0 auto; line-height: 50px; position: fixed;}
            .banner{width: 800px;height: 300px;background: #30a457;margin: 0 auto;padding-top: 50px;}
            .container{width: 800px;height: 1000px;background: #4c77f2;margin: 0 auto;}
            .footer{width: 800px;height: 100px;background: #333;margin :0 auto;line-height: 100px;}
        </style>
    
    </head>
    <body>
        <div class="header">这是页面的头部</div>
        <div class="banner">这是页面的banner图</div>
        <div class="container">这是页面的内容</div>
        <div class="footer">这是页面的底部</div>
    </body>
    </html>

    经典的列布局

    1.两列布局固定    width为px

    2.两列布局自适应 width为%

    3.三列布局固定

    4.三列布局自适应

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style type="text/css">
            body{margin: 0;padding: 0;color: #fff;}
            .container{width: 90%;height: 1000px;margin: 0 auto;}
            .left{width: 60%;height: 1000px;background: #1a5acd;float: left;}
            .right{width: 40%;height: 1000px;background: #5880f9;float: right;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="left">这是页面的左侧</div>
            <div class="right">这是页面的右侧</div>
        </div>
    </body>
    </html>

    混合布局

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style type="text/css">
            body{margin: 0;padding: 0;font-size: 16px;color: #fff;text-align: center;}
            .header{width: 100%;height: 50px;background: #5880f9;margin: 0 auto;line-height: 50px;}
            .container{width: 100%;margin: 0 auto;height: 1000px}
            .container .left{width: 40%;height: 1000px;background: #67b581;float: left;}
            .container .right{width: 60%;height: 1000px;background: #123456;float: right;}
            .footer{width: 100%;height: 100px;background: #ed817e;margin: 0 auto;line-height:100px; }
        </style>
    </head>
    <body>
        <div class="header">这是页面的头部</div>
        <div class="container">
            <div class="left">这是页面的左侧</div>
            <div class="right">这是页面的右侧</div>
        </div>
        <div class="footer">这是页面的底部</div>
    </body>
    </html>

    圣杯布局

    圣杯布局是由国外的Kevin Cornell提出的一个布局模型概念

    在国内由淘宝UED的工程师传播开来

    布局要求

    1.三列布局,中间宽度自适应,两边定宽

    2.中间栏要在浏览器中优先展示渲染

    3.允许任意列的高度最高

    4.用最简单的CSS、最少的HACk语句

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style type="text/css">
            *{margin: 0;padding: 0;}
            body{min-width: 700px;}
            .header,
            .footer{float: left;width: 100%;background: #ddd;height: 40px;line-height: 40px;text-align: center;}
            .container{padding: 0 220px 0 200px;}
            .left,
            .middle,
            .right{position: relative;float: left;min-height: 300px;}
            .middle{width: 100%;background: #1a5acd;}
            .left{width: 200px;background:#f00; margin-left: -100%;left: -200px;}
            .right{width: 220px;background:#30a457;margin-left: -220px;right: -220px; }
        
        </style>
    </head> 
    <body>
        <div class="header">
            <h4>header</h4>
        </div>
        <div class="container">
            <div class="middle">
                <h4>middle</h4>
                <p>这是页面中间的内容这是页面中间的内容这是页面中间的内容</p>
            </div>
            <div class="left">
                <h4>left</h4>
                <p>这是页面左侧的内容</p>
            </div>
            <div class="right">
                <h4>right</h4>
                <p>这是页面右侧的内容</p>
            </div>
        </div>
        <div class="footer">
            <h4>footer</h4>
        </div>
    </body>
    </html>

    圣杯布局的流程方式:

    1.Middle部分首先要放在container的最前部分

    2.然后是left right

    双飞翼布局

    经淘宝UED的工程师针对圣杯布局改良后得出双飞翼布局

    去掉相对布局,只需要浮动和负边距

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style type="text/css">
            *{margin:0;padding: 0;}
            .header,
            .footer{width:100%;float:left; height: 40px;background: #ddd;text-align: center;line-height: 40px;}
            .sub,
            .main,
            .extra{float: left;min-height: 300px;}
            .main{width: 100%;min-height: 300px;}
            .main-inner{margin-left: 200px;margin-right: 220px;background: #30a457;min-height: 300px;}
            .sub{width: 200px;background: #f00;margin-left: -100%}
            .extra{width: 220px;background: #1a5acd;margin-left: -220px;}
        </style>
    </head>
    <body>
        <div class="header">
            <h4>header</h4>
        </div>
        <div class="main">
            <div class="main-inner">
                <h4>main</h4>
                <p>这是页面中间的内容这是页面中间的内容这是页面中间的内容</p>
            </div>
        </div>
        <div class="sub">
            <h4>sub 替补</h4>
            <p>这是页面左侧的内容</p>
        </div>
        <div class="extra">
            <h4>extra 多余</h4>
            <p>这是页面右侧的内容</p>
        </div>
        <div class="footer">
            <h4>footer</h4>
        </div>
    
    </body>
    </html>

    双飞翼布局的流程方式:

    main要放在最前边,其次是sub extra

    圣杯布局
    <div class="container">
        <div>中间</div>
        <div>左侧</div>
        <div>右侧</div>
    </div>
    
    双飞翼布局
    <div class="main">
        <div>中间</div>
    </div>
    <div>左侧</div>
    <div>右侧</div>
  • 相关阅读:
    JS实现在线ps功能
    Vmware 下安装linux虚拟机
    一文了解:Redis主从复制
    一文了解:Redis过期键删除策略
    一文了解:Redis的AOF持久化
    一文了解:Redis的RDB持久化
    一文了解:Redis事务
    一文了解:Redis基础类型
    并发一:Java内存模型和Volatile
    干了这杯java之ThreadLocal
  • 原文地址:https://www.cnblogs.com/code1992/p/8387381.html
Copyright © 2011-2022 走看看