第6天：DIV+CSS页面布局实战

今天我从早上9:00写代码一直写到下午18:00，写的我差点抑郁了，还好最后终于写出了一个完整页面，没有做动画效果，就是练习了一下DIV+CSS布局，做的是福务达(www.zzfwd.cn)的主页，真是不容易。然后放松了一下，收拾了一下东西，看了一会电视剧，心情才好点了。在这个例子中我总结了几点经验：

1、ul中只能放li，li是个容器，li中可以放任何标签内容。

2、在写CSS之前，记得要对标签等清除默认样式，这样在后面布局中就不会有误差。

3、任何一种效果都可以用多种方法实现，不一定要和别人一样，要有自己的想法，写出属于自己的风格，代码要精简优化。

在写代码过程中，有个问题，一直困扰着我，“如何让内容在container中居中”，虽然我用自己的方法解决了，但还是不满意，一定有更好的方法，这个问题，我之后百度了一下，有这么几种方法，一定得记住。

以下是常用的两种水平居中方法：

一、行内元素居中

行内元素居中是只针对行内元素的，比如文本（text）、图片（img）、按钮等行内元素，可通过给父元素设置 text-align:center 来实现。另外，如果块状元素属性display 被设置为inline时，也是可以使用这种方法。但有个首要条件是子元素必须没有被float影响，否则一切都是无用功。

text-align:center

二、块元素居中

1、定宽块状元素居中

满足定宽（块状元素的宽度width为固定值）和块状两个条件的元素可以通过设置“左右margin”值为“auto”来实现居中。

margin:0 auto;（必须设置宽度）

2、不定宽元素居中方法后续再学习总结

今天做的练习代码有点多，就不附了。图片为证。运行效果如下：