zoukankan      html  css  js  c++  java
  • 经典圣杯双飞翼布局

    1.经典的双飞翼布局,两边的盒子宽度固定,中间的内容宽度自适应,在某宝某东等一些电商平台比较常见,里面利用了margin的负边距来布局,这样使三个盒子在同一行显示。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    <style>
        body{
            outline: none;
            padding: 0;
            margin: 0;
            color: #fff;
        }
        .header {
            height: 40px;
            width: 100%;
            background-color: #a01321;
        }
        .container{
            height: 400px;
            margin: 0 200px;
        }
        .left{
            width: 200px;
            height: 400px;
            background-color: green;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .center{
            float: left;
            height: 400px;
            width: 100%;
            background-color: red;
        }
        .right{
            width: 200px;
            height: 400px;
            background-color: blue;
            float: left;
            margin-left: -200px;
            position: relative; 
            right: -200px; 
        }
        .footer{
            height: 40px;
            background-color: black;
        }
    </style>
    </head>
    <body>
        <header class="header"><h4>jfkdslajkfk.s</h4></header>
        <div class="container" >
            <div class="center">2、文件可能已经被加载过并保存有缓存
                    一些通用的js库或者是css样式库,如jQuery,在网络中的使用是非常普遍的。当一个用户在浏览你的某一个网页的时候,很有可能他已经通过你网站使用的CDN访问过了其他的某一个网站,恰巧这个网站同样也使用了jQuery,那么此时用户浏览器已经缓存有该jQuery文件(同IP的同名文件如果有缓存,浏览器会直接使用缓存文件,不会再进行加载),所以就不会再加载一次了,从而间接的提高了网站的访问速度
                    3、高效率
                    你的网站做的再NB也不会NB过百度NB过Google吧?一个好的CDNs会提供更高的效率,更低的网络延时和更小的丢包率。
                    4、分布式的数据中心
                    假如你的站点布置在北京,当一个香港或者更远的用户访问你的站点的时候,他的数据请求势必会很慢很慢。而CDNs则会让用户从离他最近的节点去加载所需的文件,所以加载速度提升就是理所当然的了。
                    5、使用情况分析
                    一般情况下CDNs提供商(如百度云加速)都会提供数据统计功能,可以了解更多关于用户访问自己网站的情况,可以根据统计数据对自己的站点适时适当的做出些许调整。
                    6、有效防止网站被攻击
                    一般情况下CDNs提供商也是会提供网站安全服务的
            </div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
        <footer class="footer">header</footer>
    </body>
    <script type="text/javascript">
    </script>
    </html>
  • 相关阅读:
    Microsoft Visual C++ Compiler for Python
    ArcGIS Server的Tile的松散型存储(Exploded)
    git下载指定版本的代码
    C#+SharpMap的相关代码
    C#+MapServer相关代码
    WebGIS点要素渲染性能测试
    Docker的4种网络模式
    AngularJS中的指令全面解析(转载)
    风云2号云图Mosaic Dataset处理
    查找错误的等值线中的高程点
  • 原文地址:https://www.cnblogs.com/liweiz/p/11592932.html
Copyright © 2011-2022 走看看