• 站长首页
  • 网站
    采集规则 HTML模板 帝国模板 杰奇模板 网站插件
  • 技术资讯
    随心笔记 优化技巧 网站教程
  • 工具软件
    装机必备 手机软件 电脑软件 建站工具
  • 学习题库
快捷导航

网站

采集规则 HTML模板 帝国模板 杰奇模板 网站插件

技术资讯

随心笔记 优化技巧 网站教程

工具软件

装机必备 手机软件 电脑软件 建站工具

学习题库

网页布局中CSS布局调试的有效方法

栏目 关关 自适应 帝国 关闭 杰奇 共享 灵动

QQ联系
  • 站长首页

  • 帝国模板

  • 杰奇模板

  • 建站工具

  • 网站插件

  • 随心笔记

  • 优化技巧

  • 采集规则

  • 装机必备

  • 网站教程

  • 手机软件

  • 电脑软件

当前位置:首页 > 技术资讯 > 网站教程

网页布局中CSS布局调试的有效方法

时间:2020-01-16 13:23:13发布者:admin浏览:633次
正文

本文向大家介绍一下网页布局中CSS布局调试的有效方法,主要从十个方面来向大家介绍,希望本文介绍对你有所帮助。


  网页布局中CSS布局调试的有效方法

  

  网页设计中CSS布局是很重要的部分,下面介绍几种检查调试CSS布局的有效方法。


  1.检查HTML元素是否有拼写错误、是否忘记结束标记


  即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。


  2.检查CSS是否书写正确


  检查一下有无拼写错误、是否忘记结尾的}等。可以利用CleanCSS来检查CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。


  3.用删除法确定错误发生的位置


  如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。


  4.利用border属性确定出错元素的布局特性


  使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。


  5.float元素的父元素不能指定clear属性


  MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是MacIE的著名的bug,倘若不知道就会走弯路。


  6.float元素务必指定width属性


  很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。

  另外指定元素时尽量使用em而不是px做单位。


  7.float元素不能指定margin和padding等属性


  IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。


  8.float元素的宽度之和要小于100%


  如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。


  9.是否重设了默认的样式?


  某些属性如margin、padding等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。


  10.是否忘记了写DTD?


  如果无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头是不是忘了写下面这行DTD:4/loose.dtd">


   责任编辑:admin
  • 上一篇:css中英文字母和汉字行高不同怎么办
  • 下一篇:图片的翻转按钮怎么制作
  • 加入收藏
  • 打印

相关阅读

  • 一段HTML的跳转代码,挺好看的加载,所以分享出来!

    <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>正在进入</title> </head> <body> <form name=loading>  <p align=center>...

  • 2020-08-19
  • HTML5----响应式(自适应)网页设计与改写!

    现在,随着手机用户越来越多,手机访客已经慢慢超越PC端访客了,那如何让自己的网站自适应手机端,那么就需要我们在页面上下功夫,但移动端的布局不同于pc端,首先我们要知...

  • 2020-04-27
  • 通过浮动+定位实现两个div在同一行

    通过浮动+定位实现两个div在同一行代码如下:<div style="padding-top:10px;padding-bottom:2px;float:left;position:relative;"> <img src="images/icon1.png" width="60px...

  • 2020-01-16
  • 图片的翻转按钮怎么制作

    【图片的翻转按钮怎么制作】请问下面这张图片的翻转按钮是用什么方法制作的。    是把一个透明图片当背景。还是CSS透明实现的。  .btn{  width : xxpx;  height...

  • 2020-01-16
  • 网页布局中CSS布局调试的有效方法

    本文向大家介绍一下网页布局中CSS布局调试的有效方法,主要从十个方面来向大家介绍,希望本文介绍对你有所帮助。  网页布局中CSS布局调试的有效方法    网页设计中CS...

  • 2020-01-16

    资讯列表

    • 随心笔记
    • 优化技巧
    • 网站教程

    文章排行榜

    • 1IIS多个协议 显示一个问号如何修复?
    • 2怎样给网页添加天气预报代码插件
    • 3帝国cms前台投稿不显示栏目的解决方法
    • 4帝国CMS无限级栏目导航实用教程-帝国三级导航使用方法
    • 5帝国cms栏目更改后刷新没反应
    • 6织梦生成栏目、频道、文章拼音伪静态的方法及规则
    • 7他们说的多终端登录/共享/同步/运行是什么意思?
    • 8帝国cms单页栏目模板制作(关于我们、公司简介、联系我们)
    • 9帝国CMS如何自动生成sitemap.xml网站地图文件
    • 10Linux强制删除文件夹和文件的命令

    热门标签

      关关采集规则书写时   打印机显示正在删除   静默复制JS   php代码记录UA   php代码   记录访客访问时间   记录访客IP   帝国CMS的灵动标签   无缩略图   隐藏的DIV通过点击显示出来   jquery.min.js   两套数据库小说站   无法用正则匹配做301永久重定向   PHP正则替换变量   PHP替换变量   str_replace   preg_replace   静默复制   网址输入跳转   html跳转网址加载
    返回
    顶部

    备案号:冀ICP备17005505号-1

    Copyright © 2018-2019 电脑屋 版权所有

    ×