备案域名购买

老域名出售,已备案域名查询,老域名注册,已备案域名交易,买老域名,二手老域名,出售老域名,上饶网站建设

主页 > CSS

CSS网页布局开发时的常见问题小结

  在进行CSS网页布局开发时,您肯定遇到过形形色色的布局问题,虽然本站网页布局频道提供了大量的教程,但最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易,当您遇到困难时为您提供快速参考。
一、有疑问,先验证
  在调试时,先对您的代码进行验证往往能省去不少麻烦事。格式不正确的XHTML/CSS 会导致许多布局上的错误。
  在其他浏览器中进行测试之前,请先在最先进的浏览器中撰写和测试CSS代码,而不是相反。
  如果您在破旧的浏览器中编写和测试,你的代码就不得不依赖那个破旧浏览器的糟糕的显示,然后在符合标准的浏览器中进行测试,看到显示结果“不正常” 时,你会很沮丧的。相反,您应该先将您的代码完善,然后再设法为较低级的浏览器打算。这样从一开始您的代码就是符合标准的,你不必再为支持其他浏览器而劳心费神。当然了,目前遵从标准的浏览器无疑就是 Mozilla, Safari 或 Opera。
二、确保您期望的效果确实存在
  许多特定的浏览器专有的CSS扩展在正式标准中并不存在。 如果您对 filter(滤镜)或滚动条指定了样式,那么您就用了私有代码,除了IE之外,在别的浏览器中毫无作用。如果验证器告诉您代码没有定义,极有可能您用了私有样式,这样在不同的浏览器中很难达到一致的效果。
  如果布局中一定要用浮动对象,别忘了适时使用清除(clear)属性。
  浮动对象似易实难,而且不总是令人如愿以偿。如果您发现浮动对象伸出了容器的边界,或者不像您所期望的那样显示,请检查您的期望是否正确。关于这个问题请看Eric Meyer的教程
  边距的合并:可用padding 或 border 来避免。
  您可能被多余的(或者想要却不出现的)空白搞得焦头烂额。如果您用了 margins,边距的合并可能就是问题的根源。 Andy Budd 对此的解释可能为你解惑。
  避免将 padding/border 和固定宽度同时应用到同一元素。
  IE5 的区块模型是错误的,是它把事情办坏了。对此也有权宜之计,不过最好是绕过这个问题,当子元素的宽度固定时,为父元素指定padding。
三、避免IE下未指定样式内容的闪烁。
  如果您仅仅靠 @import 来输入外部样式表,早晚您会发现IE有“闪烁”的毛病。在应用CSS样式之前,未经格式化的HTML文本会短暂地出现。这是可以避免的。
四、别指望 min-width 在IE中有用。
  IE不支持它,但是它将 width 当作 min-width,所以通过一些 IE 的过滤技巧(filtering),可以实现同样的最终效果。
  把CSS过滤器(filters)当作最后的手段
  CSS 技巧和过滤器可以使您有选择地应用到(或者不应用到)某些元素。应当尽可能地找到标准的跨浏览器的解决办法来实现您想要的效果,而不是动不动就使用过滤器。要将它当成走投无路时的救命手段。在这里可以找到大量的CSS 过滤技巧。[译注:不要把这里的filters和IE中的滤镜混淆。由于各个浏览器对CSS标准的支持程度不一,人们找到了许多技巧,将浏览器无法解释或错误解释的样式表或规则屏蔽掉。这就是所谓的CSS过滤器或技巧。webjx.com
  如果使用了锚点,在应用超链接样式时要特别小心。
  如果您在代码中使用了传统的锚点(),您会注意到 :hover 和 :active伪类也会作用于它。要避免这种情形,你可以使用 id,或者使用鲜为人知的语法: :link:hover, :link:active
五、记住“LoVe/HAte”(爱/恨)链接规则
  要以下面的顺序指定超链接伪类:Link, Visited, Hover, Acitve。任何其他顺序都不妥当。假如用了:focus,次序应为 LVHFA(“Lord Vader‘s Handle Formerly Anakin”,Matt Haughey这样建议)。
  请记住“TRouBLED”(麻烦的)边框。
  边框(border)、边距(margin)和补白(padding)的简写次序为:顺时针方向从上开始,即 Top, Right, Bottom, Left。比如 margin: 0 1px 3px 5px;表示上边距为零,右边距为1px,依此类推。
六、非零值要指明单位。
  在用CSS指定字体、边距或大小时,必须指明所用的单位。某些浏览器对未指明单位的处理方法不足为凭。零就是零,不管是 px还是em还是其他单位,它不需要单位。例如: padding: 0 2px 0 1em;
七、测试不同的字体大小。
  像Mozilla和Opera这样的高级浏览器允许对字体进行缩放,不管你用的是什么单位。某些用户的默认字体大小肯定和您的不同,尽最大努力去满足他们。
  用嵌入式测试,发布时改为输入。
  将样式表嵌入在你的HTML源代码中,在测试时可以消除许多缓存引起的错误,尤其是某些Mac下的浏览器。但在发布前,一定要记住将样式表移到外部文件,用 @import 或 引入。
八、加上明显的边框有利于布局调试。
  像 div {border: solid 1px #f00;} 之类的全局规则可以暂时为你查出布局问题。为特定的元素加上边框可帮您找到难以发觉的交错或空白问题。
  对图片路径不要用单引号。
  当设置背景图片时,要坚持用双引号。尽管看起来有些多余,但是如果不这么做,IE5/Mac会噎住。
  不要为将来的样式表(比如手持式设备或打印用样式表)留个“空位”。
  Mac IE5 对空的样式表比较感冒,会增加页面的装入时间。建议样式表中至少应该有一条规则(哪怕是注释也好),免得 MacIE噎住。
  另外值得一提的还有一些虽然不针对某些功能,但是在开发过程中应当注意的理论
九、好好组织您的CSS文件
  恰当地成块注释CSS,将相似的CSS选择符编为一组,养成一致的命名习惯和空白格式(为跨平台考虑,建议用空白字符而不是tab。)以及适当的次序。
  以功能(而不是外观)为类和ID命名
  假如您创建了一个 .smallblue 类,后来打算将文字改大,颜色变为红色,这个类名就不再有任何意义了。相反,您可以用更有描述性的名字如 .copyright 和 .pullquote。
十、组合选择符
  保持CSS短小对减少下载时间非常重要。请尽量为选择符分组、 利用继承(inheritance)以及使用简写(shorthand)来减少冗余。
  使用图片替换技术时要考虑亲和力
  已经发现传统的FIR在屏幕阅读器,以及关闭图片显示[的浏览器]中会出问题。 对此有其他解决办法,要根据具体情况,慎重使用。

标签:CSS  网页布局  zhushican发布于2014/8/17围观评论:0

网页设计时遇到CSS BUG问题及解决方法

    网页切片是网页设计过程中一个非常重要的技术,能够让网站在用户的浏览器里面下载的比较快,要不然需要用户浏览器下载完整个页面才能够打开,如果用户的脾气比较急的话,你的网站可能还没有打开,这些用户就等不及关闭了网站了!如果要使用到网页切片技术,就不可避免会遇到CSS BUG问题!对于很多站长而言,或者网页设计师而言,一旦出现了CSS BUG,往往会让自己非常郁闷,因为有时候一整天都没有办法找到出现CSS BUG问题的深度原因!
  笔者认为,在网页设计时,出现CSS BUG往往是有迹可循的,就像是很多程序源代码出现bug后,我们通过技术分析,通过原先的注释文件,往往能够找到出现bug的原因,其实我们在编写网页设计时,要遵循很好的设计习惯,比如代码语义化,模块化,代码书写规范化,当然更要符合WEB标准,这样就能够帮助自己避免很多bug问题,就算是有,那么通过注释和一目了然的代码语义,就很容易找到问题出现在哪里了!下面笔者就来分析一下具体的方法!

标签:网页设计  CSS  BUG问题  解决方法  zhushican发布于2014/8/17围观评论:0

网站建设中如何给页面规范命名css

  css3已经发布了,许多WEB前端工程师都开始尝试使用该技术了。我们怎样来评价编写css的能力呢?不会用对与错来判断,我们可能会用“好”、“一般”、“很烂”等字眼来形容。CSS最难的是什么呢?是各大浏览器的兼容?是代码的简洁高效性?前端工程师五指曾说过:css不是什么难的技术,难点在于怎样规范的命名。项目由个人完成,工程师可以依据自己的习惯来命名css。在团队合作中,不规范的命名侧可能会引发起冲突,从而影响到整个项目的进度。下面手把手教大家如何规范的命名css。

  划分css可以有多种角度,如按功能划分:将字体的css存放在font.css;将控制颜色的css存放在color.css;将控制布局的css存放在layout.css;或者按区块划分:将头部的css存放在header.css;将底部的css存放在footer.css;将侧边栏存放在sidebar.css;将主题存放在main.css。不同的角度有划分都有自己的利与弊。

标签:网站建设  页面规范命名  CSS  zhushican发布于2014/8/17围观评论:0

Div+CSS教程:CSS透明相关技巧的介绍

这篇汇总主要是提供一些CSS不透明的详细介绍,代码示例和解释,以实现这项有用的CSS技术在您的项目中兼容所有浏览器。更多的技巧欢迎参考52CSS.com上面的技术文档。
  关于CSS 透明度,有一点需要注意的是,它虽然使用了很多年,但它一直以来都不是一个标准属性。它是一种非标准技术,应该是CSS3规范的一部分。
  一、旧的Opacity设置
  以下代码是Firefox和Safari旧版本所需的透明度设置:
 Example Source Code [www.52css.com]
#myElement {      -khtml-opacity: .5;      -moz-opacity: 0.5;  } 
-khtml-opacity设置是针对旧版本的Webkit渲染引擎,这种专用属性现在已经过时了,除非你还有需要兼容Safari 1.x.的用户。
  第二行使用专用属性 -moz-opacity是 为了兼容Mozilla渲染引擎的早期版本,以及追溯到Netscape Navigator。Firefox 0.9以后就不要求使用-moz-opacity属性,Firefox 3.5(现在使用Gecko引擎)已经不在支持这个属性。
  二、在Firefox, Safari, Chrome和Opera下的CSS透明度
  以下代码是除了IE外的所有当前浏览器的最简单,最最新的不透明度设置的CSS语法:
 Example Source Code [www.52css.com]
#myElement { opacity: .7; } 
  上述语法将设置一个元素为70%不透明(或30%透明)。设置opacity:1将使元素不透明,而设置opacity:0将使得元素完全不可见。你 只要记住“opacity”等同于“不透明”就很容易记住了,opacity值越小就越接近透明。
  opacity属性可以精确地小数点后两位,所以值取“.01”和“.02”实际上是不同的,虽然可见度很难被发觉。一般情况下,精确到一位就可以了,取值如“.3”或“.7”。
  三、IE下的CSS透明度
  IE下照旧有别于其他浏览器,并且目前也有三个不同版本的IE在广泛使用,透明度设置是不同的,有时需要额外的CSS来控制:
 Example Source Code [www.52css.com]
#myElement {      filter: alpha(opacity=40);  } 
  上面的CSS使用专用的filter属性来设置IE6-8透明度。对于IE6和IE7需要注意:为了使得透明设置生效,元素必须是“有布局”。一个元素可以通过使用一些CSS属性来使其被布局,有如width 和 position。关于微软专有的hasLayout属性详情,以及如何触发它,欢迎参考52CSS.com相关文档。
  另外一个设置IE8的CSS透明度的方法语法如下(注意注释中指出的版本):
 Example Source Code [www.52css.com]
#myElement {      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);    
/* 第一行在IE6, IE7和IE8下有效 */    
-ms-filter:       "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";   
/*第二行仅在IE8下有效 */} 
  第一行代码针对当前所有IE版本,第二行仅针对IE8。
  注意两行代码的不同之处:在第二行代码中,在filter属性前跟着-ms-前缀,并且属性值有加引号,这些都是语法所必须的。
  说实在,有了如前一个例子中用alpha(opacity=40)的语法来作用于任何版本的IE下的任何有布局的元素之后,我也不确定是否还有必要用“progid”的方法。
  四、使用JavaScript设置和改变CSS透明度
  您可以使用下面的语法访问JavaScript中的CSS opacity 属性:
 Example Source Code [www.52css.com]
document.getElementById("myElement").style.opacity = ".4"; 
// 针对所有现代浏览器  document.getElementById("myElement").style.filter =    "alpha(opacity=40)";
// 针对IE
  上面的代码可以使用行内循环或者其他动态函数递增修改透明度的值。当然,你必须先通过特征检测来决定使用哪一行代码。
  五、使用JQuery设置和改变CSS透明度
  直接使用jQuery设置CSS透明度更直观更容易实现,因为在所有浏览器代码都一样,并且你不必担心在IE下元素是否“haslayout”:
 Example Source Code [www.52css.com]
$("#myElement").css({ opacity: .4 }); // 所有浏览器有效
  您也可以使用一下jQuery代码使一个元素动画透明:
$("#myElement").animate({      opacity: .4      }, 1000, function() {    
// 动画完成,所有浏览器下有效  }); 
  不管元素的透明度在动画开始时是多少,它都会渐变到透明度为“.4”。动画的速度通过值“1000”设定,动画时间以毫秒为单位。代码中的最后一个属性是一个可选回调函数,将在动画完成后执行。
  如果该元素的透明度在CSS中已经设定为“.4”,那在动画运行的时候,你将不会发觉有任何不同,所以动画开始和最终透明度要有所不同。
  六、通过RGBA的透明度
  另一个CSS3技术只支持部分新的浏览器(Firefox 3+, Opera 10.1+, Chrome 2+,Safari 3.1+),可通过RGBA的alpha通道的方式设定。语法如下:
 Example Source Code [www.52css.com]
#rgba {      background: rgba(98, 135, 167, .4);  }
  在上面的定义中,通过RGB(前三个数字)给背景设定颜色,然后最后一个是alpha设置,以执行给定颜色的透明度。这个alpha设置跟opacity 属性一样,可设定任何0到1的数字,精确得到两位小数点。数字值越大,就越接近完全不透明的颜色。
  七、通过 HSLA的透明度
  类似之前的定义,CSS3还允许使用HSLA单独设置颜色和alpha值,HSLA表示Hue(色调), Saturation(饱和度), Lightness(亮度), 和Alpha。以下是HSLA透明的例子:
 Example Source Code [www.52css.com]
#hsla {      background: hsla(207, 38%, 47%, .4);  } 
  更多关于HSLA颜色的解释,参考这篇来自W3.org的文章。如同RGBA透明度,最后的数字表示透明度设置,跟RGBA起同样的作用。注意RGBA和HSLA透明度的一个重要的好处是这些透明度设置不会影响到子元素的,但通过opacity属性的方式则会。alpha设置的RGBA和HSLA只影响背景颜色的透明度,仅此而已。

标签:DIVCSS  教程  CSS  zhushican发布于2014/8/17围观评论:0

详谈CSS网页布局中容易发生的错误编码

 随着CSS网页布局越来越普及,国内大部分网站已经采用CSS网页布局的制作方法,现在52CSS.com也成为了CSS网页布局技术学习的先锋站点。在应用DIV+CSS编码时很容易犯一些错误,这里列举一些常见的错误,帮助新手朋友更好的学习与进步。
  一、检查HTML元素是否有拼写错误 是否忘记结束标记
  即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
  二、检查CSS是否正确
  检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。
  三、确定错误发生的位置
  如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。
  四、利用border属性确定出错元素的布局特性
  使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。
  五、float元素的父元素不能指定clear属性
  MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是MacIE的著名的bug,倘若不知道就会走弯路。
  六、float元素务必指定width属性
  很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。
  七、float元素不能指定margin和padding等属性
  IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。
  八、float元素的宽度之和要小于100%
  如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
  九、是否重设了默认的样式?
  某些属性如margin、padding等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。
  十、是否忘记了写DTD
  如果无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头。

标签:CSS  网页布局  错误编码  zhushican发布于2014/8/17围观评论:0

经验之谈:CSS网页布局避免滥用DIV元素

 CSS网页布局应该避免滥用div元素一直是我们倡导的,以合适的HTML标签组织文档是CSS网页布局的基础。
  页面中div与span元素的使用是一个新问题,我们也容易过多的使用它们。必要及合理的使用div可以明显的增强文档的结构性。这也是52CSS.com一直提倡的。
  如果你审视你的HTML文档,发现有着很多的div与span,那你就得换一个眼光来看问题了,是不是存在滥用的情况?
  是不是还有更好的标记来替代它们?若h1可以更好的表示所标记的内容,那你就得放弃p或span来定义。
  或许这是一对矛盾,我们本身也较难把握该如何正确的使用它们,也或许我们根本就得不到一个明确的答案。
  但有一点需要阐明,我们应该使文档在逻辑上具有清晰的结构,而且更加容易应用样式。
  我们可以将div仅看着是一个容器,或者叫做文档的组成“部分”。
  我们使用太多的容器,并不是一个明智的模式。
  而恰到好处居于合理位置的容器,可以让整个文档显的很有条理。

标签:经验之谈  CSS  网页布局  DIV元素  zhushican发布于2014/8/17围观评论:0

回顶部