码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-08-20 00:50:59      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:水平居中   display   元素属性   解决   想法   font   电视   bsp   技术   

今天我从早上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页面布局实战

标签:水平居中   display   元素属性   解决   想法   font   电视   bsp   技术   

原文地址:http://www.cnblogs.com/le220/p/7398355.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!