发表于: 2018-04-24 00:00:04
1 232
今天完成的事;css的常用内容看的差不多了,参考了别人的九宫格
收获:对制作九宫格有了大概的思路
明天的计划:完善九宫格
碰到的问题:对代码还是不熟练,很多东西要用的时候就想不起来了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>九宫格绘制</title>
<style>
#box{
padding-left:460px;
padding-top:140px;
width:400px;
}
#block1{
float:left;
background-color:yellow;
border:2px;
border-radius:2px;
height:100px;
width:100px;
margin-left:2px;
}
#block2{
float:left;
background-color:yellow;
border-radius:2px;
height:100px;
width:100px;
margin-left:2px;
}
#block3{
float:left;
background-color:yellow;
border-radius:2px;
height:100px;
width:100px;
margin-left:2px;
}
#block4{
float:left;
background-color:yellow;
border-radius:2px;
height:100px;
width:100px;
margin-left:2px;
margin-top:2px;
}
#block5{
float:left;
background-color:yellow;
border-radius:2px;
height:100px;
width:100px;
margin-left:2px;
margin-top:2px;
}
#block6{
float:left;
background-color:yellow;
border-radius:2px;
height:100px;
width:100px;
margin-left:2px;
margin-top:2px;
}
#block7{
float:left;
background-color:yellow;
border-radius:2px;
height:100px;
width:100px;
margin-left:2px;
margin-top:2px;
}
#block8{
float:left;
background-color:yellow;
border-radius:2px;
height:100px;
width:100px;
margin-left:2px;
margin-top:2px;
}
#block9{
float:left;
background-color:yellow;
border-radius:2px;
height:100px;
width:100px;
margin-left:2px;
margin-top:2px;
}
</style>
</head>
<body>
<div id="box">
<div id="block1">
</div>
<div id="block2">
</div>
<div id="block3">
</div>
<div id="block4">
</div>
<div id="block5">
</div>
<div id="block6">
</div>
<div id="block7">
</div>
<div id="block8">
</div>
<div id="block9">
</div>
</div>
</body>
</html>
没看出来问题在哪,还有想请教师兄,Visual Studio Code检测代码有错的详细,可以转换成中文吗?
评论