发表于： 2016-03-31 19:56:07
1 1524
今天完成的事情：今天又重新研究了用div写CSS的任务1，结果终于成功了。效果图和代码放下面吧，不知道这个可以上传自己的代码什么的么！！？？
明天计划的事情：⒈再搜搜有相关手机支持和F12调试的资料？⒉准备开始完成任务2了。⒊恩，再去看看其他师兄们的任务一代码看看我的有什么可改进的地方？
遇到的问题：任务一说要支持手机和F12调试，网站上没有相关的资料，所以自己去搜的时候感觉也不知道该搜什么内容！？恩，比如支持手机是说页面能在手机上显示么？还有F12调试是用什么软件的时候用的么？？
收获：学习了用div对网页进行布局，感觉的确比我之前用table写的好多了，不过的确table还是专心用于表格更好些。还有就是关于定位的相对定位于绝对定位知识点的学习。最后格子之间的圆角竟然是用到CSS3中的圆角边框！
效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>用div块级元素来完成CSS任务1</title>
<style type="text/css">
#bigbox{
width: 600px;
height: 600px;
position: relative;
}
#smallbox1{
width: 195px;
height:195px;
background-color: orange;
border-radius: 10px;
position: absolute;
top: 0px;
left: 0px;
}
#smallbox2{
width:195px;
height:195px;
background-color: orange;
border-radius: 10px;
position: absolute;
top: 0;
left: 200px;
}
#smallbox3{
width:195px;
height:195px;
background-color: orange;
border-radius: 10px;
position: absolute;
top: 0px;
left: 400px;
}
#smallbox4{
width:195px;
height:195px;
background-color: orange;
border-radius: 10px;
position: absolute;
top: 200px;
left: 0px;
}
#smallbox5{
width:195px;
height:195px;
background-color: orange;
border-radius: 10px;
position: absolute;
top: 200px;
left: 200px;
}
#smallbox6{
width:195px;
height:195px;
background-color: orange;
border-radius: 10px;
position: absolute;
top: 200px;
left: 400px;
}
#smallbox7{
width:195px;
height:195px;
background-color: orange;
border-radius: 10px;
position: absolute;
top: 400px;
left: 0px;
}
#smallbox8{
width:195px;
height:195px;
background-color: orange;
border-radius: 10px;
position: absolute;
top: 400px;
left: 200px;
}
#smallbox9{
width:195px;
height:195px;
background-color: orange;
border-radius: 10px;
position: absolute;
top: 400px;
left: 400px;
}
</style>
</head>
<body>
<div id="bigbox">
<div id="smallbox1">1</div>
<div id="smallbox2">2</div>
<div id="smallbox3">3</div>
<div id="smallbox4">4</div>
<div id="smallbox5">5</div>
<div id="smallbox6">6</div>
<div id="smallbox7">7</div>
<div id="smallbox8">8</div>
<div id="smallbox9">9</div>
</div>
</body>
</html>
返回列表
评论