div CSS 前端页面开发_妙用padding

前端开发pc页面|阿里巴巴前端开发面试|前端页面开发软件

面试题:写出必要html/css,一张800*600的背景图适配手机,要求宽度填满,保持宽高比,【只能写htmlcss】。
最近偶然间看到了padding如果添加百分比的值,它是参考宽度设定的,而浏览器宽度可以用来作单位参考,高度却不可以。
根据面试题的要求我们设置width:100%;height:75%; 这时候由于height并没有参考系,所以设置无效。
可以使用padding-top或者padding-bottom撑开容器的高度,padding-top:75%; 这样就保证了使用百分比控制在不同设备上,宽高比为800:600。
padding撑高度

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <title>前端开发是不是先写静态页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .bg {
            width: 100%;
            /*height: 75%;*/
            padding-top: 75%;
            background: url(‘http://www.bizhiwa.com/uploads/allimg/2011-12/17102G1-1-23634.jpg’) 0 0 no-repeat;
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
    <div class=”bg”></div>
</body>
</html>

代码效果预览可能不是太好看效果,可以打开全屏或者复制代码,再用chrome模拟器来查看。
这里给background-size的纵向值也设置为100%;是因为网络图片很难控制图片大小正好是800600,感兴趣的同学可以自己改一张800600的图本地测试一下,这样就只需要写background-size: 100%,添加横向的背景自适应即可。

前端开发页面跳转|开发一个前端需要多少钱|服务器开发好还是前端开发好

» 本文来自:前端开发者 » 《div CSS 前端页面开发_妙用padding》
» 本文链接地址:https://www.rokub.com/4109.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!