发表于: 2018-04-24 00:00:04

1 262


今天完成的事;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检测代码有错的详细,可以转换成中文吗?









返回列表 返回列表
评论

    分享到