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

时间:2021-04-14 18:28:17

今天我从早上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、不定宽元素居中方法后续再学习总结

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

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