一、代码实战

（一）拉钩网前端项目实战01--网站整体布局分析

csdn网址：editor.csdn.net/md/?article…

（二）拉钩网前端项目实战02--头部header设计

csdn网址：editor.csdn.net/md/?article…

（三）拉钩网前端项目实战02--search和banner部分设计

csdn网址：editor.csdn.net/md/?article…

（四）拉钩网前端项目实战04--banner和content设计

csdn网址：editor.csdn.net/md/?article…

二、知识点总结

(一）清除默认样式

/* 清除默认样式 */
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}

（二）通用样式

// 通用样式
.main{
    width: 1200px;
    margin: 0 auto;
}

.fl{
    float: left;
}
.fr{
    float: right;
}

.clearFixed:after{
    content: '';
    display: block;
    clear: both;
}

（三）CSS Position（定位）

position属性指定了元素的定位类型。元素可以使用顶部、底部、左侧和右侧的定位属性。这些属性无法工作，除非先设定position属性。他们也有不同的工作方式。这取决于定位方法。

static定位

元素的默认值，即没有定位，静态元素不会受到top、bottom、left、right影响。

fixed定位

元素的位置相对于浏览器窗口是固定位置。即使是滚动的它也不会移动。

relative定位

相对定位是相对其正常位置，移动相对定位元素，但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位的容器块。

absolute定位

绝对定位的元素的位置相对于最近已定位的父元素，如果元素没有已定位的父元素，那么它的位置相对于。

（四）BFC

什么是BCF

BCF特点

如何触发BFC

BFC的应用场景

1、解决边距重叠问题

2、用于自适应两栏布局

3、清除浮动

4、结局高度塌陷