经典圣杯双飞翼布局

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

 

posted @   奔走的松鼠  阅读(242)  评论(0)  编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示