CSS网页布局参考

详谈详谈 CSS 网页布局中容易发生的错误编码网页布局中容易发生的错误编码 随着 CSS 网页布局越来越普及 国内大部分网站已经采用 CSS 网页布局的制作方法 在应用 DIV CSS 编码时很容易犯一些错误 这里列举一些常见的错误 帮助新手朋友更好的学习与进步 一 检查 HTML 元素是否有拼写错误 是否忘记结束标记 即使是老手也经常会弄错 div 的嵌套关 系 可以用 Dreamweaver 的验证功能检查一下有无错误 二 检查 CSS 是否正确 检查一下有无拼写错误 是否忘记结尾的 等 可以利用 CleanCSS 来检 查 CSS 的拼写错误 CleanCSS 本是为 CSS 减肥的工具 但也能检查出拼写错误 三 确定错误发生的位置 如果错误影响了整体布局 则可以逐个删除 div 块 直到删除某个 div 块后显示恢复正常 即可确定错误发生的位置 四 利用 border 属性确定出错元素的布局特性 使用 float 属性布局一不小心就会出错 这时为元 素添加 border 属性确定元素边界 错误原因即水落石出 五 float 元素的父元素不能指定 clear 属性 MacIE 下如果对 float 的元素的父元素使用 clear 属性 周围的 float 元素布局就会混乱 这是 MacIE 的著名的 bug 倘若不知道就会走弯路 六 float 元素务必指定 width 属性 很多浏览器在显示未指定 width 的 float 元素时会有 bug 所 以不管 float 元素的内容如何 一定要为其指定 width 属性 七 float 元素不能指定 margin 和 padding 等属性 IE 在显示指定了 margin 和 padding 的 float 元素 时有 bug 因此不要对 float 元素指定 margin 和 padding 属性 可以在 float 元素内部嵌套一个 div 来设 置 margin 和 padding 也可以使用 hack 方法为 IE 指定特别的值 八 float 元素的宽度之和要小于 100 如果 float 元素的宽度之和正好是 100 某些古老的浏览 器将不能正常显示 因此请保证宽度之和小于 99 九 是否重设了默认的样式 某些属性如 margin padding 等 不同浏览器会有不同的解释 因 此最好在开发前首先将全体的 margin padding 设置为 0 列表样式设置为 none 等 十 是否忘记了写 DTD 如果无论怎样调整不同浏览器显示结果还是不一样 那么可以检查一下 页面开头 CSS 布局布局 让页底内容永远固定在底部让页底内容永远固定在底部 我们在设计一些页面内容甚少的网页时 典型应用就是登陆页面 由于显示器的分辨率大 在正 常情况下 假如页面内容高度小于浏览器高度时 页面底部以下会留下很大的空间 不管浏览器的高 度怎么变化 我们要想让页底内容始终固定在底部 本文提供了一个 CSS 解决方案 XHTML 主体 这里是页底footer内容 CSS margin 0 padding 0 html body height 100 wrap min height 100 main overflow auto padding bottom 60px 必须使用和 footer 相同的高度 footer position relative margin top 60px height 60px clear both background 369 Opera Fix body before content height 100 float left width 0 margin top 32767px 注意 以上代码在 IE6 上根本不起作用 必须使用以下代码来解决 IE6 下的 BUG wrap display table height 100 Fancybox 丰富的弹出层效果丰富的弹出层效果 Fancybox 是一款优秀的 jquery 插件 它能够展示丰富的弹出层效果 前面我们有文章介绍了 facybox 弹出层效果 相比 facybox fancybox 显得功能更为齐全 它除了可以加载 DIV 图片 图片集 Ajax 数据 还能加载 SWF 影片 iframe 页面等等 Demo fancybox rar Fancybox 具有以下特性 具有以下特性 可以加载 DIV 图片 图片集 Ajax 数据 SWF 影片 iframe 页面等 支持键盘方向键和 ESC 键 丰富的参数设置和方法调用 可扩展性强 使用方法 1 添加添加 javascript 引用和引用和 css 文件的引用文件的引用 2 HTML 图片集 支持键盘方向键 3 调用调用 fancybox function a rel group fancybox titlePosition over cyclic true titleFormat function title currentArray currentIndex currentOpts return currentIndex 1 currentArray length title length title 注意 fancybox 的参数设置格式为 key value titlePosition 设置图片标题的显示位置为图片上 cyclic 设置图片浏览方式为循环浏览 titleFormat 设置图片标题的格式 可以显示图片总数和当 前图片顺序 Fancybox 插件主要参数和方法一览表 参数参数 方法方法描述描述默认值默认值 基本基本 width 设置弹出串口的宽度 当内容为 swf iframe 或者单行文字时 应该 将 autoDimensions 设置为 false 560 height 设置弹出串口的高度 当内容为 swf iframe 或者单行文字时 应该 将 autoDimensions 设置为 false 340 cyclic是否循环显示 当内容为图片集时 false centerOnScroll弹出窗口始终浏览器居中 false modal 是否使用模式窗口 当设置为 true 时 应该同时将 hideOnOverlayClick hideOnContentClick enableEscapeButton showCloseButton 设置为 false 并将 overlayShow 设置为 true false titlePosition标题的位置 可以设置为 outside inside or over outside transitionIn transitionOut 窗口显示的方式 可以设置为 elastic fade or none fade send 方法 向服务端发送裁剪图片的数据 以便服务端接收参数进行 处理 e g cropzoom send process php POST id 1 function r alert r 方法方法 fancybox showActivity显示加载动画 fancybox hideActivity隐藏加载动画 fancybox close关闭窗口 fancybox resize自动调整窗口的高度使之与内容相适应 Centered是否将选区居中 即显示在容器的中心 更多参数和方法请参照 另有 参考 图片放大镜图片放大镜 Cloud Zoom Cloud Zoom 是一个图像放大 jQuery 插件 效果堪比 Magic Zoom 相对于流行 jQZoom 插件 Cloud Zoom 体积小 有更多的功能和更强大的跨浏览器兼容性 特点特点 兼容大多数浏览器 已经测试通过的浏览 器有 IE6 Firefox Chrome Opera Safari 易于集成的基本有效的 HTML 精缩 脚本小 只有 6Kb 平滑变焦运动 画廊模式 着色 软聚焦和内变焦功能 它是完全免费的 使用方法使用方法 1 加载 加载 CSS 2 加载 加载 Javascript 3 HTML 代码 代码 插件参数一览表 参数描述 from V1 0 0 默认值 zoomWidth设置缩放窗口的宽度 如果设置为 auto 则窗口宽度与小图片宽度相等 auto zoomHeight设置缩放窗口的高度 如果设置为 auto 则窗口高度与小图片高度相等 auto position指定缩放窗口相对于小图片的位置 允许的值是 left right top bottom inside 也可以是专门一个 HTML 元素的 ID 放置例如窗口的缩放位置 element1 right adjustX允许你微调像素的缩放窗口的 X 位置 0 adjustY允许你微调像素的缩放窗口的 Y 位置 0 tint指定覆盖的小图片的颜色 颜色应指定十六进制格式 例如 aa00aa false tintOpacity指定色彩的透明度 其中 0 是完全透明的 1 是完全不透明 0 5 lensOpacity设置镜头鼠标指针的透明度 其中 0 是完全透明的 1 是完全不透明 在色 彩和软对焦模式 它将始终是透明的 0 5 softFocus适用于一种微妙的模糊效果来的小图片 设置为 true 或 false false smoothMove形象的漂移缩放 数字越高 就越顺畅 更轻松进行漂移运动 1 不平滑 3 showTitle是否显示图片的标题 true FacyBox 弹出层效果弹出层效果 FacyBox 是一款基于 jquery 的 lightbox 控件 它可以让你在你的网站上展示图片 可以浏览多张图片 支持键盘方向键 Div 或通过 Ajax 加载的内容 而且使用非常简单 一起来看看如何使用 1 添加 javascript 引用和 css 文件的引用 2 HTML 图片 多张图片浏览 a 点击这里 当要浏览多张图片时 只需给链接指定一个 ID 如上 id open 通过 JS 单击事件来加载图片源 DIV a 点击这里 展示 DIV 时 需要在页面对应一个 DIV 并设置 id info 隐藏 style display none 如下 a 点击这里 div img A jQuery based which can display images divs or entire remote pages ajax 加载内容 a 点击这里 3 调用插件 functionfunction a rel facybox facybox open click functionfunction 展示多张图片 facybox images images 3s jpg images 4s jpg images 5s jpg Demo 使用 AD Gallery 制作强大的相册画廊 AD Gallery 是一个带缩略图导航浏览 可设置照片标题和备注说明信息的 jQuery 相册插件 该插件提 供了许多可配置的参数和方法 具有很强的定制功能 参考 61 html jQuery 实现无刷新切换主题皮肤功能 主题皮肤切换功能在很多网站和系统中应用 用户可以根据此功能设置自己喜欢的主题颜色风格 增 强了用户体验 本文将围绕如何使用 jQuery 实现点击无刷新切换主题皮肤功能 jQu