CSS+DIV入门教程PPT-2010更新版.ppt

* 如果水平位置没有空间了，则box3会跑到下面去，但是如果box2的高度没有box1高度大，box1减去box2的高度的部分会把box3拦住。 Float_not_enough_width.html * 浮动框的清理功能，解决了绝对定位可能产生的问题（即如果扩大绝对定位的框，周围的框可能会被覆盖，而需要重新定位），这样浮动框增大和缩小，周围的元素的位置可以随之而调整 因为是通过增加margin来实现的，所以只有块级标签才可以清除浮动，比如说div clear的属性值: none : 　允许两边都可以有浮动对象both : 　不允许有浮动对象left : 　不允许左边有浮动对象right : 　不允许右边有浮动对象  * 在firefox中查看，IE6以下不能看出效果 * * static : 　无特殊定位，对象遵循HTML定位规则, 由于static是所有页面元素的默认值，因此设置元素的定位类型时几乎不用这个值，除非用于覆盖之前的定义。absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置fixed : 　IE5.5及NS6尚不支持此属性 * * Display的属性值有很多，以各种不同的方式显示对象，如可以将inlilne元素作为块元素显示等等 Visibility仅设置元素是否可见 Display=none;与visibility=hidden是不一样的，后者为隐藏的对象保留其占据的物理空间，前者则不保留 * * 层级 在CSS的世界中有所谓层级的概念，每一层可以有每一层的“样式”，如果有两层刚好重迭到，下面那一层的将不会显示出来，就好像我们拿很多画好图案的图画纸一样，不小心有重迭到的只看的到上面的图案 使用Z-INDEX这个flag来定义，数字越大越上层 * 前面都是固定列宽 固定列宽有不足： 窗口大小改变、屏幕分辩率改变，浏览器默认字体改变都可能影响整理布局效果 * 使用了伪类 例子要使用firefox浏览器 * 属性选择符： a[href^=“mailto:”] …IE6及以下版本不支持，可使用Firefox * * * * ?CSS样式表? * 属性名：cursor 用来设定，当鼠标停留在元素上时光标的形状 cursor:属性值 允许的属性值有： 鼠标光标设定 w-resize: 向左的箭头 e-resize: 向右的箭头 n-resize: 向上的箭头 s-resize: 向下的箭头 ne-resize: 向右上的箭头 nw-resize: 向左上的箭头 se-resize: 向右下的箭头 sw-resize: 向左下的箭头 auto: 自动设定 default: 默认指针，朝左上方 crosshair: 十字型 hand: 手的形状 move: 移动时的光标，十字箭头 help: 带问号的箭头 text: 文字编辑输入时的光标，I形 wait: 程序执行等待的光标，漏斗形状 另外，也可以使用一个光标文件显示光标形状 cursor:url(curse.cur) 设置外部光标文件，注意文件格式必须为：.cur 或 .ani Ex: mouse.htm ?CSS样式表? * CSS滚动条 Ex: scrollbar.htm scrollbar-arrow-color: 按钮上箭头的颜色 scrollbar-face-color: 按钮的颜色 scrollbar-highlight-color: 按钮左上边框颜色 scrollbar-3dlight-color: 按钮左上边框颜色 scrollbar-darkshadow-color: 按钮右上边框颜色 scrollbar-track-color: 卷动凹槽的颜色 scrollbar-shadow-color: 阴影颜色 滚动条设置 ?CSS样式表? * 720px 150px 50px 500px 150px 560px 275px 245px 结束 ?CSS样式表? * 谢谢大家 * * * * * * * * * a:link{color: #0000FF; text-decoration:none; font-size:10pt} a:visited{color: #cccccc; text-decoration:none;font-size:10pt;font-style:italic} a:hover{color: #000000;font-size:12pt; text-decorati