响应式网页编写学习一
样式
注意media 中width 属性设置，那是为了页面大小连贯，不出现滚动条。最后一个设置居中，其他都是100%。
padding: 10px; box-sizing: border-box;
加上面两个样式是为了显示内容好看。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </meta> <title> 响应页面制作 </title> <style> * { margin: 0; padding: 0; } .box { width: 800px; height: 200px; background: red; margin: 0 auto; } @media (max-width:500px) { .box { background: yellow; /*内容没有随大小变化*/ width: 100%;
padding: 10px;
box-sizing: border-box;
} } @media (min-width:500px) { .box { background: green; width: 100%;
padding: 10px;
box-sizing: border-box;
} } @media (min-width:800px) { .box { background: red; width: 100%;
padding: 10px;
box-sizing: border-box;
} } @media (min-width:1100px) { .box { background: blue; width: 1100px; margin: 0 auto;/*此时才设置居中*/
padding: 10px;
box-sizing: border-box;
} } </style> </head> <body> <div class="box"> 2、给予机会和空间，但不是无限制的。 我们不是小学老师，不对成年人的心智启迪负责。 3、不要做无谓的努力 比如被某种传销骗局洗脑，比如相信某种伪科学，其实这种情况很常见。 有些人会很努力的试图说服对方，试图解救对方。 基本上，成功的几率是非常低的。 2、给予机会和空间，但不是无限制的。 我们不是小学老师，不对成年人的心智启迪负责。 3、不要做无谓的努力 比如被某种传销骗局洗脑，比如相信某种伪科学，其实这种情况很常见。 有些人会很努力的试图说服对方，试图解救对方。 基本上，成功的几率是非常低的。 2、给予机会和空间，但不是无限制的。 我们不是小学老师，不对成年人的心智启迪负责。 3、不要做无谓的努力 比如被某种传销骗局洗脑，比如相信某种伪科学，其实这种情况很常见。 有些人会很努力的试图说服对方，试图解救对方。 基本上，成功的几率是非常低的。 2、给予机会和空间，但不是无限制的。 我们不是小学老师，不对成年人的心智启迪负责。 </div> </body> </html>
页面效果
学习是一个循序渐进的过程，欲速则不达！
上次看了一遍，效果不大，这次收获很多。
