• 山东省莱西木偶剧首次亮相新西兰国家博物馆 2019-07-21
  • 新疆塔城:多元化种植助力乡村振兴 2019-07-21
  • 6月乌鲁木齐这些片区要停电 2019-07-10
  • 原始社会为何会走向私有制?就是有这样的阶级要过得比共同一起生活更好,要过得比大多数人的生活好,自然就有了阶级斗争,要过得比大多数人更好的阶级就战胜要共同一起生活 2019-07-10
  • 电影别得了票房丢了观众 2019-07-02
  • 降低货运价格,迈出铁路货运服务新步伐 2019-06-28
  • 习近平时间携手共建生态良好的地球美好家园 2019-06-28
  • 上海協力機構青島サミット 2019-06-24
  • 【新时代·幸福美丽新边疆】一分钟惊艳航拍!俯瞰海口最大湿地公园 2019-06-24
  • 恶性肿瘤成天津第二位死因 发展中国家和发达国家癌谱并存 2019-06-20
  • 国际难题面前要秉持“公义”(钟声) 2019-06-18
  • 带着任务登台的人,他们提供的数据是成问题的。例如那位林毅夫。对这类人,要睁大眼睛,保持高度警惕。 2019-06-18
  • 介休绵山清明(寒食)文化旅游节盛大启幕 2019-06-10
  • 【学习时刻】参会专家罗怀臻:文化创新要实现从内涵到形式的整体性审美转换 2019-06-10
  • 患了类风湿性关节炎,要不要忌口? 2019-06-08
  • 南雄彩民中大奖:温州网美科技有限公司-专注于温州网站建设,温州网站制作,温州网站优化

    客服电话
    seo推广,百度推广,google推广,yahoo推广
    您所在的位置:主页 > > >网站推广>>百度优化

    排列五4000万大奖 www.mdgoj.tw 关于DIV+CSS布局的技巧

    发布时间:2015-1-10 10:15:04 阅读次数:4212 信息来源:温州网美科技有限公司

    办公自动化杂志在网页制作中,TABLE 布局在所谓的WEB2.0 盛行前是比较流行的布局方式,甚至现在对于网页制作初学者来说, TABLE 布局依然是一种很好的方式?;赥ABLE 布局具有搭建速度快、容易控制的特点,所以现在很多网络公司给客户制作网站(当然是在客户没有要求使用DIV+CSS 的情况下)还在使用TABLE 布局网页。但是如今的网页设计到了该考虑搜索引擎以及给用户带来更多的便利的时代,用DIV+CSS 进行网页布局比用TABLE 布局将体现出更多的优势。但是又由于 CSS 对不同浏览器存在兼容性问题,所以对于初学者来说,在使用DIV+CSS 进行网页布局过程中可能会遇到各式各样的问题,在这里给讨论几点DIV+CSS 布局的技巧。
     
    二、DIV+CSS 网页布局的分类
     
    1、一列固定宽度一列布局是所有布局的基础,也是最简单的布局方式,用 DIV+CSS 布局的代码如下:  XHTML 代码:  一列固定宽度
    CSS 代码: #main1 { width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; } 
    2、一列自适应宽度自适应的布局能够根据浏览器窗口的大小自动改变其宽度和高度值,是网页设计中一种非常灵活的布局形式,用 DIV+CSS 布局的代码如下: XHTML 代码:  一列自适应宽度
    CSS 代码: #main2 { width: 70%; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; } 
    3、一列固定宽度居中页面整体居中是网页布局中最常见到形式,在传统的表格布局中,使用TABLE 的align="center" 属性来实现,在DIV+CSS 布局中采用如下代码来实现: XHTML 代码:  一列自适应宽度
    CSS 代码: DIV+CSS 网页布局方法探析。如今的网页设计考虑得更多的是搜索引擎以及给用户带来更多的便利,传统的TABLE 网页布局由于其庞大的HTML 代码,使得其在搜索引擎方面显得有些无能为力,而用DIV+CSS 进行网页布局具有代码精简的优点使得其在这方面又体现出更多的优势。但是又由于CSS 对不同浏览器存在兼容性问题,所以对于初学者来说,在使用DIV+CSS 进行网页布局过程中可能会遇到各种问题,本文就给大家探讨几点DIV+CSS 布局的技巧。


      wk_ad_begin({pid : 21});wk_ad_after(21, function(){$('.ad-hidden').hide();}, function(){$('.ad-hidden').show();});  
     


     - 2 -
    4、二列固定宽度在有一列固定宽度布局的基础上,实现二列固定宽度也就很简单了,用DIV+CSS 布局的代码如下: XHTML 代码:  左侧 右侧
    CSS 代码: #left { width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } #right{ width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } 
    5、二列固定宽度居中从一列固定宽度居中的布局方法中,我们就不难完成二列固定宽度居中了,可以使用一个居中的DIV 作为容器,将二列分栏的DIV 放置在容器中,从而就实现二列的居中显示。 DIV+CSS 的代码如下: XHTML 代码:  左侧 右侧
    CSS 代码: #main{ width:554px; margin:0px auto; #left { width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } #right{ width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } 
    这里仅列举了一列、二列的布局方式,实际上三列、四列等多列的布局方式也和二列的布局方式的实现方法是一样的。事实上不管多么复杂的页面设计,在DIV+CSS 网页布局中,均是以DIV 为基础,通过一列、二列、三列这些基础的布局方式的相互组合与嵌套来实现复杂的布局。 
     
    三、CSS 对不同浏览器的兼容性解决办法
     
    由于CSS 在不同浏览器中存在兼容性问题,所以在使用 DIV+CSS 布局中,可能导致相同的内容在不同浏览器中出现不同的显示效果,为了解决这些方面的问题,以下针对CSS 某些属性的用法提出相应的一些解决办法。 
    1、页面居中问题在IE 浏览器下,可以通过定义CSS 样式body {text- align: center;}来实现页面居中,但在FireFox(以下简写为FF)浏览器下此属性就失效了。解决办法:使用"margin- left: auto; margin- right : auto; " 
    2、padding 属性在不同浏览器的显示问题当给DIV 设置padding 属性后,在FF 浏览器中会导致 width 和height 增加(DIV 的实际宽度=DIV 宽+Padding), 但在 IE 浏览器中width 和height 不会增加,这就导致相同的内容在不同浏览器中出现不同的显示效果。解决办法:给DIV 设定IE、FF 两个宽度,在IE 的宽度前加上IE 特有标记" * " 号。例如: #divwidth{ padding:5px; width:100px; *width:110px; } 
    3、奇怪的间隙问题有的时候我们明明设好了高度,可在IE6 上却看见一些奇怪的间隙。解决办法:试试在有空隙的DIV 上加上"font- size:0px;" 
    4、关于手形光标要将页面内容的光标显示为手形,通常的做法是使CSS 属性cursor: hand; 但这于做法只适用于IE. 解决办法:cursor: pointer; 
    5、浮动在IE6 产生双倍距离问题例如: #box{ float:left; width:100px; margin:0 0 0 100px; } 这种情况之下IE6 会产生200px 的距离。解决办法:在以上属性的基础上,加上display:inline,使浮动忽略。 6、UL 和FORM标签的padding 与margin ul 标签在FF 中默认是有padding 值的, 而在IE 中只有 margin 默认有值。FORM标签在IE 中,将会自动margin 一些边距,而在FF 中margin
    则是0;解决办法:css 中首先都使用这样的样式ul,form{margin:0; padding:0;}。 
    7、截字省略号 .hh { - o- text- overflow:ellipsis; text- overflow:ellipsis; white- space:nowrap; overflow:hidden; } 这个CSS 是定义当内容溢出宽度后会自行的截掉超出部分的文字,并以省略号结尾,但注意Firefox 并不支持。 
    四、总结
    以上讨论的DIV+CSS 网页布局的技巧,有所不足,但在网站建设与网页设计过程

    中,我认为不可盲目跟风,如何更有效、更合理的运用WEB2.0 设计标准,这需要很长时间的学习和锻炼。而如何将DIV+CSS 运用的更好,我觉得这需要通过不断的实践和体验,积累丰富的设计经验,才能很好的掌握这门技术。

    本文地址://www.mdgoj.tw/based_info.aspx?id=346


    >>相关网站建设观点

    上一篇:修复 IE 下 PNG 图片不能透明显示的问题

    下一篇:404错误是什么意思?为什么是404

    在线客服

    在线客户咨询客服1
    在线客户咨询客服2
    在线客户咨询客服3

    在线热线

    137-777-66457

    工作时间

    周一至周日:9:00~18:00

    排列五4000万大奖
  • 山东省莱西木偶剧首次亮相新西兰国家博物馆 2019-07-21
  • 新疆塔城:多元化种植助力乡村振兴 2019-07-21
  • 6月乌鲁木齐这些片区要停电 2019-07-10
  • 原始社会为何会走向私有制?就是有这样的阶级要过得比共同一起生活更好,要过得比大多数人的生活好,自然就有了阶级斗争,要过得比大多数人更好的阶级就战胜要共同一起生活 2019-07-10
  • 电影别得了票房丢了观众 2019-07-02
  • 降低货运价格,迈出铁路货运服务新步伐 2019-06-28
  • 习近平时间携手共建生态良好的地球美好家园 2019-06-28
  • 上海協力機構青島サミット 2019-06-24
  • 【新时代·幸福美丽新边疆】一分钟惊艳航拍!俯瞰海口最大湿地公园 2019-06-24
  • 恶性肿瘤成天津第二位死因 发展中国家和发达国家癌谱并存 2019-06-20
  • 国际难题面前要秉持“公义”(钟声) 2019-06-18
  • 带着任务登台的人,他们提供的数据是成问题的。例如那位林毅夫。对这类人,要睁大眼睛,保持高度警惕。 2019-06-18
  • 介休绵山清明(寒食)文化旅游节盛大启幕 2019-06-10
  • 【学习时刻】参会专家罗怀臻:文化创新要实现从内涵到形式的整体性审美转换 2019-06-10
  • 患了类风湿性关节炎,要不要忌口? 2019-06-08
  • 毕尔巴鄂竞技2013年球员名单 内蒙古时时彩开奖结果 科乐吉林麻将小鸡飞蛋厶九蛋 拉科鲁尼亚皇家社会 神龙之境官网 青海快三开奖信息 美女捕鱼游戏视频 莱万特VS皇家马德里 乌迪内斯vs卡利亚里 齐天大圣APP