2019-04-20

三栏布局

代码如下:

<!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>三栏布局</title>
    <style>
        #content::after {
            content: '';
            display: block;
            clear: both;

        }

        .aside1 {
            width:200px;
            height:500px;
            background:red;
            float:left;
        }
        .aside2 {
            width:200px;
            height:500px;
            background:blue;
            float:right;
        }

        .main {
            margin:0 210px;
            height:700px;
            background:pink;

        }
        #footer {
            background:transparent;
        }
    </style>
</head>
<body>
    <div id = "content">
        <div class = "aside1"></div>
        <div class = "aside2"></div>
        <div class = "main"></div>

    </div>
    <div id = "footer"></div>

</body>
</html>

预览链接

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 两栏布局 代码如下: 预览链接
    蓝子_23d0阅读 149评论 0 0
  • 热更新实现方式: 1、使用Lua脚本编写游戏的UI或者其他逻辑,Lua是一个精悍小巧的脚本语言,可以跨平台运行解...
    点读笔_e6dc阅读 548评论 0 0
  • 目前大家都在说微服务,其实微服务不是一个名字,是一个架构的概念,大家现在使用的基于RPC框架(dubbo、thri...
    新手投资阅读 1,218评论 1 23
  • 基于物品的协同过滤算法:(item-based collaborative filtering) ItemCF的一...
    T_129e阅读 185评论 0 0
  • 我没法形容他的个人魅力,不过杜鲁门·卡波特的这句话“去想无关紧要的事,去想想风。”倒是可以把我的这种感觉表达的七七...
    GoChris阅读 412评论 0 0