<!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