浏览器发展/CSS布局/怎样运用?

css|浏览器

浏览器发展/CSS布局/怎样合理运用?

IE7正在逼近...为什么使用逼近这个字眼呢?因为我为曾经使用CSS布局的网站感到担忧.

CSS Hack

曾经为了让多个浏览器达到同样的效果,使用的又是CSS布局,我使用了CSS Hack.但随着IE7的到来,一些作用的失效,布局又出现了严重的问题.难道我们所提倡的CSS布局就是这样的让人不安么?

出现问题自然会让人想到出现问题的原因.其实不难发现我们使用CSS Hack都是在解决一些鸡毛蒜皮的小事,把原本干干净净的CSS样式表弄的神秘又让人不解,我想这并不是CSS给我们带来的惊喜,而是场灾难.

CSS布局合适么?

可能读到这里都会有这样的疑问出现了,其实自从学习并开始在实践中使用这个布局技术后我就会经常问自己这个问题.

我的第一个作品,可是说是真正执行了CSS+DIV这样的思路,可当我移掉样式表后,发现没有什么层次,文字图片胡乱地堆积在每个角落.于是使用布局的时候就得考虑标签的合理使用.

后来使用了传说中的FF浏览器,然后发现自己以前的N个作品在这个浏览器面前可以用丑陋来形容.也是从那天我才知道这个救世主并没有想象里那么让人向往.

现在问题又出现在了浏览器的交替问题上,似乎所有的问题都要归功于这个巨头的不时地出现新产品

坚持?还是合理使用?

可能现在没有过去那种因为自己用这个技术做了网站而沾沾自喜的人了.毕竟已经比较普遍了,因此更应该让使用的人们知道这个布局技术可能出现的问题,以及应该怎样合理的运用才是.

总结了下:

1.使用市场流行的浏览器进行测试
不要拿老的几乎看不到有人使用的浏览器来做测试,那是自虐...

2.不要动不动就使用div
你如果这样做,会很对不起其他的HTML标签...

3.做区域布局而不是细节布局
如果你想拿CSS来做象素图,我只能说,你把这个技术神化了...

4.尽量不要使用HACK
如果你自信能随时掌握各浏览器HACK的话,继续吧..可能会比较辛苦

5.使用简单布局
当你使用了N个嵌套,知道么,DIV和table一样烦人

6.合理使用样式名称
不一定用洋文,知道能马上知道是起什么作用的就行了

7.不要一味将样式写进单独的文件里
没必要为了一张页面中一个文字的特殊颜色而跑到.css文件里让它在每个页都读取下吧?

8.该用table布局就用table
不要搞的页面里找不到table才能算是标准页,效果,我们看的是效果.别忘记table的英文意思

后话

其实什么技术都是有一定的局限的,只有活用每个技术的优点才能做出优秀的作品.上面那些见解归我个人所有,近日经常能找到一些站转载一些翻译的文章,虽然我并不反对这样做,但我想转载文章的这些时间自己总结些东西,发布在自己的站上应该更不错吧? 又是我个人一点小小的牢骚...呵呵,希望看完这些能对大家有些帮助

时间: 2025-01-01 23:11:09

浏览器发展/CSS布局/怎样运用?的相关文章

浏览器-html+css布局问题请教各位

问题描述 html+css布局问题请教各位 这是我的css文件 label{ font-size: 16px; } .titleBar{ background: none repeat scroll 0 0 #F8F8F8; border-bottom: 1px solid #F0F0F0; height: 48px; } .imgcontent{ height: 36px; left: 10px; position: relative; top: 10px; width: 36px; } .p

Div+CSS布局的宽度计算及在各浏览器中的差异比较

对比于传统的表格布局和框架布局,DIV+CSS布局有着布局容易.改版方便.样式定义灵活.HTML代码简洁清晰.易于JavaScript操控等优点.在众口皆碑的同时,对于一些初学者,总会遇到各种各样的问题,比如说DIV的宽度或高度的计算问题. 我们来探讨一下影响DIV宽度或高度的属性有哪些? DIV的宽度 = width + padding + border + margin 仅从一条公式上看,可能有点难理解,我们通过测试代码和截图来观察一下.为了测试结果观察直观,我们只测试一边,即左边,即本来p

网页设计网页布局教程:CSS布局新属性

文章简介:新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域. 新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域. 这篇文章最早出现在 the April 2012 issue (226)这期的.n

[译] 渐进增强的 CSS 布局:从浮动到 Flexbox 到 Grid

本文讲的是[译] 渐进增强的 CSS 布局:从浮动到 Flexbox 到 Grid, 原文地址:Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid 原文作者:Manuel Matuzović 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:LeviDing 校对者:薛定谔的猫,LouisaNikita 今年早些时候,大多数主流浏览器都支持了 CSS Grid 布局.自然地

CSS布局说——可能是最全的

前言 现在,我们被称为前端工程师.然而,早年给我们的称呼却是页面仔.或许是职责越来越大,整体的前端井喷式的发展,使我们只关注了js,而疏远了css和html. 其实,我们可能经常在聊组件化,咋地咋地.但是,回过头来思考一下,如果你看到一张设计稿的时候,连布局都不清不楚,谈何组件化呢.所以,我们需要在分清楚组件之前,先来分清楚布局.废话说了这么多,只是想告诉你,布局这个东西真的很重要.本篇内容概括了布局的基础+基本的PC端布局+移动端适配等内容.如果你喜欢我的文章,欢迎评论,欢迎Star~.欢迎关

Div+CSS布局的优点

介绍Div+CSS的优点,阿里西西建议各位朋友,做站时最好采用Div+CSS布局.  业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准.那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?       Div 全称 division 意为"区分"使用 DIV 的方法跟使用其他 tag 的方法一样.       <DIV>welcome tu alix

div+css布局优化中的整体布局

在div+css布局中,一般都这样来整体构架的 <div id="header"></div><div id="center"></div><div id="footer"></div> 而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏: <div id="header"> <

div+css布局入门

css 这是在网页设计师上看到的一篇文章,很适合入门div+css布局的人看,转了过来收藏,hoho-- 你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义.结构添加CSS.这篇文章将告诉你应该怎样把HTML结构化. 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.align="left"

Div+CSS布局入门教程(二) -- 写入整体层结构与CSS

css|教程|入门教程 二.写入整体层结构与CSS 接下来我们在桌面新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=