woaidongmao

文章均收录自他人博客,但不喜标题前加-[转贴],因其丑陋,见谅!~
随笔 - 1469, 文章 - 0, 评论 - 661, 引用 - 0
数据加载中……

CSS+DIV布局心得

CSS+DIV布局已经变成白菜一样了,到处都是CSS+DIV布局,去面试一个做网页的公司,肯定会问,你会CSS+DIV布局不。到底啥是CSS+DIV布局呢?传统上都是以用TABLE布局的,TABLE布局的要点是有两个,第一:适当的地方合并行和列,第二:懂TABLE嵌套Table
而且还可以直接在页面上控制Table的高度长度。TABLE布局最大的缺点,除了沉长的TR,TD之外,言论最多的就是SEO里对Table布局的鄙视。大部分SEO人都会觉得Table布局不利于SEO优化。这点。。到真是有点关系,我试过两个完全一样的网站,一个是用Table布局的,我是用CSS+DIV布局的,并适当的使用了H标记,在GOOGLE搜索上,我CSS+div布局的网站要比Table布局的要靠前。。。至于为什么,那个不是本文的重点。。忽略掉。

   CSS+DIV
布局最大的特点就是HTML文件里的代码相对比较少,但是也造成了浏览器布局问题。。网上很多人都在说,我布局在IE里显示正常,在FF下全部变形了。其实造成这样问题的原因是你写的CSS并不标准,可以说你写的CSS都是根绝IE的标准来写的,而不是CSS2.0的国际标准,无论是IE还是FF3.0版前的我没留意)都是支持CSS2.0的,但是在技术上,IE有写模糊功能,可以令到非标准的CSS布局也能正确解析,一下是我写CSS代码的五个习惯,我不敢说我这五个习惯都是好习惯,至少我写的CSS布局不会产生不良效果,也就是我写的CSS有跨l浏览器能力。

第一:容器类DIV必须要有5个东西{marginpaddingwidthheightoverflow},什么叫容器类,就是这个DIV只是用来放内部的DIV的,也可以说是一个定位的div..例如:我们经常使用居中,一般是这样做的

body
{ }{
    font-size
: 12px;
    margin
: 0px;
    padding
: 0px;
    height
: 100%;
        width
: 100%;
    overflow
: auto;
    text-align
: center;
    display
: block;
}
/**//*---body我是作为最顶层容器的---所以它具备了我需要的所有东西,实现的效果是居中,我加上了display: block;虽然这个是一个默认属性,但是我们不能保证所有浏览器都是默认,(如果是所有浏览器都默认的,我自己写个浏览器的默认为none的给你耍)*/
#body_Div
{ }{
    margin
: 0px auto;
    padding
: 0px;
    text-align
: left;
    width
: 1003px;
    height
:100%;
    overflow
:auto;
}
/**//*这个是核心层,多有的元素基本都是在这个层里的,这个层也具备了我想要的属性,text-align: left; 因为在上层我把文本对齐成为居中,所以这个层我要把它还原为左对齐margin: 0px auto; 一般IECSS编写者不会有这个auto值的,在IE会自动,但是在FF如果少了auto你将会发现FF里你的核心部分不是居中的。所以要做到通用,我们就必须要加上auto值,IE也支持auto*/


第二:浮动对象,都拥有独立的父DIV;关于这点。。有意见的人可能不少,持有的观点就是,你这样做只会令DIV过分的多,过于复杂,其实,我也不想这样做,但是- -IE对于浮动对象的{marginpadding}存在BUG所以为了减少一切可能的出错,我唯有多花费一点代码,说实在的我只是想它更健康。这个父DIV主要作用其实就是令到内部浮动对象更可控制,这个父DIV就是一个单纯的容器DIV

第三:所有的浮动都需要闭合;这个有经验的人都知道。。用完浮动你肯定需要把它闭合掉的,不闭合,可能不同浏览器在解析的时候会把你的浮动变成向下默认,(可以这样解析:就是元素内部的子元素都默认具有浮动属性)

第四:一个行向浮动如果超过3个那么请使用UL来实现浮动

第五:灵活使用类选择,我个人的做法是,所有的id选择器都是用于布局的,类选择器都是用于呈现效果的,这样做的好处就是,当你想要的效果出现问题的时候,更快速地找到错误。这个是我有意识的把架构内容分离。

posted on 2009-05-25 15:29 肥仔 阅读(538) 评论(0)  编辑 收藏 引用 所属分类: Web-前台


只有注册用户登录后才能发表评论。
【推荐】超50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理