发表于： 2019-11-24 18:23:49
5 951
今天解决的问题：
九宫格高度设置好之后总是跟随屏幕大小变化，使格子不能满足任务中的要求。之后找到了padding-bottom元素的应用方法，很好的解决了这个问题。
完善了九宫格。
代码如下：（希望各位师兄指点）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>九宫格宽高自适应</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
height:auto;
width:auto;
}
.demo1,.demo2,.demo3,.demo4,.demo5,.demo6,.demo7,.demo8,.demo9{
height:0px;
width:0px;
background:orange;
float:left;
padding-bottom:31%;
padding-left:31%;
margin:1%;
border-radius:20%;
}
</style>
</head>
<body>
<div>
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
<div class="demo6"></div>
<div class="demo7"></div>
<div class="demo8"></div>
<div class="demo9"></div>
</div>
</body>
</html>
明天的任务：
了解任务二，并着手去完成。
返回列表
评论