Go语言视频零基础入门到精通

javalearner

继续之前的HTML5+CSS3实战吧，前面一篇中呢，我们搞定了页面头部的样式；今天来看看特色文章和主要内容部分 (Featured block and Body)。先回顾一下最初的页面设计图吧。
首先是特色文章的：

然后是主体内容的：

HTML部分可以参见前面的内容”，样式代码在下面：
   
  
   
   
    /*
        Featured
*****************/
#featured {
        background: #fff;
        margin-bottom: 2em;
        overflow: hidden;
        padding: 20px;
        width: 760px;

        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
}

#featured figure {
        border: 2px solid #eee;
        float: right;
        margin: 0.786em 2em 0 5em;
        width: 248px;
}
#featured figure img {display: block; float: right;}

#featured h2 {color: #C74451; font-size: 1.714em; margin-bottom: 0.333em;}
#featured h3 {font-size: 1.429em; margin-bottom: .5em;}

#featured h3 a:link, #featured h3 a:visited {color: #000305; text-decoration: none;}
#featured h3 a:hover, #featured h3 a:active {color: #fff;}

/*
        Body
*****************/
#content {
        background: #fff;
        margin-bottom: 2em;
        overflow: hidden;
        padding: 20px 20px;
        width: 760px;

        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
}[/code]
   
   
  
冷静下来，发现该说的已经说完了。补充一点，内容主体部分只是个容器，今天的代码中没有包含文章列表的样式。

   
   
jcomments.setAntiCache(1,0,0);
                  
   
   
  


  
  
   
   

     
   

     
   
  

复制代码