发表于： 2016-03-31 22:35:35
1 1883
今天完成的事情：
写了一个简单的九宫格布局，利用了float跟clear，还有div，学会了使用嵌入式样式表
但跟范例图片有些差距，范例图片的每个div有棱角，不知怎么设置；范例图片border貌似是半透明的，搞了半天没搞清怎么弄，整了个黑黑的框框，哎
明天计划的事情：
虽然任务一不太理想，但是在这上面已经耗了太多时间，是该开始进行任务2了，任务1中的有些疑问看看以后能不能解决
养成随手记笔记的习惯
突然想起忘记写的一些事，上手写代码才发现，原来如果不特殊处理，一个div是独占一行的，用了float才让它排列起来；clear似乎是跟float作对的，当不想让第四个div继续排列时，就设置个clear，让它的左边不可以出现浮动，它自己就乖乖的跑下一行去了，，，也许这个方法有点笨，我自己都觉得，但目前似乎只能做到这个程度了，要睡觉了，明天要上班，哎，好想直接辞职
贴代码，用webstorm写的，求鞭笞：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九宫格布局</title>
<style type="text/css">
div.tm,div.tr,div.mm,div.mr,div.bm,div.br{
width:100px;
height:100px;
background:#F93;
margin:2px;
float:left;
}
div.tl,div.ml,div.bl{
width:100px;
height:100px;
background:#F93;
margin:2px;
float:left;
clear:left;
}
div.bigbox{
width:318px;
height:318px;
background:transparent;
padding:5px;
border:solid;
}
</style>
</head>
<body>
<div class="bigbox">
<div class="tl"></div><div class="tm"></div><div class="tr"></div>
<div class="ml"></div><div class="mm"></div><div class="mr"></div>
<div class="bl"></div><div class="bm"></div><div class="br"></div>
</div>
</body>
</html>
返回列表
评论