百度前端学院任务笔记（一）

Task__1&2

---

1.心得：看完《Head First HTML 与 CSS》就开始任务。结合任务二着手写了个简单的网页简历。一开始认为应该会很easy，没想到还真不怎么顺利。对元素的定位，字符间距，段落间距的掌握实在糟透了。

2.知识点：（1）垂直居中：给定元素宽度（可用①．具体像素大小；②．min-width||max-width；③．占父元素％数），和元素高度，然后再给定margin的值为“0 auto”，line-height=height。

（2）取消table元素内双边框情况：设置border-spacing值为0。或者设置border-collapse: collapse。

Task__3&4

---

1.心得：也算是踩着坑了，通篇id命名元素，没有class命名，导致样式设置起来太多重复的样式，层次关系太不明了。语义化标签命名有待提高，大部分都是拼音。。

2.知识点：（1）设置背景图像是否固定或随页面其余部分滚动。

body { background-image: url(bgimage.gif);background-attachment: fixed||scroll||inherit;}

设置背景图像固定||随其他元素滚动||继承父元素的样式。

（2）利用css画1/4圆。

给div设置成正方形，即宽高相等，设置与宽高值相等的border-radius值。

Task__5

---

1. 心得：美工实在太差，颜色搭配极low。巩固了定位的运用。

2.知识点：（1）设置如图的定位，即“备注”文本与“textarea”块在同行，想让二者在顶部对齐，可设置“备注”文本的line-height为100%。

（2）去除button按钮的灰色默认边框。

方法①：设置与button按钮background-color同色的边框；

方法②：设置outline：none。