同时应当根据在文档中的使用目的而非出现位置来对类以及id进行结构化命名。
可以按照如下所示的结构化方式来对类以及id名称命名:
例如:Branding
MainNav
SubNav
MainContent
SideBar
这些名字同直观命名方式一样非常易懂,但他们描述了页面元素的作用而非位置。这使得代码更加符合使用纯粹的结构化标记的初衷,即开发人员可以在不改变标记的情况下对各种各样媒体下的显示格式进行处理。
即使你不打算在其他的媒体上对Web页面进行格式修改,使用结构化命名方式还可以帮助你在日后的站点升级或重新设计中更为轻松。例如,结构化命名避免了当一个div同id为RightColumn移动到页面左边后所带来的混乱。对div来说Sidebar采用这样的命名方式就显得更加适当,因为无论它出现在页面的哪一边,这个名字仍然对开发人员来说直观易懂。
.aaa{color:#000000}.bbb{height:50pxwidth:200pxbackground:#f2f2f2}
<div class="aaa bbb">测试测试</a>
组合样式,多个Class并用,前提2个样式定义不要重复;
你好,您说的问题呢,一般有两种情况:1.在一个大的div里面,显示文章或新闻情况下,如果文字太多,需要自动换行和区域还要固定大小,一般这样处理:
在对应的div的css里面加入:
word-wrap:break-word /*** 自动换行 ***/
overflow:hidden /*** 自动隐藏超出部分 ***/
2.还有一种情况也比较常见就像在边栏的显示文章标题的情况或者是文章简介的区域,如果内容太长也会超出,影响用户体验,我们一般这样处理:
在对应的css里面加入:
text-overflow:ellipsis
white-space:nowrap
overflow:hidden
效果是:在ie下超出的部分会自动隐藏并且显示成省略号;在ff下不显示省略号,但也自动隐藏
不知道以上的方案对您有没有帮助,我们是UEDChina组的!希望对您有所帮助!:-)