CSSer课堂

我们是师徒六人组,以Design, CSS, JS, web标准化为爱好。

Web标准化之如何写符合标准的导航

显然,Web标准并不是一个严格执行的标准,但是我们却可以像W3C推荐的那样尽可能的将页面实现标准化。

上周我们讨论了标准的导航写法:
第一种方案
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
优点:相对有语义,多一个控制节点,可以灵活控制,实现二级菜单。
缺点:用户体验相对差些,UL的执行效率显然逊色于A标签。

第二种方案
<div>
<a></a>
<a></a>
<a></a>
</div>
优点:代码简洁,能实现一般类型的导航,页面执行效率要不UL迅猛。
缺点:语义相对差些,若需实现较复杂的导航需要嵌套额外的标签。

那是不是有更标准的更符合语义的做法呢?有人说可以用HTML5里新增加的.

但就目前来看,等待HTML5的发布还为时尚早,再加上不同浏览器的支持程度,更是不敢恭维。

有没有更加合理的解决方案能够填补这个空白? 有的!

请看如下代码:
<map><div>
<a></a><a></a><a></a>
</div></map>
对 就是 map !W3C官网的写法!

W3C的说明是The MAP element may be used without an associated image for general navigation mechanisms.MAP元素可用于无关联的图像一般导航机制。

map具有地图、导航的特性,结合上面提到的第二个方案,这就是最佳解决方案。当然用map嵌套UL也是可以的,不过显然现在UL的语意就不是那么重要了。提醒大家的是map里面必须嵌套一层块级元素,因为map本身不具有此属性。

详细资料:http://www.w3.org/TR/REC-html40/struct/objects.html#adef-usemap
附:W3C官网;http://www.w3.org/

表现与结构分离之好友列表操作(答案)

上篇博客出题《深刻理解表现与结构分离之好友列表操作》,希望能对弟子们有一个考核,看参差不齐的技术水平到底问题再那里?或者这只是我单方面的意愿罢了,截止我发这篇博客开始,还没有一份卷子,更别说是否合格。
废话不多说,看Demo例子就是:

提示:你可以先修改部分代码再运行。

以上内容中鼠标的浮动主要通过JQ类库添加class(addClass)和移除class操作,选中使用JQ切换toggle并添加/删除em标签来实现。

制作的思路是,基本样式控制布局(结构),然后利用js添加修饰元素(表现)。

通俗讲法:用脚本将衣服穿在裸体的人身上。,暂且可以这样理解表现与结构。
网页是否漂亮,就看你这个前端的设计师给他穿什么样的衣服!

深刻理解表现与结构分离之好友列表操作

如果你觉得你是一个CSSer,可以试试按照如下图片的内容,制作一个符合标准的,并且表现与结构分离的页面。

test

1.深绿色为选中状态
2.浅绿色为鼠标hover状态

以上的试题没有标准的答案,只能用最接近标准可用性方案来解决。
(js的可用性咱略过,因为我可能也搞不好)

我的答案在下周五公布,希望你们能在下周五前交卷。

第 4 页/共 12« 首页...2345610...尾页 »