Archive for the ‘DIV+CSS’ Category

CSS网页布局中易犯的10个小错误

星期一, 11月 30th, 2009

即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此。小错误却往往造成大问题,浪费很多无辜的时间来调试和排错。查看下面这份CSS网页布局中易犯的10个小错误,努力的修正你可能会犯的错误,加速你的前端开发效率。
 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 (阅读全文……)

(转)css命名规则

星期五, 11月 13th, 2009

由于项目中编写文档结构、编写CSS的人员较多,并与程序员协同工作,所以就需要统一开发规范,根据XHTMl和CSS编织的规范和大多人的习惯,整理了以下针对本项目的一个简单的开发规范:

一、CSS文件及样式命名

1、CSS文件命名规范

全局样式:global.css;

框架布局:layout.css;

字体样式:font.css;

链接样式:link.css;

打印样式:print.css;

2、CSS样式命名规范 (阅读全文……)

今日总结

星期二, 11月 10th, 2009

这是今天晚上学的东西,老师出的2道题,我可以慢慢凭着感觉写出来了!
<html>
<head>
</head>
<boby>
<div style=”border:1px solid #000;float:left;width:200;height:50px;”></div>
<div style=”border:1px solid #000;float:center;width:200;height:50px;”></div>
<div style=”border:1px solid #000;float:left;width:400;height:50px;”></div>
</boby>
</html>
以上这个是第一题,刚开始不是很懂,后来做了第二题,比较简单点,这个第一题就自己摸索出来了!
<html>
<head>
</head>
<boby>
<div style=”border:1px solid #000;width:500px;height:300px”></div>
<div style=”border:1px solid #000;width:500px;height:300px”></div>
</boby>
</html>
以上这个是第二题,做完这个简单的,第二题就做出来了!但是中间还是出现了错误,诸如:单词敲错了,还有少了半个“号,这都是马虎造成的。单词需要巩固,心还需要细一些!
float还有些东西老师没讲,说是两个礼拜后在讲。嗯!现在一点点的爬,今天在把这一段代码敲一下,然后准备睡觉,睡觉之前争取在脑子里在过一遍,全部记住。明天中午继续敲代码!
以上,今天晚上的学习总结,继续努力!(10日23点12分)

div布局的一些特性

星期一, 11月 9th, 2009

刚刚看div的时候,有些不明白,看这篇文章应该还不错,偷来啦!分享一下

div的布局还真有些不容易掌握,其规律还摸不透,先死记硬背一些现象再说吧.
div是一个块级元素,默认情况下,默认情况下将占满父级 容器的整行,同级的其他对象将在下一行显示。但是将某个div设置为float后,这个div本身会根据其中内容的需要而调整为内容需要的大小,其后的块 级对象将浮动在它旁边显示,运行下面的html代码就可以看到效果。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<style type=”text/css”>
#menu {
background-color:red;
float:left;
/*clear:both;*/
}
#content{
background-color:green;

}
#submenu {
/*background-color:blue;*/

}
</style>
</head>
<body>
<div id=”menu”>
<div id=”submenu”>菜单区</div>
</div>
<div id=”content”>
内容区
</div>
</body>
</html>

为了让content区能够在下一样显示,在浮动的div中设置了 (阅读全文……)