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

任务: http://ife.baidu.com/task/detail?taskId=4 效果图: 有用的参考资料: CSS3水平垂直居中对齐:http://www.w3cplus.com/css/vertically-center-content-with-css CSS Clip属性:http://www.w3school.com.cn/cssref/pr_pos_clip.asp CSS3圆环倒计时效果(帮助我回忆起了Clip这个东西):http://www.yangqq.com/web/css3demo/index.html CSS居中教程:https://css-tricks.com/centering-css-complete-guide/ 定位详解(关于position的种种):http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html 思路: 灰色矩形使用relative定位,然后设定left与top为50%,由于已经知道框的大小,用margin把长款的一半距离补回来就行了。 两个扇形在矩形的div内部,使用绝对定位,用border-radius做圆角,clip:rect剪切。 代码: CodePen: http://codepen.io/idailylife/full/QNqJXe/

 

 

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

恩,很遗憾没有赶上报名,因为是事后好几天才知道的。好在他们公开了练习题已经微信通知,所以还是可以跟着练一练哒!就是得不到别人的评论了,很忧伤,但是可以看每一队提交的作业,挺好。 给出我自己的实现吧,作为“对于有过页面实践,但没做过太复杂页面的同学”,我先选了第三题。 效果图: 实现: 三栏布局使用的是float,没有用到相对定位。文字在框里的垂直居中,找到的是这里的方法。 前端团队提供的有关清除浮动的信息很给力:http://zh.learnlayout.com/clearfix.html,里面还有些很实用的技巧。 目前的缺陷是,强制设置了min-width,移动界面不适配,我还要慢慢学习啊! 代码: CodePen: https://codepen.io/idailylife/pen/pyWLvq HTML

CSS