发表于： 2017-03-02 21:13:45
3 1211
今天完成的事情：
1，学会了盒子模型，学会了float和clear的用法,
2，学会了float和clear的用法，clear只能对本元素起作用，影响不到周围元素，
3，学会了用css给html添样式，但离不开书本。
4，完成了九宫格 ，在网上找了好些个资料想尽量接近任务1
<!DOCTYPE html>
<html>
<head>
<title>九宫格</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<style type="text/css">
p{background: yellow;width: 28%;height:0;padding-top:28%; float: left;margin:2.66667%;border-radius:17% ;}
.t4{clear: left;}.t7{clear: left;}
</style>
</head>
<body>
<div class="fu">
<p class="t1"></p>
<p class="t2"></p>
<p class="t3"></p>
<p class="t4"></p>
<p class="t5"></p>
<p class="t6"></p>
<p class="t7"></p>
<p class="t8"></p>
<p class="t9"></p>
</div>
</body>
</html>
师兄有空帮我看看提点意见谢谢，
5，学了chrome的开发者模式，
6，任务1要求的学习资料都过了一遍，九宫格要用的内容看了又看。。
明天计划的事情：1，完成css任务1
2 ， 巩固基础知识
3，开始做任务2
遇到的问题：1，弄出9个正方形却是一竖条，用了float后变成一横条？，翻书查资料后发现要用clear，再纸上画了半天，终于弄出九宫格
2，关于正方形怎么自适应宽度？网上有几种方法都看不懂，上面用的方法勉强能明白，让元素高度为0，那么 padding-top 或 padding-bottom也就等于了width， 再利用%就成了。
收获：学会了盒子模型，clear用法，学到了不少知识.
返回列表
评论