浅情孤唐

导航

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-width:900px) {  //最大900
    .main{
        width:100%;
    }
    .left,
    .sider{
        display: none;  //不显示
    }
}

3列布局CSS

posted on 2019-02-20 22:41  浅情孤唐  阅读(259)  评论(0)  编辑  收藏  举报