发表于： 2019-11-22 00:01:37
3 884
两种代码 （另外一种自己100%看懂了）
1.困难一：九宫格开始理解的是建立九个div就可以了，再加上浮动标签辅助，圆角10%就和任务一样了，系统自动选择的id选择器，在HTML里写了9个div，每3个用了一个换行标签br，在CSS里设置了div —height 、width、 background-color ，border-radius并float九个div，但是盒子怎么浮动 就像魔方始终有两个盒子连不到一起，输入div系统默认为id选择器。
2.问题解决途径：通过百度搜索寻找方法 实操之后完成，代码看懂80%，css里面的有些看不懂由来，接着百度中。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>任务一</title>
<style type="text/css">
.box-wrap {
text-align: center;
background-color: #d4d4f5;
overflow: hidden;
}
<html>
<head>
<meta charset="utf-8" />
<title>任务一</title>
<style type="text/css">
.box-wrap {
text-align: center;
background-color: #d4d4f5;
overflow: hidden;
}
.box-wrap>div {
width: 31%;
padding-bottom: 31%;
margin: 1%;
border-radius: 10%;
float: left;
background-color: orange;
}
</style>
</head>
<body>
<div class="box-wrap">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
</html>
width: 31%;
padding-bottom: 31%;
margin: 1%;
border-radius: 10%;
float: left;
background-color: orange;
}
</style>
</head>
<body>
<div class="box-wrap">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
</html>
返回列表
评论