7.3 专题区

页面的专题区主要用于展示最新博客文章的前几段文字，同时右侧还有一小块区域，显示登录表单和最近博文的一组链接。以下就是section#feature_area元素的HTML标记。

  1. <section id="feature_area">
  2.     <article id="blog_leadoff">
  3.         <div class="inner">
  4.             <h4>September 7, 2012</h4>
  5.             <a href="#"><h3>Managing CSS Classes with jQuery</h3></a>
  6.             <img src="images/charles_wyke-smith.jpg" alt="Charles Wyke-Smith photo" />
  7.             <p>Sintus at neque in magna...</p>
  8.         </div>
  9.     </article>
  10.     <aside>
  11.         <form  autocomplete="off" class="signin" 
  12.                action="process_form.php" method="post"> <!-- 必要的<form>标签 -->
  13.         <fieldset> <!-- 作为表单控件的容器 -->
  14.             <legend><span>Sign In for Code and Updates</span></legend> <!-- 控件组的标题 -->
  15.             <section> <!-- 用于为控件、标注和说明添加样式的外包装 -->
  16.                 <label for="email">Email</label> <!-- 与控件ID同名的for属性将标注与控件关联起来 -->
  17.                 <input type="text" id="email" name="email" />  <!-- type属性的text值表明这是文本框 -->
  18.             </section>
  19.             <section>   
  20.                 <label for="password">Password</label>
  21.                 <input type="password" id="password" name="password" 
  22.                        maxlength="20" /> <!-- 密码框中的字符显示为掩码 -->
  23.                 <p class="direction">Wrong user name or password</p>
  24.             </section>
  25.             <section> <!-- 提交按钮 -->
  26.                 <input type="submit" value="Sign In" />
  27.                 <p class="signup">Not signed up? <a href="#">Register now!</a></p>
  28.             </section>
  29.         </fieldset>
  30.         </form>
  31.         <nav>
  32.             <h3>Recent Articles</h3>
  33.             <!-- 博文链接 -->
  34.         </nav>
  35.     </aside>
  36. </section>

这个section元素与容器同宽，我们要把它包含的article和aside元素浮动为并列显示。

  1. section#feature_area {
  2.     overflow:hidden; /*包围浮动的子元素*/
  3.     margin:16px 0 0; /*在页眉与专题区之间留出间隙*/
  4.     padding:0 0 10px;
  5. }
  6. section#feature_area article {float:left; width:66%;}
  7. section#feature_area aside {float:right; width:34%;}

这样就在容器里创建了两栏。注意，两栏的宽度是用百分比值设定的，这是因为这个页面还要考虑适应不同的设备，包括平板电脑和智能手机。具体内容将在下一章讲解。为此，两栏就用容器宽度的百分比来设定了。

此时，应该在article元素内部添加一个内部div（前面HTML标记中加粗了），以便围绕内容设定圆角边框。之后，就是article区域的样式。

  1. section#feature_area article .inner {/*带圆角和阴影的容器*/
  2.     padding:12px; 
  3.     background:#fff;
  4.     border-radius:20px 0;
  5.     box-shadow:0 12px 8px -9px #555;
  6.     }
  7. section#feature_area article a {text-decoration:none;}/*博文标题链接*/
  8. section#feature_area article img { /*照片*/
  9.     float:left;
  10.     padding:0 10px 10px 0;
  11.     }
  12. section#feature_area article h4 {  /*日期*/
  13.     font-family:"Source Sans Pro", helvetica, sans-serif;
  14.     font-style:normal;
  15.     font-weight:400;
  16.     font-size:1em;
  17.     color:#f58c21;
  18.     letter-spacing:-.025em;
  19.     }
  20. section#feature_area article h3 { /*博文标题*/
  21.     font-family:Lato, helvetica, sans-serif;
  22.     font-style:normal;
  23.     font-weight:700;
  24.     font-size:1.75em;
  25.     color:#555;
  26.     margin:0px 0 12px 0px;
  27.     letter-spacing:-.05em;
  28.     }
  29. section#feature_area article#blog_leadoff p { /*博文内容*/
  30.     font-family:"Source Sans Pro", helvetica, sans-serif;
  31.     font-style: normal;
  32.     font-weight:400;
  33.     font-size:1.1em;
  34.     line-height:1.5em;
  35.     color:#616161;
  36.     margin:0 0px;
  37.     text-align:justify;
  38.     }
  39. section#feature_area article#blog_leadoff p::first-letter { /*首字母下沉*/
  40.     font-family:Lato, helvetica, sans-serif; 
  41.     font-style: normal;
  42.     font-weight:700;
  43.     font-size:4.5em;  
  44.     float:left;  
  45.     margin:.05em .05em 0 0;  
  46.     line-height:0.6;
  47.     text-shadow:1px 3px 3px #ccc; /*IE10及以上版本支持文本阴影*/
  48.     }
  49. section#feature_area article#blog_leadoff p::first-line {  /*首行小型大写字母*/
  50.     font-variant:small-caps;
  51.     font-size:1.2em;
  52.     }
  53. section#feature_area aside { /*右栏*/
  54.     width:34%;
  55.     float:right;
  56.     }

enter image description here

图7-10 section#feature_area中的aticle元素在设定了样式之后的效果

这些样式涵盖了本书前几章介绍一些元素。值得一提的是包含h3的a元素。要是在以前，行内元素包含块级元素可是大忌。但从HTML5开始，a元素可以包含任何元素，这当然为把任何元素转换成可以点击的链接提供了方便。

如图7-10所示，照片浮动到左侧，所以文本绕排。然后我们采用第4章讨论的首字母下沉和首行大型小写样式，为版式添加了一点趣味性，也让字形过渡更加自然。另外，我们还给放大的第一个字母添加了文本阴影，让它看起来像是悬浮在页面上。好了，下面该讲为表单添加样式了。

文本阴影

文本阴影与本章前头讲过的盒阴影很相似，它的语法如下：

  1. text-shadow:4px 4px 5px #aaa;

text-shadow这几值的含义按顺序分别是：水平偏移量、垂直偏移量、模糊量和颜色。与盒阴影不同的是，文本阴影没有扩展量。最低限度，你得提供水平偏移量、垂直偏移量和颜色值。如果水平和垂直偏移量是负值，阴影就会出现在文本左上方。另外，text-shadow还支持多个阴影声明。图7-11展示了一些阴影示例。要了解文本阴影更高级的应用技巧，请大家参考我的电子书Visual Stylin' with CSS3。

enter image description here
图7-11 使用正、负偏移量，实现了各种不同的阴影效果

7.3.1 登录表单

我要求读者必须注册才能下载本书示例代码，以便提供更新并与大家保持联系。在这个主页上，提供了一个登录表单和一个指向注册表单的链接，注册表单是为第一次访问网站的读者准备的。登录表单的标记与第6章介绍的表单采用相同的结构方式，以下是其HTML。

  1. <form  autocomplete="off" class="signin" 
  2.        action="process_form.php" method="post"> <!-- 必要的<form>标签 -->
  3. <fieldset>
  4.     <legend><span>Sign In for Code and Updates</span></legend> <!-- 控件组的标题 -->
  5.     <section> <!-- 电子邮件 -->
  6.         <label for="email">Email</label> <!-- 与控件ID同名的for属性将标注与控件关联起来 -->
  7.         <input type="text" id="email" name="email" />  <!-- type属性的text值表明这是文本框 -->
  8.     </section> <!-- 密码 -->
  9.     <section>   
  10.         <label for="password">Password</label>
  11.         <input type="password" id="password" name="password" 
  12.                maxlength="20" />
  13.         <p class="direction">Wrong user name or password</p> <!-- 只有添加error类才会显示 -->
  14.     </section>
  15.     <section> <!-- 提交按钮 -->
  16.         <input type="submit" value="Sign In" />
  17.         <p class="signup">Not signed up? <a href="#">Register now!</a></p>
  18.     </section>
  19. </fieldset>
  20. </form>
  21.  

下面是我从第6章表单的CSS中拿来的规则，并针对这个表单修改后的代码。

  1. form.signin {
  2.     width:19em; /*表单的整体宽度*/
  3.     float:right;
  4.     background:#fff;
  5.     border-radius:10px 0 10px 0;
  6.     box-shadow: 0 12px 8px -9px #555;
  7.     }
  8. .signin fieldset {  border:0; margin:10px 14px;}/*去掉默认的边框*/
  9. .signin legend span {
  10.     font-family:Lato, helvetica, sans-serif;
  11.     font-weight:700; font-size:1.3em; line-height:1.1em;
  12.     color:#4eb8ea;
  13.     letter-spacing:-.05em;
  14.     }
  15. .signin section {
  16.     overflow:hidden; /*包围控件和标注*/
  17.     padding:.25em 0; /*表单元素的间距*/
  18. }
  19. .signin section label {
  20.     font-family:"Source Sans Pro", helvetica, sans-serif;
  21.     font-weight:400;
  22.     float:left;
  23.     width:5em; /*标注栏的宽度*/
  24.     margin:.5em .3em 0 0; /*外边距保持文本与控件的间距*/
  25.     line-height:1.1;
  26.     color:#555;
  27.     }
  28. .signin section input {
  29.     float:right;
  30.     width:10.5em; /*控件栏的宽度*/
  31.     margin:.2em 0 0 .5em;
  32.     padding:3px 10px 2px; /*输入文本与控件的间距*/
  33.     color:#555;
  34.     font-size:.8em;
  35.     outline:none; /*去掉默认的轮廓线*/
  36.     border-radius:10px 0 10px 0;
  37.     }
  38. input:-webkit-autofill { color:#fff !important; } /*去掉WebKit默认的黄色背景*/
  39. .signin section input[type=submit] {
  40.     float:right; /*将按钮与控件右边对齐*/
  41.     width:auto; /*重设按钮宽度*/
  42.     margin:0 2px 3px 0;
  43.     padding:0px 8px 3px;
  44.     font-size:1em;
  45.     font-weight:800;
  46.     color:#fff;
  47.     border:none;
  48.     background-color:#d6e636;
  49.     box-shadow:1px 1px 2px #888;
  50.     }
  51. .signin section p{ /*内容为“not signed up?”*/
  52.     float:right;
  53.     clear:both;
  54.     margin:.2em 0 0;
  55.     text-align:right;
  56.     font-size:.8em;
  57.     line-height:1;
  58.     color:#555;
  59.     }
  60. .signin section p a { color:#333; }/*到注册表单的链接*/
  61. .signin section p a:hover {
  62.     color:#777;
  63.     text-decoration:none;
  64. }
  65. .signin section p.direction.error { /*错误消息*/
  66.     display:block;
  67.     color:#f00;  /*添加error类后，把说明文字变成红色*/
  68.     }
  69. .signin section p.direction { display:none; } /*隐藏错误消息*/

enter image description here

图7-12 登录表单及显示错误消息时的效果

无论多简单，表单所需的代码总是很多！好在，这里的代码大部分都很直观，配合注释看基本都能理解。我想提一下错误消息，它一开始是隐藏的，只有必要时才会显示（如图7-12所示）。要显示错误消息，只要给（已经有了direction类的）p元素再添加一个error类即可。不过，这个类是要通过验证表单的代码来添加的。作为负责网站UI的人，添加这种平时隐藏的HTML元素和显示它的CSS是你的事儿。至于什么时候添加error类显示错误消息，那就是开发团队的事儿了。

7.3.2 博文链接

表单下面是博文链接。与以往一样，我使用了无序列表来组织链接。

  1. <nav>
  2.     <h3>Recent Articles</h3>
  3.     <ul>
  4.         <li><a href="#">Z-index&mdash;Layers of Confusion</a></li>
  5.         <li><a href="#">Box-Image Techniques</a></li>
  6.         <li><a href="#">Shadow FX with CSS3</a></li>
  7.     </ul>
  8. </nav>

CSS如下。

  1. section#feature_area nav {
  2.     width:19em; /*容器整体宽度*/
  3.     float:right;/*与区域右边对齐*/
  4.     margin:15px 0 0; /*上方间距*/   
  5.     padding:.6em 0em .75em; /*链接上下的间距*/     
  6.     background:#fff;
  7.     border-radius:10px 0 10px 0;
  8.     box-shadow: 0 12px 8px -9px #555;
  9.     }
  10. #feature_area nav h3 {
  11.     padding:0 14px 0; /*标题左右的空间*/
  12.     font-family:Lato, helvetica, sans-serif;
  13.     font-weight:700;    
  14.     font-size:1.3em;
  15.     text-align:left;
  16.     color:#aaa;
  17.     letter-spacing:-.05em;
  18.     }
  19. #feature_area nav ul { margin:0em 0 0 20px; }
  20. #feature_area nav li {
  21.     padding:.7em 0 0 2em;
  22.     position:relative; /*项目符号的定位上下文*/
  23.     list-style-type:none
  24.     }
  25. #feature_area nav li:before { /*定制项目符号*/
  26.     content:""; /*用空字符串，因为不需要实际内容*/
  27.     position:absolute; /*相对于列表项定位*/
  28.     height:10px; /*项目符号大小*/
  29.     width:10px;
  30.     left:12px; /*定位项目符号*/
  31.     top:12px;
  32.     border-radius:5px 0 5px 0; /*项目符号形状*/
  33.     background-color:#d6e636; /*项目符号颜色*/
  34.     box-shadow:1px 1px 2px #888;
  35.     }
  36. #feature_area nav li a {
  37.     display:block; /*链接与列表项同宽*/
  38.     text-decoration:none; /*去掉默认的下划线*/
  39.     font-size:.9em;
  40.     color:#616161;
  41.     }
  42. #feature_area nav li a:hover { color:#000; }

添加了样式之后的链接区就在登录表单正下方。它们都是aside元素的子元素，而aside元素通过浮动与article元素并列在一行。

enter image description here

图7-13 完成博文链接，aside元素的样式就写好了

与浮动form元素一样，浮动nav元素可以让它直接定位在表单下方。列表的其他部分没有什么特别，但为了体现“两个圆角，两个方角”的设计风格，我们要重新定制项目符号。为此，我们抛弃用图片作为列表项记号的常规做法，使用::before创建了10像素见方的伪元素，并将其两角变成圆角。而一个像素的小阴影则让这些项目符号产生了跳脱页面的假象。