Posts Tagged ‘布局’

« Older Entries

CSS顶级技巧大放送，div css布局必知

星期三, 06月 4th, 2008

字体大小使用px
在一行内声明CSS
对比下面两个:
h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}
h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}
第二种看起来de确格式化,但是不会在阅读上有任何帮助.写在一行内可以让您更快de找到需要de部分.
以前我也是写成类似第二种方式,但是逐渐发现就像文章说de一样,没多大用.一行看起来又爽快又省地方还能让文件更小.
分块书写相关代码
这样书写相关代码可以让CSS更页面化,在出现问题时候可以最短时间内找到问题所在.就像下面这样:
#content {float:left;}
#content p { … }
#sidebar {float:left;}
#sidebar p { … }
#footer {clear:both;}
#sidebar p { … }
浏览器支持
只支持最新de浏览器.也就是说要放弃IE5和IE5.5.这样一来就能省下很多时间.对于IE6来说不用使用盒模型Hack.如果只针对流行浏览器de话,只需要很少deHack就能实现同样de效果.
我注意了一下网易新版主页deCSS,其中竟然一个!important或者Hack都没有,可是在FF和IE里面显示效果都很好.合理de使用CSS可以避免Hack.当然,调试de时间会多一些.
包含浮动元素
所有在容器内de内容都应该被设计为和容器保持一致.如果过大de话就会滑动到错误位置.使用负值margin调整到容器外同样会导致滑动.
理解Overflow
如果页面中有两个浮动元素,在左容器内输出过多内容de话就会导致右侧容器跑到下面.这也就是说您demargin、宽度或者padding设置混乱了,不过在FF里面体现不出来.使用overflow:hidden或者overflow:scroll可以避免IE允许内容冲出容器.
允许块元素自动填充空白
缩写CSS
很多人都margin-top、margin-right、margin-bottom、margin-leftde用上一堆.其实这是最基本de,margin可以直接简写为margin:上 右 下 左值.可以在这里看到CSS缩写de总结.
避免不必要de选择器
把样式de选择器减少到最少.如果您发现自己不停de写ul li {}或者table tr td{}就证明写de过于详细了.更少de选择器会让您更容易de发现问题.
我没有完全翻译,而且其中还有很多我自己de话,呵呵.

Tags: , , ,
Posted in HTML/CSS | No Comments »

用div实现像table一样的布局方法

星期三, 06月 4th, 2008


许多网页设计师都喜欢,将两个或者多个容器等高de并排放置,并在里面展示每个容器de内容,就象经典表格布局中de单元格控制几个栏目de位置,也喜欢容器de内容居中或顶部对齐显示.
但是您又不喜欢用table来实现他,那怎么办呢？实现de方法很多,有根据视觉错觉实现de,有用JS控制使高度相等de,还有采用容器溢出部分隐藏和列de负底边界和正de内补丁相结合de方法来解决列高度相同de问题.
其实有个简单de方法,使用display:table, display:table-row and display:table-cell 就可以实现,而且高度小de容器会自适应那些高度相对较高de,但是IE不支持这个属性,我先不用去责备IE,相信以后会有所改善de.这里我制作了一个模型.
先看看xhtmlde结构:
<div class=”equal”>
<div class=”row”>
<div class=”one”></div>
<div class=”two”></div>
<div class=”three”></div>
</div>
</div>
很简单不用解释就能看懂,但是这里给出一个tablede结构,是不是很相似
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
下来是css:
.equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}
.row .one {
width:200px;
}
.row .two {
width:200px;
}
.row .three {
}
解释:
1.dispaly:table;让层.equal作为块级元素de表格table显示,也就是将他作为一个表格
2.border-collapse:separate;边框独立,就像表格没有合并单元格以前
3.display:table-row;将.row作为表格行tr显示
4.display:table-cell;将.rowde下级div作为表格单元格td显示
5.然后定义宽度
这里还使用了 border-spacing:10px;来区别几个盒子,正如上面所陈述de,IE下不能正常显示,但是在:Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, and Netscape 7.1经过测试均可以完美显示.

Tags: , ,
Posted in HTML/CSS | No Comments »

使用CSS框架布局的缺点和优点小结

星期三, 06月 4th, 2008

现在好多网站都用了div css来布局网页结构,优点是速度快了,可负面影响呢,来看下面de分析
前端时间写了一篇《利用CSS框架进行高效率de站点开发》,有不少朋友问我相关de问题.很早5key就在公司进行CSS框架de架构,也对不少朋友提出CSS框架de建议.效果是很明显de.当然,CSS框架有利也有弊,最近也看了一些相关de文章.一些感想,与大家分享.
CSS框架之利:
1、开发效率de提高.
如果您是一个企业建站de前端开发,相信在大部分时间里进行着同类站点de相关代码工作.定义好de框架可以大大提高您de工作效率,避免一些常见de错误.如果您de工作是按件计费de,您de报酬一定会比别人多.
2、规范相关代码命名.
在多个站点中您可能会用到一些同样deCLASS或ID.如果您有一套完善decss框架,很快您就能对您de每一个站点de相关代码进行通读.不用浪费时间在相关代码de阅读上.
3、更好de团队合作
有些公司会将一些稍大de站点de前端相关代码分成若干子项目.有过此类经验de朋友应该对这种开发方式深感郁闷,要注意公用 css,还有注意相互之间de相关代码配合.久而久之,废弃相关代码越来越多,互相之间也难以阅读.如果建立好合适deCSS框架,大家可以减少很多不必要de错误,提升产品质量和工作效率.
4、解决浏览器de兼容性问题
现在大部分项目都要求兼容IE6,7和FF.每个站点可能都会花上一部分时间去处理兼容问题.在框架层面上就将这个问题处理好.就可以为后面de兼容问题节省下大部分时间.
5、一套完整de、结构清晰de结构相关代码.
CSS框架为您de项目提供一个干净、严谨de基础架构.通过它您可以快速de为您de站点搭建基础dehtml相关代码框架.万事开头难,前面de基础工作做好了.后面de开发速度会提高很多.
CSS框架之弊:
1、您需要完全de理解整套框架
每一个加入项目de人,都需要花一定de时间去完全de理解整套框架及编码规范；
2、您会延续一些框架中de错误bug
没人可以保证自己制定de框架是完美而没有bugde.您可能会需要时间去清理框架中debug；
3、限制开发思路
框架给出大家基本de架构及开发de思路,这可能会限制您对产品开发de新思路；
4、臃肿de源相关代码
框架中可能有很大一部分相关代码不会经常用到,而且还会降低执行效率；
5、框架de语义化
我已经注意到了HTML相关代码de语义化.但基于框架de每个站点都是独立唯一de,我很难去保证CSS框架de语义化.

Tags: , , , , ,
Posted in HTML/CSS | No Comments »

css布局网页水平居中常用方法

星期三, 06月 4th, 2008

页面水平居中一般会令人很头疼,尤其新手.浏览器之间de不兼容也会带来很大问题.下面来说一下常见de页面水平居中办法.
以下内容参见《精通CSS》.
HTML相关代码:
[复制此相关代码]CODE:
<body>
<div id=”wrapper”>
</div>
</body>
IE居中办法:
body {
text-align:center;
min-width:760px;
}
#wrapper {
width:720px;
text-align:left;
}

IE会将text-align:center 误以为让所有东西居中,而不只是文本.然后将容器de内容重新对准左边即可.
非IE:
[复制此相关代码]CODE:
#wrapper {
width:720px;
margin:0 auto;
}

如何兼容IE和非IE?如下:
[复制此相关代码]CODE:
#wrapper {
width:720px;
position:relative;
left:50%;
margin-left:-360px;
}

首先将容器左边边缘定位到页面中间,然后向左移动它宽度de一半.

Tags: , , , ,
Posted in HTML/CSS | No Comments »

DL.DT.DD实现左右的布局简单例子第1/2页

星期三, 06月 4th, 2008


这是今天有人发邮件问de一个问题,最开始de想法是用ul列表来实现;但是这样用出现两个比较麻烦de地方:
1、如果用UL还布局,右边一栏比较麻烦；
2、文字外边de边框自适应比较麻烦；
3、很可能要定死高度；
所以,细细地看一看这个布局,想一想还是用DL.DT.DD作是合理de:
1、布局合理一些；
2、将来扩展很方便；
3、CSS一定很少；
试着写了写,看一看还行!在可控范围内!
布局布分当然不用说了:
[复制此相关代码]CODE:
<h1>标题</h1>
<div>
<dl>
<dt><a href=”32″>·博客里de文章是我自己写de!</a></dt>
<dd>作者:张三</dd>
</dl>
<dl>
<dt><a href=”3232″>·博客里de文章是我自己写de!</a></dt>
<dd>作者:张三</dd>
</dl>
<dl>
<dt><a href=”3232″>·博客里de文章是我自己写de!</a></dt>
<dd>作者:张三</dd>
</dl>………..
</div>

CSS部分:
[复制此相关代码]CODE:
<style>
*{ margin:0; padding:0;}
body{ font-size:12px; line-height:1.8; padding:10px;}
dl{clear:both; margin-bottom:5px;float:left;}
dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF}
dd{ position:absolute; right:5px;}
h1{clear:both;font-size:14px;}
</style>
看一下效果:
点击运行可以看到效果:
[Ctrl A 全选 提示:您可先修改部分相关代码,再按运行]
如果说定宽？
点击运行可以看到效果:
[Ctrl A 全选 提示:您可先修改部分相关代码,再按运行]
相关de例子,我以前也写过一个:

Tags: , , , , , ,
Posted in HTML/CSS | No Comments »

DIV CSS布局中不推荐使用的标签集合Dont Use These Tags

星期三, 06月 4th, 2008

做DIV CSS页面,不推荐使用de标签相关代码,请尽量不要使用这些HTML标签:
Do not use these html elements in html pages.
Presentational elements should not be used.
Support for some elements has been (or will be) deprecated; they should not be used.
Don’t Use These Tags
Presentational
[复制此相关代码]CODE:
b big
hr
i
small
sub
sup
tt
Deprecated
basefont
center
dir
font
isindex
menu
strike
u

Unsupported and Damaging in Practice
tfoot
Comments Log
Comment Log (newest first)

Tags: , , , , , , , ,
Posted in HTML/CSS | No Comments »

组合CLASS来完成网页布局风格

星期三, 06月 4th, 2008

我是这样来做DIV布局相关代码de．不知道说de清楚不清楚,凑和看吧
我de想法是未来能这样:用标准件de方式来组装网页DIV布局

我把class分为２种,布局class,风格class,布局class是骨架,风格class是衣服
举个例子:
比如布局中de左栏
首先它de属性有:是左栏,宽度,背景颜色,字体颜色等
１．首先会定义一个class,比如:.layout,主要用来控制页面整个de大小
.layout{width:98%;margin:0 auto;text-align:left;}
２．然后会定义3个基本布局Class(l,m,r)
.l{float:left}
.m{width:auto}
.r{float:right}
我把２栏布局也归类于３栏布局,因为３栏布局中,左右栏de宽度分别为０de时候,３栏就变成了２栏．
我写基本布局相关代码de时候,最好还是写成３栏格式．
３．对应布局Class,定义需要de风格Class,比如宽度,高度,背景颜色等等这些都属于风格元素
.class_l{background:#ff0;margin-right: -150px;width:150px;}
.class_m{background:#f00;margin:0 140px 0 150px;}
.class_r{background:#00f;margin-left: -140px;width:140px;}
布局class只有一套,风格class可以定义很多.
比如,要中栏里面在做一个小de２栏布局
就可以再定义一个风格class
.mid_l{background:#ff0;margin-right: -100px;width:100px;}
.mid_m{background:#f00;margin:0 0 0 100px;}
4.将布局class和风格class结合起来,在相关代码这样引用
<div class=”l class＿l”></div>
<div class=”l mid_l”></div>
将２个class都引用,中间用空格隔开,前面de是布局class,后面de是风格class,后面还可以继续空格引用,如果需要再特殊定义,您可以给这个div取一个id来定义.
其他de一些常用de风格class也可以写成通用de,比如隐含可以定义为
.hide{display:none}
然后需要de时候,class=”xxx hide”来引用,很方便．
点击运行可以看到效果:
[Ctrl A 全选 提示:您可先修改部分相关代码,再按运行]

Tags: , , , , , , , , , , , , , , ,
Posted in HTML/CSS | No Comments »

用标准件的方式来组装网页DIV布局-WEB标准网站设计心得

星期三, 06月 4th, 2008

有这样一个想法,不知道可行么

例子:

布局中de左栏,它de属性有:｛居左,宽度,背景色,字体等等｝

如果把每个属性都做成一个标准件,然后这样组装起来使用

class="float width height background font padding….",通过多个classde标准件de引用来完成页面布局样式

先按需要定义好标准件如:

float标准件

.l{float:left}

.r{float:right}

.cl{clear:left}

…

width标准件

.w200{width:200px}

.w300{width:300px}

…

background标准件

.red{background:red}

.black{background:#000}

.white{background:#fff}

…

根据需要引用

class="l w200 red"［居左,宽度为200,背景红色］

class="r w200 white" ［居右,宽度为200,背景白色］

我现在自己写相关代码,最多就２个class来定义一个布局样式,感觉很方便

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , ,
Posted in HTML/CSS | No Comments »

不用float实现模块居中布局

星期三, 06月 4th, 2008

最常见实用de布局形式:上、中左、中右、底四个模块,宽度760px,整体页面居中.

结构相关代码,top left right foot 四个模块全部独立、互不嵌套.

＜div id=”top”＞head＜/div＞

＜div id=”left”＞
＜div id=”left_module”＞left＜/div＞
＜/div＞

＜div id=”right”＞
＜div id=”right_module”＞right＜/div＞
＜/div＞

＜div id=”foot” ＞foot＜/div＞

顶部属于常规定义.

#top { height:100px; background:#ccc; width:760px; margin:auto; text-align:center;}

方法A: 外层left定义为760px宽并居中；内层left_module定义为实际de左侧宽度280px,且绝对定位,top值等于顶部定义de高度.
这种方法de好处是:left right 两个模块相关代码片断可以互换调整显示优先级.

#left { width:760px; margin:auto;}
#left_module { width:280px; position:absolute; top:100px; padding:10px;}

方法B: 外层left定义为760px宽并居中,相对浮动于top；内层left_module定义为实际de左侧宽度280px,且绝对定位.
这种方法de好处是:顶部de高度可以自由延伸.

#left { width:760px; margin:auto; position:relative;}
#left_module { width:280px; position:absolute; padding:10px;}

外层right定义为760px宽并居中,内层right_module定义为实际de右侧宽度440px,使用margin语法居左.right_module定义de背景色是实际右侧de背景色,定义de高度就是实际中间模块de高度；rightde背景色就是实际左侧de背景色.

#right { width:760px; margin:auto; background:#E8E8E8;}
#right_module { width:440px; background:#F0F0F0; height:360px; margin:0 0 0 auto; padding:10px;}

底部也属于常规定义.

#foot { height:100px; background:#ccc; width:760px; margin:auto; text-align:center;}

测试环境IE6.0和FF1.5,都是最俗de语法,非常简单,实用有限,可做技术参考.

Tags: , , , , , , , , , , , , , ,
Posted in HTML/CSS | No Comments »

重构、标准、布局

星期三, 06月 4th, 2008

近来大家总是在标准上争论不休,其实,这些问题一些相关文章已经说得很明白了.

　　以下我就谈谈我de看法.本帖子有太多de“我认为”,说明了我只是想把我de想法拿出来跟大家商榷,或许有太多不对de地方,也请大家一一指出.

　　1、我对web标准de理解
　　所谓deweb标准,在一些教程文章上已经得到结论:结构化标准(XHTML、XML)、表现标准(CSS、XSLT？)、行为标准(DOM、ECMAScript).这些东西在网上一搜一大把,在这里我就不多说了.我只说我自己de想法:

　　a.标准是相对de,有其一定de局限性
　　作为标准本身,它也在不断地完善中.我也可以加入其中完善它,而不是盲从它.没有最好,只有更好.(LeXRus前一阵子说要成立自己deweb标准组织,不知道现在怎么样了.)

　　b.标准只是被推荐使用,好de标准大家都会自觉去遵守
　　我之所以使用标准,就是因为标准对我有利.正如现在倡导deISO9000标准一样,它只是倡导,并不强迫.我认为它对我有用,所以我用它；同样,如果您认为它实在不怎么样,您也可以不用它,标准本身不应该带有任何强迫性.就跟打篮球一样,NBA是24秒进攻,我是30秒进攻,我要想加入NBA,就得用人家de规则.还有我加入“世贸”也是,如果我够拽,自己成立一个“世贸”,自己发布一套标准,也是可以de.

　　c.标准没有明确提到用div还是table
　　有些朋友很容易把标准简单地等同于“把table换成div”.我不这么认为,因为table也是符合xml规则de.含有tablede页面照样可以通过XHTML1.0de验证.

　　d.“div布局”不只是用div进行布局
　　我可以用一切可能de标签(包括table)对页面进行布局,目de就是要达到最优.它只是提出一个概念,一个全新de模式.坛子里也有人说过,“重要de是观念上de更新,而不是相关代码.”当然,我de最终目de是相关代码de更新.

　　e.XHTML验证是手段,不是目de
　　有时,我用javascript来生成flash movie相关代码,以欺骗validator,通过验证.用这种方法,那么没有通不过验证de页面.如果只是玩玩,那是可以de.但是我怕会有些初学者太把validator当回事,甚至认为通过验证是最终目de.我de看法是:validator不过是一个工具,它帮助我检查我de页面是否符合标准,仅此而已.最终我还是得按客户de要求设计我de页面.
　　
　　2、我为什么要用标准
　　有人会以为使用标准de目de就是为了达到标准.其实,《网站重构》一语道破天机:为了网站能“活”得更长久,为了提高网站de可访性,更为了降低成本,我必须采用Web标准!这里有三个“为了”,没有一个是为了标准.标准只是手段.
　　接触“标准”后,我尝试去做一些符合“标准”de页面.当时,并不是很明确为什么要使用标准,只是出于一种好奇心理.中间也遇到了一些难题,有技术上de,也有观念上de.但是,现在我很乐意用div css来给客户做网页.
　　用了标准以后,给我de感觉就是:相关代码精简了,维护方便了.
　　相关代码精简,可缩短页面装载时间.就算在当前宽带de条件下,我也不应该放宽对自己de要求——精简相关代码(我想这也是每一个程序员对自己de要求),况且现在还有不少de拨号用户,以及手机上网/浏览de用户.这是一个分秒必争de社会.
　　严格按照标准,可以获得更高de兼容性.一个合格de网页制作者,他总是试图让网页达到最高de兼容性.当然,他要在效果与兼容性之间取得某种平衡.就像我现在挑老公:既要有钱,也要靓仔.
　　维护方便,我甚至只要修改一下css就可以让整个页面呈现出完全不同de风格.这可以节省不少工作.
　　当然,我认为用标准最重要de一点是:向后兼容.用一个专业de术语就是:可持续发展.网络总是在不断地发展中,一个好de网页制作者,总得对未来de发展有一定de预见.就现在我知道de,以后一段时间确实是xmlde天下,直到有更好de东西出来取代它.
　　每年都有太多de网站为了跟上时代,花不少钱在改版上.因为改版就意味着一切重来,包括相关代码,甚至程序.
　　标准还要求我把数据交给XHTML(或者html、xml),把表现交给css,两者各司其职,结合起来.

　　3、为table平反
　　《网站重构》一书出来以后,也许有很大de误读成分,一些朋友把标准跟重构混淆了,甚至等同起来.我没看过这本书,不好做评价.
　　“在不改变相关代码外在行为de前提下,对相关代码做出修改,以改进程序de内部结构”,这就是重构.我认为“网站重构”兼有“div布局”跟“web标准”de意思.布局讲de是一种方法,标准讲de是一种规范,这是两码事.
　　web标准并不是说不用table,我找遍了网上de文章,没有找到一篇文章说web标准反对使用甚至建议不使用table标签,我想它是这样说de:建议不要使用table“布局”,而改用div cs“布局”.
　　拿一个数据表来说,我认为用table来组织它是最好de解决方案.当然,您要用其他办法来实现也是可以de,但是我敢说都没有table来得简单、简洁.(也许有,只是我没找到？)当然,在学习阶段,强制自己不使用表格解决一切问题,还是蛮有用de.

　　以上说了这么多,与其说是我de想法,不如说是汇总了大家de想法.但求不贻笑大方,如果能对初学者有所裨益,那就阿弥陀佛了.

出处:蓝色理想

Tags: , , , , , , ,
Posted in HTML/CSS | No Comments »

« Older Entries