学成在线案例感受

## header头部



布局上：用盒子div包裹，设置好版心

header确定了一个大盒子的宽高

### logo部分

一个·div的盒子，内部插入一张图片

### nav部分


首先nav的盒子没有设置宽度，也方便后续添加

a被ul里的小li包含

整体的要在一行显示，所以要先给.logo加浮动，然后在给.nav加浮动

针对a要在一行显示，给li加浮动，而不是给a加浮动

然后再设置内边距和li的外边距

### search部分

一整个盒子先确定宽高和距离--nav的左外边距，确定好之后，再确定里面的内容

又分左右两块，左边input,右边button

input和button是行内块元素，中间也有空隙

button按钮设置时，不要插入图片，会覆盖到图片，应该设置背景图

button的按钮本身也有一个默认的边框，在设置中也要去掉

### user部分

整体一个div盒子，不用设置宽度，因为名字可能会变

左边一个img图表，右边文字

并不是说一个大盒子box设置宽高了之后，子盒子1设置宽高之后，剩下的就是高度就是子盒子2的，这个想法是错误的

在没有设置子盒子2的高度的情况下，盒子2的高度是根据盒子的内容来自动变化的

## banner制作部分


### subnav部分


制作时，用ul li a包含，当时给每个小li没有指定高度，设置了一个margin-bottom的外边距，然后给ul设置一个...忘了

注意外边距塌陷问题，还有设置了宽高，再设置内边距会变大

’‘>’‘标签用span,然后右浮动14

### course部分


上下两块

## 精品模块goods部分


### good-item部分

ul下的小li里包含a

可以给a设置左右的内边距以及外边框，这样就可以在父盒子里设置统一的行高，让他居中对齐

我在做的时候，也是先给父盒子统一设置行高，但是给小li设置了外边框时，边框=行高，不符合要求

所以行内元素也是有内边距和边框的

## box模块



### box-bd

box-bd部分不用给高度，自动撑大

在设置盒子宽度的时候，可以给bd设置成1215

这样的话，第一行第五个小li有右边距，也不会自动换行了，反正也看不见

#### li


做项目时，小li里面一行一行来写，从上往下写，先写个h4标题，给个上下左右外边距，

后面的一行就写了

我当时在写下面模块时，文字和高级先给了一个div盒子包裹，设置内边距，然后里面的h4设置宽度高度后，容易不准确，让下面的高级部分占得位置小，。。。。。。