web页面中,对于圆角边框处理时会增加许多不必要的html代码,这对于内容的表述来说是非常不和谐的。一片有逻辑结构的内容中增加了这些代码,一眼望去就像草地上的杂草一样的星星点点。对于如今已向CSS3开始过度的时期来说,已经不需要去对边框做类似于“滑动门”等技术的过多处理。能精简就精简,虽说流量不是问题,但是对于维护来说,代码越精致越容易维护。

先说一点题外话,在以后会另开页面详细说明。一点,不赶潮流或者使用的不是私人电脑,浏览器使用的是电脑中已存在的那种,在国内一般就是IE浏览器(公用XP系统IE6更为普遍),要么就是国产浏览器,但其实还是IE内核,而其中大部分也还是IE6为主。而双核浏览器基本可以无视,在浏览同一网页时频繁切换内核很容易导致出错,基本上默认为IE内核的情况也是其主要原因。当它调用webkit内核时也就不存在IE的问题。各种版本双核浏览器满街飞,为其一个个做兼容性调整也是不可能也没有意义的。所以,归根结底是IE与非IE的问题。

原归正传,处理圆角边框等一系列CSS时,我的看法是,可以完全使用CSS3来进行处理,然后对旧版本(在此针对指IE)浏览器,完全用浏览器专用代码(hack)带带过就可以了。这样做好处多多:

1.IE的旧版本始终是旧版本,这里指的是IE6 7

8,XP系统再这么折腾也用不了IE9,那这么一来IE9就是一个风水岭,这样一来就不是IE之间的差别了,而是 Windows XP 与

Windows

7的区别了(Vista带带过的)。IE的特点就是特稳定,一个版本再怎么折腾也就那样,不会有内核上的更新,更不会支持CSS3。所以可以放心的给他们加上特定代码而不用担心页面需要重新调整。

2.IE的注释型hack还是十分不错的,能够准确的区分IE间的个版本,还能对其进行集合式的代码管理。把所有IE的hack都放在一个css文件夹,用注释链接,这样别的非IE浏览器跟本不会去调用这些CSS,以及这些CSS调用的图片(这会很省流量又兼顾到了IE这个只支持CSS2的浏览器)。在这也不要担心这些代码对IE9有重大影响。

3.以谷歌浏览器为代表的,具有自动更新功能的浏览器,是不存在对新技术的不支持的问题的。就算是火狐浏览器也无需担心其新技术的支持问题,这两天正好是火狐4正式版要推出,那CSS3和HTML5等这些就更加不是问题的问题了。而且用这些浏览器的用户都是“懂得入”的,不要去过多担心他们的浏览器版本的新旧问题。所以我觉得可以大胆使用CSS3的稳定特性。这年头,支持可变宽高的灵活框及页面和支持移动平台,比支持过旧版本的浏览器来得更为实际一些,代码很万能,但为了进行万能地支持,把作为内容载体的内容代码搞的乱七八糟是件适得其反的事情,在代码之上的内容才是最需要不被破坏的东西,而不是界面。

还有一种解决方法,就是在IE的hack中进行冗余代码添加,底线是不添加HTML。例如给一个框里的标题添加顶部的圆角背景,在正文div层添加底部圆角背景,不过这个方法对界面的要求更高了,不能够随意添加margin,padding甚至是border属性。

还有一点要注意,CSS3的使用有一个限度,那就是厂商代码尽量不用(如:-moz,-webkit)。这样代码加一行就变成了加一组代码了,毫无意思。很快新版浏览器就不需要这些多余代码。

最后说一下宽度的问题,如果说整个网站想做成活动宽度的,可是这样旧版浏览器会给带来更多的错位。想简单点的话,那这里就玩一下小把戏了,用hack把旧版浏览器的宽对给固定了,单个框的宽度固定,或者直接把整个页面的也宽固定了。

其实只要是内容显示正常,旧版浏览器的界面效果不添加圆角框又有什么缺失呢,这就是一个时代下的产物,方框年代的产品就应该做方框的事,不然就会像老牛拖车一般的力不从心。缓慢的浏览器去让他在去加载一大堆图片,这也是没有什么良好浏览体验的。方框也挺好~~~

----------------------------------------------------------------------------------------

html去除边角,WEB开发向HTML5及CSS3迈进(1)——圆框边角的处理相关推荐

  1. Web开发:HTML5、CSS、JavaScript必备教程

    2019独角兽企业重金招聘Python工程师标准>>> Web开发:HTML5.CSS.JavaScript必备教程 想开启Web开发的智慧之门吗?想DIY炫酷的网页特效设计吗?想通 ...

  2. web前端开发示例_40多个针对Web开发人员HTML5教程和示例

    web前端开发示例 HTML 5 offers a lot of new features to help web developers. In the last few days, I have r ...

  3. 响应式Web设计:HTML5和CSS3实战 读书笔记

    响应式Web设计:HTML5和CSS3实战 Responsive Web Design with HTML5 and CSS3 By : Pandao    pandao####vip.qq.com  ...

  4. 《响应式Web设计:HTML5和CSS3实践指南》——2.9节基于位置伪类的交替行样式

    本节书摘来自华章社区<响应式Web设计:HTML5和CSS3实践指南>一书中的第2章,第2.9节基于位置伪类的交替行样式,作者(美) Benjamin LaGrone,更多章节内容可以访问 ...

  5. HTML5的web开发,基于Html5技术的WEB开发

    摘 要:HTML是互联网上应用最广泛的语言,得到了业界大力支持,已经成为WEB发展的标准.它强大了对多媒体的支持力度和远程与本地对数据的处理能力,本文对HTML5的新特性进行了总结,分析了该语言在移动 ...

  6. 前端开发:Html5和CSS3

    1)Html5详解. 2)CSS3选择器详解. 3)CSS3属性详解(图文教程). 4)CSS预处理器之Less详解. 什么是 HTML5 HTML5并不仅仅只是做为HTML标记语言的一个最新版本,更 ...

  7. 响应式Web设计:HTML5和CSS3实战(读书笔记)

    视口:浏览器窗口内的内容区域,不包含工具栏,标签栏.网页实际显示. 屏幕尺寸:设备物理显示区域 各种宽度和高度a.可视区的真实宽度和高度document.documentElement.clientW ...

  8. 24个为Web开发人员准备的CSS3实用教程

    本文搜集了一些关于CSS3的最新教程.你可以根据这些教程或技术来实现网页设计,包括:文字阴影.圆角框.盒模型尺寸计算(box sizing).透明效果处理.多重背景.边框图像等.以下这些都是非常实用的 ...

  9. 响应式Web设计:HTML5和CSS3实战 笔记

    1.常用媒体查询特性: A.width:视口宽度. height:视口高度 B.device-width:渲染表面的宽度(设备屏幕的宽度).device-height:渲染表面的高度(设备屏幕的高度) ...

最新文章

  1. OpenStack 和 Cloud Foundry
  2. php 企业微信指令回调借款_企业微信外部联系人回调事件
  3. SAP WM LP10 创建TO单据的时候,系统根据目的地Storage Type 100下的库存自动扣减TO里的数量
  4. Andriod anim rotate中的属性介绍
  5. 更多Java之行内容,需要看直播请关注微薄
  6. 点击ride界面edit空白_『技术锦囊』如何在SOLIDWORKS界面调用宏程序?
  7. python从小白到大牛pdf 下载 资源共享_Kotlin从小白到大牛 (关东升著) 中文pdf高清版[12MB]...
  8. oracle告警日志备份,教你怎样用Oracle方便地查看报警日志错误
  9. unix和linux命令_Linux vs. Unix,在命令行中清理数据,为儿童准备的15本书,以及更多必读内容
  10. druid连接池mysql自动关闭_探究Druid连接池“违反协议”异常
  11. springboot 打印slf4_SpringBoot打印请求体与响应体
  12. HCI实验之问卷设计
  13. 软件需求分析——UML用例图
  14. 模数转换芯片AD7705的使用心得
  15. Shiro学习01:使用Shiro实现身份管理和权限验证
  16. 【译】 SafetyNet: Google's tamper detection - Part 2
  17. 钟汉良日记:凡夫俗子一定要眼见为实,菩萨才能见因知果!
  18. json字符串转成 json对象 json对象转换成java对象
  19. 深入C++对象模型(1) -- C++的三种模型
  20. php模仿百度推广,Z-blogPHP百度推广单页网站模板|MIP加速版

热门文章

  1. NHibernate Issues之1255:联合主键(composite-id)
  2. NUnit学习笔记之进阶篇
  3. Vuex源码学习(五)加工后的module
  4. I.MX6 Goodix GT9xx touchscreen driver porting
  5. sql2005,sql2008,sql2012清空日志语句
  6. 程序员求职成功路(2) - 第3章 数据结构与算法
  7. wp7 手机归属地查询
  8. V5SHOP网店系统V 8.0 仿京东模板
  9. 在fvwm中将右手习惯改为左手习惯的简单办法
  10. java聊天室 博客_java网络聊天室