HTML布局

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> //元数据标签
<title>3 colum layout</title>
<link rel="stylesheet" href="css/3col.css">  //引入外部CSS样式
</head>
<body>
<div class="left">left</div>
<div class="main">main</div>
<div class="sider">sider</div>
</body>
</html>

3列布局示例HTML

@charset "UTF-8";
//标签选择器
body{
    margin: 0;  //外边距0
    padding: 0; //内边距0
}
//类选择器
.left{
    background-color:#eee;
    width:19.99999%;
    float: left;
}

.main{
    background-color:#555;  //背景颜色
    width:59.99999%;  // 宽度百分比
    float: left;   //左浮动
    height: 900px;  //高度
}

.sider{
    background-color:#999;
    width:19.99999%;
    float: left;
}

//媒体选择器
@media (max-900px) {  //最大900
    .main{
        width:100%;
    }
    .left,
    .sider{
        display: none;  //不显示
    }
}

3列布局CSS

相关阅读:
java多线程-阻塞队列BlockingQueue
java多线程-ThreadLocal
JZ-C-26
JZ-C-25
JZ-C-24
JZ-C-23
JZ-C-22
JZ-C-21
JZ-C-20
JZ-C-19

原文地址：https://www.cnblogs.com/TangGe520/p/10409744.html