发表于： 2016-12-18 22:10:09
1 534
今天完成的事情：
先说下我的任务一思路吧，就是三个div竖着排列，然后每个div在横向分成三个小的div，这样就基本画出模型了，然后再把每个div中间隔相同大小的间隙。之后再居中显示。但是我看了下师兄们的作品，完全跟我是两个世界。。。。。
具体今天完成了什么，我也说不上，把代码搬上来吧。
<!DOCTYPE html>
<html>
<head>
<title>九宫格布局</title>
<style>
#headerone,#headertwo,#headthree{
width:200px;height:200px;background:orange;float:left;
}
#mineone,#minetwo,#minethree{
width:200px;height:200px;background:blue;float:left;
}
#footerone,#footertwo,#footerthree{
width:200px;height:200px;background:red;float:left;
}
#mineone,#footerone{
clear:left;
}
</style>
</head>
<body>
<div id="containter">
<div id="header">
<div id="headerone">1-1</div>
<div id="headertwo">1-2</div>
<div id="headthree">1-3</div>
</div>
<div id="mine">
<div id="mineone">2-1</div>
<div id="minetwo">2-2</div>
<div id="minethree">2-3</div>
</div>
<div id="footer">
<div id="footerone">3-1</div>
<div id="footertwo">3-2</div>
<div id="footerthree">3-3</div>
</div>
</div>
</body>
</html>
效果展示
在群里面师兄们指出了很多错误，待会在收货中列举吧。
在拿出师兄放出来的代码，真的是两重天啊。。。。
明天计划的事情：我的日报不是说每天都能坚持写的，毕竟时间精力有限，天天上班。。。哎，好怀念学生时代啊。（扯远了）
遇到的问题：虽然说代码很乱很不规范，并且按照要求来我的这个屁都算不上。还是能找到点问题的。比如居中显示，我不会，尝试了下margin-left，margin-right
虽然可以往中间凑，但是不能够达到居中的效果。还有就是不能够让每一个div隔开，到现在还没有思路。可能是我的代码本身就是错的吧。
群里边都在用盒子做，调用样式表，我还没搞明白我这个现在到底是什么鬼。
收获：1.div分子元素和父元素。
2.背景色要用标准语言background-color而不是我上面写的background
3.css尽量用class而不是我所用的id避免以后跟js等等冲突
好了，今天的日报就到这了。最后说一句，我越来越懵逼了......
返回列表
评论