发表于： 2016-04-20 23:06:14
1 1729
今日完成
调试已做好的九宫格
明天计划
尝试F12和其他调试
问题
其实这一段时间没怎么投入时间，工作再加上家庭的原因，时间很少。把九宫格雏形做出来后，还是有很多地方不明白，糊里糊涂的。因为在九宫格里加了点文字，所以这段时间又看了一遍HTML和CSS，还是很多细节不明白，比如：
1. 对文字设置的line-height,在九宫格里怎么去具体实现？
2. 设置的margin是2.5px, 相邻的九宫格应该是合并成2.5px. 但为什么实际的margin好像没有合并，而是相加成了5px,好奇怪？
3. 字符如何在九宫格中按照自己的意愿来合理布局？
4. CSS中类似PS的图层概念的原理？
5. 文档流的布局原理？
6. 定位的原理还不明白，感觉那个piosition:relative,加不加的效果是一样的？
收获
现在好点，对盒模型的概念有点感觉了，似乎有点明白了做九宫格的好处和目的！
另外，自己把九宫格的背景换成白色，居然让九宫格有了点手绘的风格，呵呵~
现在的代码
附上自己现在的代码，希望各位师兄姐，师叔，师祖狠狠拍砖，先谢过了！:)
-----------------------------------
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#viking{
width: 300px;
height: 300px;
margin: auto;
padding:10px;
background-color:#fff;
border-radius:7px;
box-shadow: .05px .05px .05px .05px;
text-align: center;
}
.check{
position:relative;
width: 60px;
height: 60px;
padding: 17.5px;
margin: 2.5px;
background-color:orange;
border-radius: 5px;
float:left;
line-height:60px;
font-family: Microsoft Yahei;
font-size: 5px;
box-shadow: 0.001px 0.001px 0.01px 0.001px;
}
p{
color: red;
font-family:microsoft yahei;
}
</style>
</head>
<body>
<div id="viking">
<div class="check">我</div>
<div class="check">貌</div>
<div class="check">似</div>
<div class="check">做</div>
<div class="check">好</div>
<div class="check">了</div>
<div class="check">九</div>
<div class="check">宫</div>
<div class="check">格</div>
</div>
<p><b>是吗？</b></p>
</body>
</html>
------------------------------------------------------------
返回列表
评论