`

10个 DIV+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:
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
分享到:
评论

相关推荐

    table布局网页转换为div+CSS布局的转换软件

    在网页设计领域,传统的`table`布局曾是构建网页结构的主要方式,但随着Web标准的发展,`div`结合`CSS`布局(层叠样式表)逐渐成为主流。...不过,理解和掌握`div+CSS`布局原理仍然是每个前端开发者的必备技能。

    DIV+CSS入门教程

    在学习"Div+CSS"时,应注意以下几点: 1. 理解Web标准的重要性,包括XHTML、CSS和JavaScript等组成部分。 2. 正确使用XHTML标签,每个标签都有其特定的语义,不应过度依赖单一的标签如DIV。 3. 学习并掌握CSS选择器...

    纯div+css轮播图片切换图片

    在网页设计中,纯div+css实现的图片轮播是一种常见的动态效果,它能为网站增添生动性,吸引用户注意力。下面将详细讲解这个主题,包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 ...

    div+css常见兼容性问题

    浮动元素可能导致父元素高度塌陷,为了解决这个问题,我们可以使用“clearfix”类。添加如下CSS: ```css .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; ...

    div+css网页设计

    在使用div+css设计网页时,还需要注意性能优化。这包括减少HTTP请求次数(合并CSS文件)、压缩CSS代码、正确使用内联样式和外部样式表、以及避免使用影响渲染的复杂布局等。 综上所述,"div+css网页设计"是一个涵盖...

    DIV+CSS网页布局教程DIV+CSS网页布局技巧如何实现DIV+CSS网页布局.pdf

    在网页设计过程中,如何应用DIV+CSS布局是一个非常重要的问题。首先需要构思网页的布局,使用PhotoShop或FireWorks等图片处理软件将需要制作的界面布局简单的构画出来。然后,需要根据构思图来规划一下页面的布局,...

    div+css电子书

    【CSS与Div+CSS简介】 CSS(层叠样式表)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。它允许我们将样式信息(如颜色、字体、布局等)从内容中分离出来,使网页设计更加结构化...

    DIV+CSS实用手册

    通常,当你需要创建一个大块的区域,比如页面头部、主体部分或者侧边栏时,使用DIV是比较合适的。不过,要注意避免过度使用DIV导致的代码复杂性,合理利用HTML的其他元素,如`<header>`、`<nav>`、`<article>`等语义...

    Div+CSS简单布局

    通过设置Div的`class`或`id`属性,我们可以为每个Div赋予独特的标识,以便在CSS中进行选择和样式化。 **Div嵌套**: Div可以嵌套在其他Div内,形成层次化的结构。这种嵌套使得网页结构更清晰,有助于构建复杂的页面...

    Div+CSS 样式的使用演示

    但需要注意的是,浮动可能会导致父元素的高度塌陷,因此需要使用清除浮动(Clear Fix)来解决这个问题。一种常见的清除浮动的方法是使用伪类`::after`: ```css .clearfix::after { content: ""; display: table;...

    div+css简介及他们之间的关系

    【标题】:“div+css简介及他们之间的关系” 【描述】:“介绍了div+css架构,以及一个函数的用法” ...然而,要注意的是,良好的网页设计并不仅仅依赖于技术,还需要考虑内容的组织、可访问性以及SEO策略等多个方面。

    32套DIV+CSS商业网站模板

    《32套DIV+CSS商业网站模板深度解析》 在当今互联网时代,网站设计与开发已经成为企业形象展示、产品推广和服务...在使用过程中,我们需要结合自身需求,灵活运用,同时注意版权和安全性问题,以实现最佳的网站效果。

    div+css布局制作横向带箭头步骤流程样式

    6. **浏览器兼容性**:在编写CSS时,需要注意不同浏览器对某些属性的支持程度。例如,`Flexbox`和`Grid`布局在较旧的浏览器中可能不支持,此时可以使用传统方法(如浮动或`display: inline-block`)来实现类似效果。...

    电子科技产品div+css全套企业网页模板

    总的来说,这套“电子科技产品div+css全套企业网页模板”结合了技术优势和设计美感,旨在为电子科技企业提供一个高效、专业且具有吸引力的在线展示平台,帮助企业提升品牌影响力,吸引潜在客户。

    一个DIV+CSS+JAVASCRIPT+FLASH的简单设计网站

    然而,需要注意的是,由于对移动设备支持不佳以及安全性问题,Flash已不再是首选的交互元素。 在实际项目中,这四者通常是结合使用的。例如,我们可以通过CSS将Flash嵌入网页,并用JavaScript控制其播放、暂停等...

    Div+Css 好用的几个后台模板

    "Div+Css 好用的几个后台模板" 提到的资源可能是一些预设的、基于Div+CSS 的后台界面设计,帮助开发者快速搭建功能完善的管理平台。以下是对Div+CSS及相关知识点的详细解释: 1. Div(Division):在HTML中,`<div>...

    DIV+CSS商业案例与网页布局源代码

    本资源包包含了多个基于DIV+CSS的商业案例和网页布局的源代码,是学习和实践这一技术的重要参考资料。 1. **DIV元素的理解与应用**:在HTML中,`<div>`元素是一个通用容器,用于组合其他HTML元素,通过CSS来控制其...

    DIV+CSS10个模板(有含内页)

    【标题】"DIV+CSS10个模板(含内页)" 涉及的知识点: 在网页设计领域,DIV+CSS是一种广泛采用的布局技术,它将内容(HTML元素)与样式(CSS)分离,提高了网页的可维护性和可访问性。这个标题提到的“10个模板”是一...

    DIV+CSS网页模板

    "DIV+CSS网页模板"这个资源集合提供了51个商业案例,涵盖了多种常见的网页布局模式,对于学习和实践网页设计来说极具价值。 首先,我们来详细了解一下这些布局形式: 1. "T"结构布局:这种布局常用于新闻类网站,...

Global site tag (gtag.js) - Google Analytics