他们说这叫“面向对象CSS” (4) 侧边栏样式

Blog - 代码 Tuesday, 02 March 2010 14:44

其实是another HTML5+CSS3实战教程。昨天开始了样式方面的话题，围观了主要内容部分的样式设定，主样式表styles.css也开始有些样子了。今天继续，来看侧边栏。

再次参考一下目标范例页面，我们可以观测到侧边栏主要由两部分组成：

按发布时间归档的文章列表
近期评论列表，包括评论内容及内容信息等

首先，我们可以把它们同等的作为侧边栏内容容器，定义一个名为.side-box的class，并设置样式：

.side-box 
  { padding: 20px 80px 20px 40px; 
  }
  .side-box:not(:last-child) 
    { border-bottom:1px solid #ccc; 
    }
    .side-box > header h3 
      { margin-bottom:0;  
      }
    .side-box > header p  
    { text-transform:uppercase; 
      font-style:italic; 
      font-size:90%; 
    }

眼见着侧边栏变成了形如下面截图的样子：

object-oriented-css-sidebar-raw

接下来我们要对“近期评论”部分做一个比较大的位置调整：

.pop-out > section > * 
  { display:block; 
    background:#fefefe; 
    border:1px solid #474747; 
    padding:20px; 
    position:relative; 
    width: 120%; 
    left:20px; 
  }

搞成这个样子，蛮有动感模块的味道：

object-oriented-css-sidebar-pop

另外根据设计需求，我们还要对“近期评论”的标题部分进行比较特别的样式设置：

.post-it 
  { border:1px solid #db5500; 
    padding: 10px; 
    font-style:italic; 
    position:relative; 
    background:#f2965c; 
    color:#333;
    transform:rotate(356deg);
    -moz-transform:rotate(356deg);
    -webkit-transform:rotate(356deg);
    z-index:10; 
    top:10px; 
    box-shadow:1px 1px 0px #333; 
    -moz-box-shadow:1px 1px 0px #333; 
    -webkit-box-shadow:1px 1px 0px #333; 
  }

留意下CSS3的旋转及阴影的用法就OK；现在比较有样子了：

object-oriented-css-sidebar-title

在这里顺便为页面中的“副标题”元素和“meta信息”定义下样式；对于评论来说，发表的时间及作者就是meta了：

.meta 
  { font-size:75%; 
    font-style:italic; 
  }
.subtitle 
  { text-transform:uppercase; 
    font-size:90%; 
    font-weight:bold; 
    letter-spacing:1px; 
    text-shadow:1px 1px 0 #fff; 
  }