首页 > 其他分享> > 响应式网页编写学习

响应式网页编写学习

2022-03-27 12:00:50 作者：互联网

样式

注意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>

页面效果

学习是一个循序渐进的过程，欲速则不达！

上次看了一遍，效果不大，这次收获很多。

标签：box,sizing,网页,响应,padding,width,background,10px,编写
来源： https://www.cnblogs.com/xiaohuasan/p/16062384.html