· 武汉网站制作公司中意源网
· 武汉网络公司告诉你纯静态
· 武汉网络公司告诉你纯静态
· 武汉网站设计如何让网页布
· 武汉“三合一”网站制作模
· 武汉网站建设公司教你提高
· 网站建设时选择宽屏网页布
· 建材行业公司网站解决方案
· 武汉网站制作公司告诉你纯
· 网站推广和网站排名的两个
武汉网站设计如何让网页布局稳定性和标准性
【录入:Admin   发布时间:2014/08/31】
  

 刚开始学css+div布局的同学们,都比较困惑和难写的就是兼容性的问题了,特别是ie6等低版本的浏览器,随意国内逐步慢慢消失取代,但是现阶段还是会有点考虑因素再里面。我们写的网页布局怎么样才是合理的,完整的,兼容性好的呢?
因此再这里,武汉网站设计公司中意源网络给大家列出网页布局标准性、合理性和兼容性的一些方法,希望对刚开始学习css的同学有所帮助。
一、<!DOCTYPE> 标记的重要性。
位 于文档的最前面,用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准 规范,我们必需在开头处使用<!DOCTYPE>标记为 所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能将该网页作为有 效的XHTML文档,并按指定的文档类型进行解析。
<!DOCTYPE> 标记和浏览器的兼容性相关,删除<!DOCTYPE>,就是把如何展示HTML页面的权利交给浏览器, 这 时,IE6,IE7,IE8,Firefox2,Firefox3,Chrome,有多少种浏览器,页面就有可能有多少中显示效果,这是不被允许的。
二、合适地方用到合适的标签
物尽其用人尽其才。 再合适的地方用到合理的标签,对网页布局和优化都有很多的好处,比如logo ,一般我们都用h1 标签包括。 还有理解行内元素和块级元素的区别。

因此,再这里我们会根据稳定性来看这三者的先后顺序:
其中稳定性最好的就是盒子本身的高度和宽度了,我们优先考虑这个。 因此,很多情况下,我们会考虑利用高度剩余法,宽度剩余法来做,而不是padding和margin。

其次,我们才考虑padding ,因为padding也可以看做特殊的盒子高度和宽度,最后我们再用margin来做。因为margin会有边距合并的问题。
四、标准流、浮动流和定位的稳定性
标准流再里面是最稳定的,就是块级元素上下显示,行内一行显示,都是最稳定的。
浮动和定位都“脱标”了,稳定性没那么稳定,所以,我们应该遵循如下原则:
页面布局,能用标准流去做的不用浮动去做,如果要用浮动做的,就不用定位去做。
五、知己知彼百战百胜
总会有特殊的浏览器,比如ie6 ,这些奇葩浏览器总是有自己独到的地方,那我们怎办? 兵法云,知己知彼百战百胜,因此,需要我们详细的了解这些浏览器自己独特的特性,或者掌握他们IE6常常出现的bug,以及对于css 的理解,那么我们根据他们的不同解析,写出合理的布局。
六、不要让清除内外边距带来麻烦
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
这句话,大家都知道,清除浏览器样式的。但是如果你不加,不同浏览器肯定显示不太一样。所以,css的第一句话就是它。还有就是要使用大部分浏览
支持的css属性不至于引起不必要的麻烦。




图片素材 常见问题 SEO 研究 排名优化 网站地图 首页动画 动态文字 功能模块 网页背景 背景音乐 企业做站 网站建设 行业网站 手机网站 企业邮箱  网站域名 空间主机 模板仓库 视频网站 动画网站 企业建站 网站制作 门户网站 英文网站 联系我们
电话:027-82899598 88393465 传真:88393465 公司地址:武汉市汉口大智路吉庆家园14-1  24小时客服务热线:15927122608、15807162837
Copyright 2003-2010 okzyy.com All Rights Reserved 武汉中意源科技有限公司 版权所有
鄂ICP备06018148号 [] 498337528 1021305409 442689545 1036762796 网站开发 网站设计 透明动画