CSS的盒子模式(Box Model)
CSS 中有个重要的概念,就是盒子模式(Box model)。
盒子里由里至外依次是:
content 内容(比如文本、图片等)
padding 内边距
border 边框
margin 外边距
padding属性用来设置元素内容到元素边框的距离。
border属性用来设置一个元素的边线。
margin属性用来设置一个元素所占空间的边缘到相邻元素之间的距离。
CSS背景属性指的是content和padding区域。
CSS属性中的width和height指的是content区域的宽和高。
相关文档:
适用于只有一行文字的情况.
.ellipsis{
text-overflow:ellipsis; /*当对象内文本溢出时显示省略标记(...)*/
width:200px; height:50px;
overflow:hidden;
white-space:nowrap;
}
text-overflow是CSS3的属性,IE6以上版本、Safari、chrome 支持。它可以带2个参数:
clip [不显示省略标记(...),而是 ......
网页设计中CSS布局是很重要的部分,下面介绍几种检查调试CSS布局的有效方法。
1.检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
2.检查CSS是否书写正确
检查一下有无拼写错误、是否忘记结尾的}等。可以利用 ......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charse ......
注明:如果要想要在IE6无限级的话需要写多一些JS,其他游览器都可以使用同段js
<!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">
<head>
<meta http-equ ......
这是一个标准的CSS下拉菜单制作教程,有针对目前流行的IE6/IE7/IE8不同版本的CSS代码,因此可以在IE之间完全兼容,不过其它的浏览器像火狐/GG浏览器之类的没有测试,如果兼容IE8的话,那么兼容火狐应该问题不大吧。菜单使用蓝色基调,滑向二级菜单更换背景,操作的感觉很舒服。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XH ......