《精通css高级web标准解决方案》资料

小祝 — Sun, 07 Oct 2007 12:42:00 GMT

好久没写blog，不知道为什么来这边后像没什么激情了，无论如何，还是需要坚持的。
没什么写的，就先把前些日子看的精通css资料放上来了，看了一遍，基本上没什么概念，可能还是需要专业的人士，专门去研究这个东西才能达到这种境界，web里任何一小块的东西都有他完整的体系，看起来不起眼的要学精也得专门花心思去研究，正所谓术业有专攻啊。
本书有9章加2个实例
结构如下：
第1章基础知识
    1.1 设计代码的结构
    1.2 为样式找到目标
    1.3 规划、组织和维护样式表
    1.4 小结
第2章可视化格式模型
    2.1 框模型概述
    2.2 定位概述
    2.3 小结
第3章背景图像基础
    3.1 背景图像基础
    3.2 圆角框
    3.3 阴影
    3.4 图像替换
第4章对链接应用样式
    4.1 简单的链接样式
    4.2 让下划线更有趣
    4.3 突出显示不同类型的链接
    4.4 创建按钮和翻转
    4.5 已访问链接样式
    4.6 纯CSS工具提示
    4.7 小结
第5章对列表应用样式和创建导航条
    5.1 基本列表样式
    5.2 创建垂直导航条
    5.3 在导航条中突出显示当前页面
    5.4 创建水平导航条
    5.5 简化的“滑动门”标签页式导航
    5.6 CSS图像映射
    5.7 远距离翻转
    5.8 对于定义列表的简短说明
    5.9 小结
第6章对表单和数据表格应用样式
    6.1 对数据表格应用样式
    6.2 简单的表单布局
    6.3 复杂的表单布局
    6.4 小结
第7章布局
    7.1 让设计居中
    7.2 基于浮动的布局
    7.3 固定宽度、流体和弹性布局
    7.4 faux列
    7.5 小结
第8章招数和过滤器
    8.1 招数和过滤器简介
    8.2 过滤单独的样式表
    8.3 过滤单独的规则和声明
    8.4 小结
第9章 bug和bug修复
    9.1 bug捕捉
    9.2 bug捕捉的基本知识
    9.3 拥有布局
    9.4 常见的bug及其修复方法
    9.5 小结
实例研究1 More Tran Doodles
实例研究2 Tuscany Luxury Resorts

有需要可以跟据上面的结构到相应的章节去找例子了。。。
下载地址

小祝 2007-10-07 20:42 发表评论

css菜单学习

小祝 — Fri, 27 Jul 2007 06:54:00 GMT

昨天爱友拿回来一个菜单代码，不知道是怎么实现的，我也不太清楚，后来施伟讲解了一下，还学会了二个知识点，记录一下，呵呵。
代码如下：
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css">  </style> <script type=text/javascript><![cdata[//><!]]></script> </head> <body> <ul id="nav"> <li><a href="#">用户管理</a> <ul> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> </ul> </li> <li><a href="#">文章管理</a> <ul> <li><a href="#">服务二</a></li> <li><a href="#">服务二</a></li> <li><a href="#">服务二</a></li> <li><a href="#">服务二服务二</a></li> <li><a href="#">服务二服务二服务二</a></li> <li><a href="#">服务二</a></li> </ul> </li> <li><a href="#">图片管理</a> <ul> <li><a href="#">案例三</a></li> <li><a href="#">案例</a></li> <li><a href="#">案例三案例三</a></li> <li><a href="#">案例三案例三案例三</a></li> </ul> </li> <li><a href="#">系统管理</a> <ul> <li><a href="#">我们四</a></li> <li><a href="#">我们四</a></li> <li><a href="#">我们四</a></li> <li><a href="#">我们四111</a></li> </ul> </li> </ul> </body> </html>

实现的原理如下：
定义一个id为nav的ul，他下面有一级和二级菜单。
二级菜单默认是隐藏的。因为他的样式是
#nav li ul {
    line-height: 27px; list-style-type: none;text-align:left;
    left: -999em; width: 150px; position: absolute;
}
关键就在于这个left:-999em和position:absolute，因为把他置为绝对的-999个字符长度后，他就不在父节点的所见范围内了，所以就看不到了。当鼠标指上去的时候，用js把li的样式后加了另一个样式sfhover，即
#nav li.sfhover ul {
    left: auto;
}
这个样式中把left置为了auto，就表示显示在原地方，这样就能看到了，这里还做了浏览器的兼容。因为IE不支持
#nav li:hover ul {
    left: auto;
}这样的语法，只有用js给加上onmouseover等事件了。其实在firefox中是不需要那段js代码的。

至于二级菜单的指上去变红色的效果则纯是css写的。秘密如下：
#nav li ul a:link {
    color:#666; text-decoration:none;
}
#nav li ul a:visited {
    color:#666;text-decoration:none;
}
#nav li ul a:hover {
    color:#F3F3F3;text-decoration:none;font-weight:normal;
    background:#C00;
}
link表示一个链接a在页面上显示的样式，visited表示链接访问后的样式，hover表示指上去后的样式，这里的hover是IE唯一一个支持的这种写法。还有一个虚选择器active，表示激活后的样式。注意，a的这四个虚选择器是有顺序的，必须按lvha这个顺序写才会有效，可以记为love与hate，喜欢和讨厌，好记吧，呵呵。

小祝 2007-07-27 14:54 发表评论

BlogJava-乖，别哭的薄壳-随笔分类-CSS

《精通css高级web标准解决方案》资料

css菜单学习