::^乔乔^::明镜台::原创空间::C#.NET2.0,C++技术BLOG
人最重要的是心境,一颗平静安稳的心才能更好的进步,保持自己的心态.成为梦想中的高手QQ群:8664695
首页
新随笔
新文章
联系
聚合
管理
posts - 17,comments - 32,trackbacks - 0
<
2024年12月
>
日
一
二
三
四
五
六
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
努力地去完善自己,坚持每天学习编程10小时,5年就18250个小时,也就是说起码要5年我才能成为大虾.......
常用链接
我的随笔
我的评论
我参与的随笔
留言簿
(6)
给我留言
查看公开留言
查看私人留言
随笔分类
(18)
c#(8)
c++(2)
CSS+DIV(1)
IDE系列(1)
Jquery學習筆記(2)
Lua学习笔记(4)
随笔档案
(17)
2009年7月 (2)
2009年6月 (4)
2009年5月 (11)
文章档案
(3)
2009年5月 (1)
2008年8月 (1)
2008年7月 (1)
收藏夹
(2)
C++朋友(2)
最新随笔
1. Oxite解读 ----- (1) ------- 概述
2. 如何学习编程
3. ADO.NET Entity Framework 随笔
4. 面向對象---繼承
5. 面試雜錦
6. Jquery學習筆記(二)---- 強大的選擇器
7. Jquery學習筆記(一)---- 前言
8. CSS+DIV布局心得
9. Microsoft Visual Studio 心情记录
10. lua学习之入门(三)----函数
搜索
积分与排名
积分 - 51141
排名 - 440
最新随笔
1. Oxite解读 ----- (1) ------- 概述
2. 如何学习编程
3. ADO.NET Entity Framework 随笔
4. 面向對象---繼承
5. 面試雜錦
6. Jquery學習筆記(二)---- 強大的選擇器
7. Jquery學習筆記(一)---- 前言
8. CSS+DIV布局心得
9. Microsoft Visual Studio 心情记录
10. lua学习之入门(三)----函数
最新评论
1. re: lua学习之入门(二)----基础语法1
高中如何学习?
--峰,少白
2. re: lua学习之入门(一)----环境搭建
路漫漫其修远兮,吾将上下而求索。。。。。
--梁乔峰
3. re: lua学习之入门(一)----环境搭建
@梁乔峰
--梁乔峰
4. re: Boost 多线程源代码解读
我对此表示很晕
--crax
5. re: 自定义审核流程(一)[未登录]
321
--123
阅读排行榜
1. lua学习之入门(二)----基础语法2(8672)
2. lua学习之入门(二)----基础语法1(4683)
3. lua学习之入门(一)----环境搭建(4184)
4. 自定义审核流程(一)(3140)
5. Oxite解读 ----- (1) ------- 概述(3060)
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還是FF(3.0版前的我沒留意)都是支持CSS2.0的,但是在技術上,IE有寫模糊功能,可以令到非標準的CSS布局也能正確解析,一下是我寫CSS代碼的五個習慣,我不敢說我這五個習慣都是好習慣,至少我寫的CSS布局不會產生不良效果,也就是我寫的CSS有跨l瀏覽器能力。
第一:容器類DIV必須要有5個東西{margin,padding,width,height,overflow},什么叫容器類,就是這個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; 一般IE的CSS編寫者不會有這個auto值的,在IE會自動,但是在FF如果少了auto你將會發現FF里你的核心部分不是居中的。所以要做到通用,我們就必須要加上auto值,IE也支持auto值
*/
第二:浮動對象,都擁有獨立的父DIV;關于這點。。有意見的人可能不少,持有的觀點就是,“你這樣做只會令DIV過分的多,過于復雜”,其實,我也不想這樣做,但是- -!IE對于浮動對象的{margin,padding}存在BUG所以為了減少一切可能的出錯,我唯有多花費一點代碼,說實在的我只是想它更健康。這個父DIV主要作用其實就是令到內部浮動對象更可控制,這個父DIV就是一個單純的容器DIV
第三:所有的浮動都需要閉合;這個有經驗的人都知道。。用完浮動你肯定需要把它閉合掉的,不閉合,可能不同瀏覽器在解析的時候會把你的浮動變成向下默認,(可以這樣解析:就是元素內部的子元素都默認具有浮動屬性)
第四:一個行向浮動如果超過3個那么請使用UL來實現浮動
第五:靈活使用類選擇,我個人的做法是,所有的id選擇器都是用于布局的,類選擇器都是用于呈現效果的,這樣做的好處就是,當你想要的效果出現問題的時候,更快速地找到錯誤。這個是我有意識的把“架構”和“內容”分離。
明鏡臺
posted on 2009-05-25 14:22
^乔乔^
阅读(2065)
评论(0)
编辑
收藏
引用
所属分类:
CSS+DIV
只有注册用户
登录
后才能发表评论。
【推荐】100%开源!大型工业跨平台软件C++源码提供,建模,组态!
网站导航:
博客园
IT新闻
BlogJava
博问
Chat2DB
管理