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

2016-02-19 19:33 2 1 收藏

今天图老师小编给大家精心推荐个浏览器发展/CSS布局/怎样运用?教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

【 tulaoshi.com - Web开发 】

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

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

CSS Hack

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

曾经为了让多个浏览器达到同样的效果,使用的又是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的英文意思

后话

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

来源:https://www.tulaoshi.com/n/20160219/1621304.html

延伸阅读
标签: Web开发
我很久以前就开始计划着整理一下CSS选择器的浏览器支持,因为CSS3增加了很多非常有用的选择器。CSS属性选择器制作个性化链接样式作为对CSS选择器的初步研究。 kimblim网站整理了一份很全面的CSS选择器支持情况,我将其翻译过来并进行进一步的整理,将其尽可能的简化。同时结合evotech网站整理的CSS选择器支持列表,以及我自己平时总结的一...
标签: Web开发
区别IE6与FF:        background:orange;*background:blue; 区别IE6与IE7:        background:green !important;background:blue; 区别IE7与FF:        background:orange; *background:green; 区别FF,IE7,IE6:    &n...
标签: Web开发
概述 CSS表达式会降低浏览器的渲染性能;用其他方案替换它们将会改善IE浏览器的渲染性能。 注意: 本节最佳实践只适用于Internet Explorer 5到7,它们支持CSS表达式。Internet Explorer 8放弃使用CSS表达式,而其他浏览器是不支持的。 详细信息 作为一种动态改变文档属性来响应各种事件的的手段,Internet Explorer 5引入了CSS表达...
标签: Web开发
看如下的javascript脚本: if (window.XMLHttpRequest) { //Mozilla, Safari,...IE7  alert('Mozilla, Safari,...IE7 ');  if(!window.ActiveXObject){ // Mozilla, Safari,...   alert('Mozilla, Safari');  } else {   alert('IE7');  } } else {  alert('IE6'); } 看看运行效果: script...
标签: 浏览器 Web开发
Netscape Navigator 9 Netscape Navigator 9 (Beta 1) 于 2007 年 6 月发布。它基于 Mozilla Firefox 2。 Navigator 9 中的一些新特性:Mozilla 特性 由于 Navigator 9 基于 Mozilla,它拥有所有最新的 Mozilla 特性。 URL 纠错 Navigator 9 会自动校正 URL。 Link Pad 一个新的 sidebar 特性,允许在不搞乱书签的情况下保存新闻日后访问...

经验教程

356

收藏

23
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部