标题栏的小小装饰

装修了下blog,不管美丑,自己做的就是舒服.上面还没开始写啥,今天算正式开张吧.

装修过程中用到了左面的东东,其实好象是在哪个下载软件的说明上看到的,想起来就试着做了,虽然是很小的装饰,但还是记录下来,也是心得啊(当前水平太菜,只能搞些这个.)

页面html代码:

<div class='xwidget' id='feed'>
 <span class="xtit"><h2>Feed</h2></span>
 <div class='xwidget-content'>
  <ul>
   <li><a href="/feeds/posts/default?alt=rss" rel="alternate">Post Feed</a></li>
   <li><a href="/feeds/comments/default?alt=rss" rel="alternate">Comment Feed</a></li>    
  </ul>
 </div>
</div>

css部分

.xwidget { margin: 2px 10px;}
  .xwidget ul { list-style:none;}
  .xwidget-content {
    border: #555 1px solid;
    padding: 8px 5px 5px 5px;
    text-align: right;
    }
  .xtit { 
    position:relative;
    top:8px;
    left: 8px;
    width: 50%;
    text-align:center;
    border: #666 1px solid;
    background: #353535;
    }

关键在于黄色标出的部分