他们说这叫“面向对象CSS” (5) 文章内页

Blog - 代码 Thursday, 04 March 2010 15:17

其实是another HTML5+CSS3实战教程。之前的一篇中，我们学习了页面侧边栏的样式定义，整个目标范例的首页基本搞定；今天来看看内页方面的东东。

复制之前的首页文件，并重命名为“post.htm”。内页的整体结构与首页基本相同，头部与侧边栏保持不变，主要内容部分由文章列表变成单篇文章，并且增加了评论列表及评论表单等元素。

复制以下代码，将当前post.htm中的<header>及主要内容部分的<section>容器整体替换掉：

      <header>
        <h1>Object Oriented CSS</h1>
        <p class="subtitle">(really just a bunch of best practices and patterns; not a new language)</p>
        <nav>
          <ul>
             <li><a href="index.htm">Home</a></li>
 
             <li><a href="#" class="selected">Archives</a></li>
             <li><a href="#">About</a></li>
             <li><a href="#">Contact Us</a></li>
          </ul>
        </nav>
      </header>
      <section>
 
        <article class="post">
          <header>
            <span class="date">September 10, 2009</span>
            <h2>Check out WorkAwesome!</h2>
          </header>
          <section>
            <img src="img/wa.jpg" alt="Work Awesome" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
            diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
            imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
 
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
            diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
            imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
            diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
            imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
            diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
            imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
          </section>
          <footer>
            <ul>
              <li><a href="#">Digg!</a></li>
 
              <li><a href="#">Share!</a></li>
              <li><a href="#">Like!</a></li>
            </ul>
          </footer>
        </article>
        <article class="comments">
          <header><h2>Comments</h2></header>
 
          <section>
            <article class="comment">
              <header><p>First-commenter</p><p class="meta">Sept 10</p></header>
              <section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,</p></section>
            </article>
            <article class="reply comment">
                  <header><p>Reply-commenter</p><p class="meta">Sept 12</p></header>
 
                  <section><p>diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar</p></section>
                </article>
            <article class="comment">
              <header><p>Second-commenter</p><p class="meta">Sept 10</p></header>
              <section><p>tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus </p></section>
            </article>
            <article class="author comment">
 
              <header><p>The author</p><p class="meta">Sept 11</p></header>
              <section><p>diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar</p></section>
            </article>
            <article class="comment">
              <header><p>Fourth-commenter</p><p class="meta">Sept 12</p></header>
              <section><p>imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi</p></section>
 
            </article>
          </section>
          <footer>
          <h2>Leave a Comment</h2>
          <form method="post" action="" class="comments-form">
          <p><label>Name</label><input type="text" /></p>
          <p><label>Email</label><input type="text" /></p>
 
          <p><label>Website</label><input type="text" /></p>
          <p><label>Comment</label><textarea></textarea></p>
          <p><button type="submit">Submit</button></p>
          </form>
          </footer>
        </article>
      </section>

文章内容部分的结构及样式都是我们在之前几篇中已经搞掉的；现在主要来看评论部分的样式。将以下样式代码添加到主样式表styles.css中：

.comment 
  { border:1px solid #ccc; 
    border-radius:7px; 
    -moz-border-radius:7px; 
    -webkit-border-radius:7px; 
    padding:10px; 
    margin:0 0 10px 0;
  }
  .comment > header > p 
    { font-weight:bold;  
      display:inline; 
      margin:0 10px 20px 0; 
    }

这些代码定义了每一条评论的基本样式；接下来对评论回复及作者回复稍作特殊设定：

  .reply.comment 
    { margin-left:80px; 
    }
  .author.comment 
    { color:#ececec; 
      background:#474747; 
    }

挺酷的，有爱。接下来为评论表单设置样式：

.comments-form p 
  { padding:5px; 
    border-radius:5px;  
    -moz-border-radius:5px;  
    -webkit-border-radius:5px; 
  }
.comments-form p:hover 
  { background:#ececec;  
  }
.comments-form label 
  { display:inline-block; 
    width:70px; 
    vertical-align:top; }
.comments-form label:after 
  { content: " : "; 
  }
.comments-form input[type=text],
.comments-form button,
.comments-form textarea 
  { width:200px; 
    border:1px solid #ccc; 
    border-radius:5px; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    padding:2px; 
  }
.comments-form button[type=submit] 
  { margin-left:70px; 
  }