`
- 浏览:
165855 次
- 性别:
- 来自:
成都
-
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声明。
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
CSS网页布局时常犯的几种小错误: 1. 检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 2. 检查CSS是否书写正确 检查一下...
主要布局模式有以下几种: - **流体布局**:元素宽度根据浏览器窗口大小自动调整,提供良好的响应式体验。 - **固定布局**:元素尺寸固定,不随窗口大小变化而变化,适用于内容较少、结构简单的页面。 - **混合...
Div+CSS布局是现代网页设计中最常用的布局方式之一。它利用HTML中的`<div>`标签结合CSS(Cascading Style Sheets)样式来实现网页的布局与美化。这种方式不仅能够提高网页的加载速度,还能够更好地实现内容与表现的...
这个简单的登录界面示例适合初学者学习CSS布局和样式。随着技能的提高,你可以添加更多的功能和细节,使界面更加专业和用户友好。记得实践是提升技能的最佳方式,尝试修改代码并创建自己的登录界面吧!
6. **Position**: 用于定义元素的具体位置,包括静态、相对、绝对和固定等几种定位方式。 7. **Clear**: 清除浮动,使元素不与前面的浮动元素重叠。 #### 二、具体示例解析 ##### 示例1:单列布局 **CSS代码**: ...
### DIV+CSS完美布局知识点详解 #### 一、DIV+CSS布局基础概念 ...综上所述,DIV+CSS布局不仅能够实现网页的美观布局,还能提高页面的加载速度和维护效率。了解和掌握这些基础知识对于前端开发者来说至关重要。
### DIV+CSS布局大全知识点详解 #### 一、DIV+CSS布局基础概念 - **DIV+CSS**是一种网页布局方式,其中**DIV**是HTML中的一个容器标签(`<div>`),用来组合文档中的行内元素,使其成为独立的块级元素;而**CSS**...
### 网页布局(Xhtml+Css)核心知识点解析 #### 一、基础知识概览 **1.1 DIV+CSS的正确理解** - **错误认知**:很多人将使用`DIV`标签加上`CSS`样式来布局的方式称为`DIV+CSS`,这是一种不太准确的说法。 - **正确...
通过CSS设置页脚的背景颜色、字体样式以及排版布局,可以增强页面的专业感。 第九步:导航条的制作 导航条是网站中不可或缺的部分,它允许用户快速访问网站的不同页面。导航条可以通过无序列表()和列表项()来...
这个“HTML+CSS实现登陆页面样式布局”的主题涵盖了如何利用这两种技术来创建一个基本的登录页面,这对于初学者,尤其是大一大二大三的学生来说,是一个很好的实践项目,有助于巩固理论知识并提升实际操作技能。...
【邮件订阅CSS网页模板】是一种专门用于收集用户邮箱地址,以便进行邮件营销或定期更新通知的网页设计。这种模板通常包含简洁、吸引人的布局,旨在鼓励访客输入他们的电子邮件地址并订阅服务。在构建这样的模板时,...
在构建360错误提示页面时,CSS3的以下几个特性至关重要: 1. **选择器增强**:CSS3提供了更强大的选择器,如类选择器、属性选择器和伪类选择器,允许开发者更精确地定位和控制元素的样式。例如,`:hover`、`:active...
使用XHTML编写严格且无错误的结构化文档,然后通过CSS控制样式和布局,提高了网页的可读性、可访问性和跨浏览器兼容性。 1. **XHTML语法**:XHTML要求所有标签都闭合,属性值必须用引号包围,确保文档结构清晰。 2...
这样的工具对于初学者或者需要提高工作效率的专业人士来说,尤其有用,因为它简化了编写HTML和CSS的流程,避免了手动编写时可能犯的错误。 在HTML中,标签是用来定义网页内容和结构的关键元素,如`<div>`、`<p>`、`...
在网页设计中,CSS(Cascading Style Sheets)是一种用于控制网页元素呈现样式的语言,而JavaScript(JS)则是一种编程语言,常用于增加网页的交互性和动态效果。"CSS网页悬浮在线人工客服代码.zip" 提供了一种实现...
在这个“微信小程序图片瀑布流布局demo”中,我们将会探讨如何在微信小程序中实现图片的瀑布流展示,这是一种常见的网页和移动应用设计模式,尤其适用于图片分享和展示类应用。 瀑布流布局,又称为无限滚动或荷叶边...
VS2008提供的CSS布局功能主要包括以下几个方面: 1. **源代码编辑器**:VS2008内置的源代码编辑器支持CSS语法高亮、自动完成和错误检查,这使得编写CSS代码变得更加高效。你可以直接在编辑器中添加、修改或删除样式...