读书频道 > 网站 > 网页设计 > HTML5秘籍 (第2版)
2.2.1 构造页面的老办法
15-03-19    下载编辑
收藏    我要投稿   

本文所属图书 > HTML5秘籍 (第2版)

本书共包括四个部分,共13章。第一部分介绍了HTML5的发展历程,用语义元素构造网页,编写更有意义的标记,以及构建更好的Web表单。第二部分介绍了HTML5中的音频与视频、CSS3、Canvas绘图技术等内容。第三部分介绍立即去当当网订购
要生成图2-1所示的页面,有很多种构造方法。让人高兴的是,这个示例页面使用的是HTML最佳实践,因此没有任何通过标记来进行格式化的痕迹。没有粗体或斜体元素,没有嵌入的样式,当然更没有土得掉渣的<font>之类的东西。总之,这是一个格式非常规范的页面,所有样式均来自外部样式表。


以下是从页面中摘出的一段标记,代码中加粗的地方表明应用了样式:
  <div class="Header"> 
    <h1>How the World Could End</h1>
    <p class="Teaser">Scenarios that spell the end of life as we know it</p>
    <p class="Byline">by Ray N. Carnation</p>
</div>

  <div class="Content">
    <p><span class="LeadIn">Right now</span>, you're probably ...</p>
    <p>...</p>

    <h2>Mayan Doomsday</h2>
    <p>Skeptics suggest ...</p>
  ...
</div>

  <div class="Footer">
    <p class="Disclaimer">These apocalyptic predictions ...</p>
    <p>
      <a href="AboutUs.html">About Us</a>
      ...
    </p>
    <p>Copyright © 2014</p>
</div>


 

代码中的省略号是怎么回事

本书不可能把每个示例的所有标记都印出来,除非把它扩充到12 000页,再毁掉一片成材林。不过,这些代码能够展示出页面的基本结构,以及所有重要的元素。为此,代码中使用了省略号(…),用以表示省略未印刷出来的内容。

例如,就拿这段代码来说,其中包含了图2-2所示页面主体中的所有内容,只不过省略了一些包含文字的段落、Manyan Doomsday后面的条目以及页脚中的一些链接。如果你想仔细观察页面中的每一处细节,当然没有问题,就在本书试验站点(http://prosetech.com/html5)查看示例文件即可。

在一个(像这个一样的)编写规范的传统HTML页面中,通过使用<div>和<span>元素,已经把大部分工作移交给了样式表。通过<span>可以为处在其他元素中的少量文本添加样式,而通过<div>不仅可以为整个内容区块添加样式,还可以构建起整个页面的结构(见图2-2)。



这个例子中的样式表比较简单。整个页面的最大宽度设置为800像素,避免文本在宽屏显示器上显示得过长。页眉位于一个带蓝色边框的盒子中,内容区的两侧都添加了内边距,而页脚在整个页面底部居中。

因为使用了<div>元素,所以添加样式很容易。比如,样式表ApocalypsePage_Original.css使用下列规则为页眉及其中内容添加样式。
 

/*为<div>添加样式,使其具有页眉的外观(蓝色带边框)*/
.Header {
  background-color: #7695FE;
  border: thin #336699 solid;
  padding: 10px;
  margin: 10px;
  text-align: center;
}

/*为页眉中的<h1>添加样式(这是文章的标题)*/
.Header h1 {
  margin: 0px;
  color: white;
  font-size: xx-large;
}

/*为页眉中的子标题添加样式*/
.Header .Teaser {
  margin: 0px;
  font-weight: bold;
}

/*为页眉中的署名行添加样式*/
.Header .Byline {
  font-style: italic;
  font-size: small;
  margin: 0px;
}

你可能注意到了,这些规则有效利用了上下文选择符(见A.3.3节)。比如,用选择符.Header h1选择了页眉区域中的所有<h1>元素。

提示 附录A在介绍CSS时也用到了这个例子。如果你想知道应用给这个页面的所有样式规则,可以翻到A.4节。



 


点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.3 功能
下一篇:1.5 小结
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站