* { box-sizing: border-box; } /*box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素*/ body { font: Arial; margin: 0; } .header { padding: 80px; text-align: center; background: burlywood; color: white; } .header h1 { font-size: 40px; } /*导航*/ .navbar { overflow: hidden;/*规定当内容已出发生的事情*/ background-color: #333; } .navbar a { float: left; display: block; color: white; text-align: center; padding: 14px 20px;/*设置内边距*/ text-decoration: none; } /*设置右边的链接*/ .navbar a.right { float: right; } .navbar a:hover { background-color: #ddd; color: black; } /*列容器*/ .row { display: -ms-flexbox;/*规定属性应该生成框的类型,-ms混合版弹性布局*/ display: flex;/*布局,指定这个框的布局是flex类型,弹性布局*/ -ms-flex-wrap: wrap;/*让弹性盒在必要的时候拆行*/ flex-wrap: wrap; } /*创建两个列*/ /*边栏*/ .side { -ms-flex: 30%; flex: 30%; background-color: #f1f1f1; padding: 20px; } /*主要内容区域*/ .main { -ms-flex: 70%; flex: 70%; background-color: white; padding: 20px; } /*测试图片*/ .fakeimg {/*冒充的,伪造的,填充*/ background-color: #aaa; width: 100%;/*宽度*/ padding: 20px; } /*底部*/ .footer {/*页脚*/ padding: 20px; text-align: center; background: #ddd; } /*响应式布局 - 在屏幕设备宽度尺寸小于 700px 时,让两栏上下堆叠显示*/ @media screen and (max- 700px) {/*在设置响应式的页面时需要的多些*/ .row { flex-direction: column; } } @media screen and (max- 400px) { .navbar a { float: none; width: 100%; } }