zoukankan html css js c++ java

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

查看全文

相关阅读:
StarUML
第二周周二日报
 第二周周一日报
 第一周周末报
 第一周周四日报
 第一周第三天日报
 软件开发总结
 构建之法总结
 《构建之法》第六章
 个人日志7

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