发表于: 2016-06-09 10:05:05
4 1045
今天完成的事情:完成了任务3的自适应。今天计划看完师兄师姐们官网和论坛任务1-3的日报。
明天计划的事情:完成任务4
遇到的问题:
Q1:我之前是通过float往左移动来排版,通过width设置100%来使元素各占一行。头部文字和图片没有自适应。主体部分的图片没有自适应。
A1:通过看日报和代码,调试找到了解决方法。
1、解决头部显示自适应问题:给“魔镜”添加display:inline-block属性。给整个头部设置高度5em。
- display:inline-block:简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。低版本IE不支持属性。参考链接(http://www.cnblogs.com/KeithWang/p/3139517.html)
2、解决主体部分自适应问题:给图片设置宽度,从100%改为9%和29%。从而实现图片缩放功能。(其实主体最下面的两个图片设置了50%而成功缩放,自己还没意识到。直到看到了师兄师姐的代码,宝宝心里苦啊。)
收获:一个网页可以通过各种CSS设置显示成一个样子,感觉真的很深。就像自己写的代码,设置为50%缩放仅是为了排版,而并没有往自适应的方面去想。得多看日报,多看代码,多谢代码。需要整理下自己这段时间学的东西。任务3写的代码感觉有点乱,东拼西凑写完的。虽然都知道每个标签的意思,但是对于标签的影响范围还有些迷惑。
疑惑:
1、我的主体部分DIV需要设置overflow:hidden?我按F12调试的时候,如果不加此标签则显示div#main 808px * 0px。为啥高度会是0?
2、感觉自己的代码看起来不是很舒服,em和%混着用的,看着乱糟糟的。感觉自己的编码设计思想有问题,F12的时候调试自己分块和胶布一样,东一块西一块的。看着好惨!!!如果图片大小不一致,是否应该各让一个图片(就如主体部分的返回和葡萄藤log两个图像)各占一行呢?或者对于此问题有其他好的建议呢?
评论