
由aside及section组成的工具栏
aside元素作用于页面上一些与主题联系不大而相对独立的区域。在示例里,我们在页面右边创建了一个典型的侧边栏,
宁波网站建设认为它包括3个部分:问卷调査、登录和快速链接。快速链接列表使用了nav元素,另外两个区块则嵌人到一个叫section的新元素里。
section元素作用于同一主题下不同的文档部分,例如论文各章节或是表单页面中的独立表格。若section出现在页脚,它通常作用于附录、目录、许可协议等。一般来说,在有内容的表格中使用section也是可以的。在这里,问卷调查以及登录都由section标注,而链接部分则如前所述,用nav标注。
跟前面提到的页脚中的nav—样,侧栏的问卷调査部分上面也有一个h2元素,通过CSS的display:none隐藏。侧边栏格式为float:right,宽度width:20%,字体font-size:
em。圆形右下角是侧边栏的一个显著特点,它意味着这个HTML5博客使用了CSS3:圆角是这里用到的两个特性之一。经典的圆形右下角CSS语法如下:
.rounded-bottom-right{
-moz-border-radius:OpxOpx20pxOpx;
-webkit-border-radius:OpxOpx20pxOpx;
1border-radius:OpxOpx20pxOpx;
另一个特性是4个区域的细微阴影,它们在CSS文档中定义如下:
.shadow{
-moz-box-shadow:4pxOpxlOpx-3pxsilver;-webkit-box-shadow:4pxOpxlOpx-Bpxsilver;1box-shadow:4pxOpxlOpx-3pxsilver;鉴于CSS3还没有进入候选推荐(candidaterecommendation)阶段,CSS语句还需要使用-moz-和-webkit前缀,来对不同的浏览器提供兼容支持。可以肯定的是,在CSS3进入标准化流程后,边框半径(border-radius)以及盒阴影(box-shadow)也是不会有所变化的。不过在那之前,还是得暂时容忍这些前缀以及在不同浏览器下表现出的些微差别。
本文由乐华网络编辑,转载请注明出处
宁波网站建设www.leseo.net