当前位置:  编程技术>WEB前端

做网页中需要掌握的八个CSS布局技巧

    来源: 互联网  发布时间:2014-09-06

    本文导语:  1.若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS 都有检测工具可用,请见 http://validator.w3.org 。请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误;我们...

1.若有疑问立即检测

在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS 都有检测工具可用,请见 http://validator.w3.org 。请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误;我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减。

2.使用浮动功能时记得适当清除指令 

浮动是个危险的功能,未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况,请先确定您的做法是正确的。请参阅Eric Meyer 在Complex Spiral Consulting Web 网站上的教学。

3.边界重合时利用padding或border来避免

您可能会为了一点不应该出现的空间而焦头烂额,或者您需要一点点空间时,怎样都挤不出来。如果您有用到margin,那么很容易产生边界的重合;Andy Budd在他的网站上解释了可能的做法。

4.尝试避免同时对元素指定padding/border以及高度或宽度

Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题,但如果母元素需要指定高度与宽度时,最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时,在母元素套用padding以达效果。

5.不要依赖min-width/min-height

Windows版IE并不支援两种语法。但是在某种程度下,windows版IE可以达到相当于min-width/min-height的效果,所以只要对IE做点过滤功能,即可达到您想要的结果。

6.若有疑问,先减少百分比

有时候某些错误会使50%+50%成为100.1%,使网页出现问题。这时请尝试将这些值改为49%,甚至49.9%。

7.记住“TRouBLed”写法

Border,margin与padding的简写语法有特定顺序,从上方开始顺时针方向转动:top,right,bottom,left. 所以margin:0 1px 3px 5px;的结果是上方无边界,右边1像素,以此类推。记住“TRouBLe”,您就不会弄错次序了。

8.只要不是零的值,都要指定单位

CSS需要您对每个font,Margin等各种值指定单位。(唯一的例外是line-height)

    
 
 

您可能感兴趣的文章:

  • 网页设计布局基础第1/4页
  • CSS网页布局框架 Elastic
  • 网页的网格布局效果 Profound Grid
  • WEB标准网页布局中尽量不要使用的HTML标签
  • 用标准件的方式来组装网页DIV布局-WEB标准网站设计心得
  • css布局网页水平居中常用方法
  • CSS网页布局入门教程2:一列自适应宽度
  • css网页布局中注意的几个问题小结
  • DIV CSS网页布局 最小高度(min-height)的妙用
  • div+CSS网页布局的意义与副作用原因小结第1/2页
  • DIV+CSS网页另类上下布局的实例代码
  • 数据库 iis7站长之家
  • CSS网页布局入门教程6:左列固定,右列宽度自适应
  • CSS网页布局入门教程5:二列宽度自适应
  • 网页布局设计的标准尺寸
  • CSS网页布局入门教程4:二列固定宽度
  • CSS网页布局入门教程7:二列固定宽度居中
  • 组合CLASS来完成网页布局风格
  • CSS网页布局入门教程1:一列固定宽度
  • CSS网页布局入门教程14:纵向下拉及多级弹出式菜单
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 网页设计者需要了解的_网页字体大小数据参考
  • 使用curl命令下载网页,问题比较具体,需要手动实验
  • 网页支持.264文件播放需要APACHE配置什么服务吗?
  • 想找份"网页设计员"的工作 , 请问我需要具备哪些条件 ?
  • 怎样在DOS底下,执行一个网页连接,不需要显示!
  • RedHat9.0 网页不能浏览flash,需要安装什么插件?
  • ===java怎样访问需要登录才能查看的网页????急!!===
  • linux系统下的火狐浏览器在浏览网页的时候一直提示:您需要其他插件以显示此页面的所有媒体
  • web网页自动跳转方法:Html body onload自动跳转举例
  • linux浏览网页时怎样显示网页中的flash动画?
  • Python获取网页编码的方法及示例代码
  • 怎样把整张网页内容当作一副图形(只能作为图像,因为可能网页中有图)传给控制打印的Java程序?
  • HTML网页中的html body onload自动跳转方法介绍及自动跳转代码示例
  • 为什么我用netscape浏览时,网页不正常(主要是动态网页)碰到分类排序的就显示不了了
  • HTML网页的Meta Refresh自动跳转方法介绍及Meta Refresh自动跳转代码示例
  • [求助][排错]一段利用socket连接网页,并将网页内容拷贝下来的程序。。。[有一点问题]
  • 中文网页快速去重算法研究
  • 关于session(我停了一会儿没动网页,再在点击网页链接时,session丢失,然后点击IE的刷新,session又有了)这是怎么回事。
  • VPN虚拟局域网和本地局域网共存(连上vpn后正常打开网页)
  • C#实现将网页保存成图片的网页拍照功能
  • 基于python实现的网络爬虫功能:自动抓取网页介绍
  • 如何在red hat的网页浏览器中浏览使用ipv6协议的网页?
  • HTML网页中的javaScript自动跳转方法介绍及javaScript自动跳转代码示例
  • eidt.jsp对网页进行编辑,网页内容存放在数据库中,其中有些字段用textarea多行编辑框显示,保存提交数据库后,再次对它编辑,那些用多行
  • Python3通过request.urlopen实现Web网页图片下载
  • 各位高手请帮忙,如果我在框架网页中弹出一个新的窗口,在新窗口中执行一定的操作后,怎样让框架网页自动刷新?
  • 在样式表中,用submit提交信息到下一个网页,在下一个网页中如何知道该submit的name??谢谢了
  • ★★Linux服务器的网页响应发送给客户端的网页被修改,估计服务器中毒了,怎么办??
  • 网页下载文件期间如何防止用户对网页进行其他操作


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3