`
thtwin
  • 浏览: 165855 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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声明。
分享到:
评论

相关推荐

    CSS网页布局时常犯的几种小错误小结

    CSS网页布局时常犯的几种小错误:  1. 检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。  2. 检查CSS是否书写正确 检查一下...

    CSS 网站布局实例

    主要布局模式有以下几种: - **流体布局**:元素宽度根据浏览器窗口大小自动调整,提供良好的响应式体验。 - **固定布局**:元素尺寸固定,不随窗口大小变化而变化,适用于内容较少、结构简单的页面。 - **混合...

    div+css布局教程入门

    Div+CSS布局是现代网页设计中最常用的布局方式之一。它利用HTML中的`<div>`标签结合CSS(Cascading Style Sheets)样式来实现网页的布局与美化。这种方式不仅能够提高网页的加载速度,还能够更好地实现内容与表现的...

    css实现登陆界面的代码

    这个简单的登录界面示例适合初学者学习CSS布局和样式。随着技能的提高,你可以添加更多的功能和细节,使界面更加专业和用户友好。记得实践是提升技能的最佳方式,尝试修改代码并创建自己的登录界面吧!

    CSS常用网站布局实例

    6. **Position**: 用于定义元素的具体位置,包括静态、相对、绝对和固定等几种定位方式。 7. **Clear**: 清除浮动,使元素不与前面的浮动元素重叠。 #### 二、具体示例解析 ##### 示例1:单列布局 **CSS代码**: ...

    DIV+CSS完美布局.pdf

    ### DIV+CSS完美布局知识点详解 #### 一、DIV+CSS布局基础概念 ...综上所述,DIV+CSS布局不仅能够实现网页的美观布局,还能提高页面的加载速度和维护效率。了解和掌握这些基础知识对于前端开发者来说至关重要。

    DIV+CSS布局大全

    ### DIV+CSS布局大全知识点详解 #### 一、DIV+CSS布局基础概念 - **DIV+CSS**是一种网页布局方式,其中**DIV**是HTML中的一个容器标签(`<div>`),用来组合文档中的行内元素,使其成为独立的块级元素;而**CSS**...

    两天学会网页布局(Xhtml+Css)

    ### 网页布局(Xhtml+Css)核心知识点解析 #### 一、基础知识概览 **1.1 DIV+CSS的正确理解** - **错误认知**:很多人将使用`DIV`标签加上`CSS`样式来布局的方式称为`DIV+CSS`,这是一种不太准确的说法。 - **正确...

    用css网站布局之十步实录.pdf

    通过CSS设置页脚的背景颜色、字体样式以及排版布局,可以增强页面的专业感。 第九步:导航条的制作 导航条是网站中不可或缺的部分,它允许用户快速访问网站的不同页面。导航条可以通过无序列表()和列表项()来...

    HTML+CSS实现登陆页面样式布局,简单的网页布局

    这个“HTML+CSS实现登陆页面样式布局”的主题涵盖了如何利用这两种技术来创建一个基本的登录页面,这对于初学者,尤其是大一大二大三的学生来说,是一个很好的实践项目,有助于巩固理论知识并提升实际操作技能。...

    邮件订阅css网页模板

    【邮件订阅CSS网页模板】是一种专门用于收集用户邮箱地址,以便进行邮件营销或定期更新通知的网页设计。这种模板通常包含简洁、吸引人的布局,旨在鼓励访客输入他们的电子邮件地址并订阅服务。在构建这样的模板时,...

    CSS3实现仿360错误提示页面代码.zip

    在构建360错误提示页面时,CSS3的以下几个特性至关重要: 1. **选择器增强**:CSS3提供了更强大的选择器,如类选择器、属性选择器和伪类选择器,允许开发者更精确地定位和控制元素的样式。例如,`:hover`、`:active...

    W3C网页标准、div+css教程、xhtml+css介绍

    使用XHTML编写严格且无错误的结构化文档,然后通过CSS控制样式和布局,提高了网页的可读性、可访问性和跨浏览器兼容性。 1. **XHTML语法**:XHTML要求所有标签都闭合,属性值必须用引号包围,确保文档结构清晰。 2...

    css标签自动生成器

    这样的工具对于初学者或者需要提高工作效率的专业人士来说,尤其有用,因为它简化了编写HTML和CSS的流程,避免了手动编写时可能犯的错误。 在HTML中,标签是用来定义网页内容和结构的关键元素,如`<div>`、`<p>`、`...

    CSS网页悬浮在线人工客服代码.zip

    在网页设计中,CSS(Cascading Style Sheets)是一种用于控制网页元素呈现样式的语言,而JavaScript(JS)则是一种编程语言,常用于增加网页的交互性和动态效果。"CSS网页悬浮在线人工客服代码.zip" 提供了一种实现...

    微信小程序图片瀑布流布局demo

    在这个“微信小程序图片瀑布流布局demo”中,我们将会探讨如何在微信小程序中实现图片的瀑布流展示,这是一种常见的网页和移动应用设计模式,尤其适用于图片分享和展示类应用。 瀑布流布局,又称为无限滚动或荷叶边...

    vs2008的精彩布局

    VS2008提供的CSS布局功能主要包括以下几个方面: 1. **源代码编辑器**:VS2008内置的源代码编辑器支持CSS语法高亮、自动完成和错误检查,这使得编写CSS代码变得更加高效。你可以直接在编辑器中添加、修改或删除样式...

Global site tag (gtag.js) - Google Analytics