css网页布局中注意的几个问题小结

一、少用偏门。

　　类似break-word断行，z-index手动分层，还有像垂直对齐等等这些偏门CSS最好少用，因为不一定所有浏览器都支持，而且极难通过W3C检测。

　　二、center不是float的值。

　　很多新手都会把center误认为是float的值，而偏偏不是如此。center只是text-align的值。

　　三、对齐不能包括两个值。

　　很多新手会在float或者text-align中填写两个值，比如：float:left top。这是不允许的，浏览器也无法识别。

　　四、滚动条颜色最好不要自定义。

　　很多浏览器不能正常识别自定义颜色的滚动条，况且很多自定义颜色都不能通过W3C。

　　五、单独滚动条设置。

　　现在经常使用overflow-x（横向滚动条）或者overflow-y（纵向滚动条），在设置这个的时候经常会发现并不是所有的客户端上都有效果，大家在设置的时候最好在body和html同时进行设置。然而这个CSS也不是CSS2.1支持的（CSS2.1支持overflow，同时定义横纵滚动条），直到CSS3才支持这种定义方式。尽量少用。

　　六、background和color颜色相同会受到警告。

赞 (0)

相关推荐

  • css网页布局中注意的几个问题小结

    一.少用偏门. 类似break-word断行,z-index手动分层,还有像垂直对齐等等这些偏门CSS最好少用,因为不一定所有浏览器都支持,而且极难通过W3C检测. 二.center不是float的值. 很多新手都会把center误认为是float的值,而偏偏不是如此.center只是text-align的值. 三.对齐不能包括两个值. 很多新手会在float或者text-align中填写两个值,比如:float:left top.这是不允许的,浏览器也无法识别. 四.滚动条颜色最好不要自定义.

  • CSS网页布局入门教程6：左列固定，右列宽度自适应

    在实际应用中,有时候需要左栏固定宽度,右栏根据浏览器窗口大小自动适应,在CSS中实现这样的布局方式是简单可行的,只需在设置左栏的宽度即可,如上例中左右栏都采用了百分比实现了宽度自适应,而我们只需要将左栏宽度设定为固定值,右栏不设置任何宽度值,并且右栏不浮动,代码如下: 复制代码 代码如下: #left {      background-color: #E8F5FE;      border: 1px solid #A9C9E2;      float: left;      height: 3

  • CSS网页布局入门教程5：二列宽度自适应

    从二列固定宽度入手,开始尝试二列布局的情况下,左右栏宽度能够做到自适应,从一列自适应布局中我们知道,设定自适应主要通过宽度的百分比值设置,因此在二列宽度自适应的布局中也同样是对百分比宽度值的设计,继续上面的CSS代码,我们得新定义二列的宽度值: 复制代码 代码如下: #left {      background-color: #E8F5FE;      border: 1px solid #A9C9E2;      float: left;      height: 300px;      w

  • CSS网页布局入门教程4：二列固定宽度

    CSS网页布局入门教程4：二列固定宽度

    有了一列固定宽度作为基础,二列固定宽度就非常简单,我们知道div用于对某一个区域的标识,而二列的布局,自然需要用到两个div,XHTML代码如下: 复制代码 代码如下: <div id="left">左列</div>  <div id="right">右列</div> 新的代码结构中使用了两个id,分别为left和right,表示两个div的名称,我们所需要做的是,首先为它们制定宽度,然后让两个div在水平行中并排显示

  • div+CSS网页布局的意义与副作用原因小结第1/2页

    如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉.比较上手:但是,它却阻碍了一种更好的.更有亲和力的.更灵活的,而且功能更强大的网站设计方法--DIV+CSS. CSS网页布局的意义体现在如下方面: 一.使页面载入得更快 由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小.相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载.而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢. 二.降低流量费用 页面体积

  • CSS网页布局入门教程3：一列固定宽度居中

    CSS网页布局入门教程3：一列固定宽度居中

    页面整体居中是网页设计中最普遍应用的形式,在传统表格布局中,我们使用表格的align="center"属性来实现,.div本身也支持align="center"属性,也可以让div呈现居中状态,但css布局是为了实现表现和内容的分离,而align对齐属性是一种样式代码,书写在XHTML的div属性之中,有违背分享原则(分离可以使你的网站更加利于管理),因此应当css的方法实现内容的居中,我们以固定宽度一列布局代码为例,为其增加居中的css样式: 复制代码 代码如下:

  • CSS网页布局入门教程2：一列自适应宽度

    CSS网页布局入门教程2：一列自适应宽度

    自适应布局是网页设计中常见的布局形式,自适应的布局能够根据浏览器窗口的大小,自动改变其宽度和高度值,是一种非常灵活的布局形式,良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果.实际上div默认状态的占据整行的空间,便是宽度为100%的自适应布局的表现形式,一列自适应布局需要我们做的工作也非常简单,只需要将宽度由固定值改为百分比值的形式即可. 复制代码 代码如下: #layout {      border: 2px solid #A9C9E2;      background-co

  • CSS网页布局入门教程1：一列固定宽度

    CSS网页布局入门教程1：一列固定宽度

    本系列教程为入门级教程,适合初学者学习,由最简单的知识一点一点进阶.主要以实例为主,很少部分理论,这样更适应初学者快速掌握.因本人也正在学习,难免有一些错误或疏漏地方,望各位给予指正.本教程参考<CSS网站布局实录>一书,在此向作者表示感谢. 要想学好DIV+CSS,首先要有一定的HTML和CSS知识,如果这些你还不了解,建议你先去补习这一课,再来学习本教程.另外还要抛弃传统表格布局的思维模式,至于为什么,在你学习本教程中慢慢就会体会到.如果这些你都准备好了,那么开始吧! 一列固定宽度 一列固

  • HTML结构化：实践DIV＋CSS网页布局入门指南

    你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义.结构添加CSS.这篇文章将告诉你应该怎样把HTML结构化. 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.align="left"等等)束手无策,不知道该转换成对 应的什么CSS语句. 当你解决了第一种问题,知道了如何结构化你的HTML

  • CSS网页布局入门教程13：下拉及多级弹出式菜单

    下拉及弹出式菜单是网站设计中常用导航形式,这种菜单形式能够充分利用页面现在空间隐藏与显示更多内容,并能对内容进行合理的分类显示,是一种非常优秀的导航形式.  早期的下拉或弹出式菜单通过隐藏的layer或div来实现内容的隐藏,通过JavaScript脚本来响应用户的操作,目前也采用JavaScript+div或其它元素的形式来制作此类导航,不同的是整个导航都将使用符合标准的css布局来打造,不再使用表格来制作菜单,下拉式菜单是上面提到的横向导航与纵向导航的结合,而且通过css对于属性的众多支持,

随机推荐