百度前端技术学院 任务四:定位和居中问题

任务:

http://ife.baidu.com/task/detail?taskId=4

效果图:

屏幕快照 2016-04-03 下午5.54.13

有用的参考资料:

思路:

灰色矩形使用relative定位,然后设定left与top为50%,由于已经知道框的大小,用margin把长款的一半距离补回来就行了。

两个扇形在矩形的div内部,使用绝对定位,用border-radius做圆角,clip:rect剪切。

代码:

CodePen: http://codepen.io/idailylife/full/QNqJXe/

 

 

百度前端技术学院 任务三 HTML、CSS布局入门,三栏式布局的实践

恩,很遗憾没有赶上报名,因为是事后好几天才知道的。好在他们公开了练习题已经微信通知,所以还是可以跟着练一练哒!就是得不到别人的评论了,很忧伤,但是可以看每一队提交的作业,挺好。

给出我自己的实现吧,作为“对于有过页面实践,但没做过太复杂页面的同学”,我先选了第三题

效果图:

屏幕快照 2016-04-02 下午6.42.20

实现:

三栏布局使用的是float,没有用到相对定位。文字在框里的垂直居中,找到的是这里的方法。

前端团队提供的有关清除浮动的信息很给力:http://zh.learnlayout.com/clearfix.html,里面还有些很实用的技巧。

目前的缺陷是,强制设置了min-width,移动界面不适配,我还要慢慢学习啊!

代码:

CodePen: https://codepen.io/idailylife/pen/pyWLvq

HTML

CSS