发表于： 2016-04-08 14:17:10
2 1369
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style>
div{
height: 335px;
width: 335px;
background: white;}
#a{
height: 100px;
width: 100px;
background: orange;
float: left;
margin: 7.5px 2.5px 2.5px 7.5px ;
border-radius: 10px;
}
#b{
height: 100px;
width: 100px;
background: orange;
float: left;
margin: 7.5px 2.5px 2.5px 2.5px;
border-radius: 10px;
}
#c{
height: 100px;
width: 100px;
background: orange;
float: left;
margin: 7.5px 17.5px 2.5px 2.5px;
border-radius: 10px;
}
#d{
height: 100px;
width: 100px;
background:orange;
float: left;
margin:2.5px 2.5px 2.5px 7.5px;
border-radius: 10px;
}
#e{
height: 100px;
width: 100px;
background:orange;
float: left;
margin: 2.5px;
border-radius: 10px;
}
#f{
height: 100px;
width: 100px;
background:orange;
float: left;
margin: 2.5px 17.5px 2.5px 2.5px;
border-radius: 10px;
}
#g{
height: 100px;
width: 100px;
background: orange;
float: left;
margin: 2.5px 2.5px 17.5px 7.5px;
border-radius: 10px;
}
#h{
height: 100px;
width: 100px;
background: orange;
float: left;
margin: 2.5px 2.5px 17.5px 2.5px ;
border-radius: 10px;
}
#i{
height: 100px;
width: 100px;
background: orange;
float: left;
margin: 2.5px 17.5px 17.5px 2.5px;
border-radius: 10px;
}
</style>
</head>
<body>
<div>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
<div id="f"></div>
<div id="g"></div>
<div id="h"></div>
<div id="i"></div></div>
</body>
</html>
今天完成的事情：通过1-3天的学习，完成了任务一，同时学会了解了基本的html和盒子模型，border和margin，学会了父div和子div的关系。
明天计划的事情：继续努力，兴趣越来越浓了，激动不已，明天开始做任务二，坚持不懈，一直做到最后
遇到的问题：border还不是很清楚，还略有疑问
收获：通过任务一我可以做一个网页的基本格局了
返回列表
评论