这次就结合上两次的学习写个小例子

一个新闻页面

这次写个新闻页面，是新华社的一份有关记者问答的新闻

结构分析

打开页面，是一个单列定宽单列自适应的两列页面结构，左侧为新闻内容区域，右侧为侧边栏。在左侧的新闻内容区域从上至下又依次可分为新闻标题，新闻日期，新闻图片，图片说明，新闻内容，相关新闻链接和作者信息。在右侧侧边栏，又可分为图片新闻，广告，视频新闻。

其他特殊效果

首字处理

去过网易跟帖的朋友可能遇见过这种样式：

会发现文本的首字跟其他文本有些不同，我们可以利用CSS的伪对象first-letter来实现

这里所说的文本润色并不是将某些语句修改下使其变的更有文采，而是使用CSS修饰页面中的文本，改善文本使其在视觉上更加美观

一、文字基本样式

1、字体设置

在CSS样式中，可以定义单个字体，可以多个字体可以同时定义，浏览器在解析时是按顺序进行解析的。

font-family: Arial;
font-family: "微软雅黑", "宋体", Arial, Verdana, "Times New Romen";

在上面多字体例子中，浏览器会先寻找”微软雅黑”，如果没有找到会寻找”宋体”，以次类推

如果字体中包含空格应该用引号引起，中文字体也最好用引号引起

这时候会发现浏览器显示网页上文字使用的字体只能限制在电脑里已经安装的几款字体里。而且每个人的电脑里安装的字体也是因人而异的。这时候CSS3就引入了@font-face
它的作用是从网上下载并使用自定义字体，使页面显示字体不依赖用户的操作系统字体环境。

接着上次，继续学习三列页面布局结构。

一、三列宽度自适应结构

三列宽度自适应只需要把上次的左侧定宽右侧和中间自适应稍作修改就可以了。先保持上次的HTML结构不变

<div id="header">这里是头部信息</div>
<div id="container">
    <div class="mainBox">
        <div class="content">这里是主要内容区域让他宽一些他宽一些他宽一些他宽一些他宽一些他宽一些</div>
    </div>
    <div class="subMainBox">
        <p>这里是次要内容区域</p>
        <p>这里有两行</p>
    </div>
    <div class="sideBox">
        <p>这里是侧边栏</p>
        <p>这里有三行</p>
        <p>这里有三行</p>
    </div>
</div>
<div id="footer">这里是底部信息</div>

只需要稍作修改CSS代码，魅力就在于此！

昨天做汇报没有抽出时间来更新，由于 gitcafe 被收购，又把 repository 做了迁移，正好换了一个主题，把原主题稍微修改了一下。感觉心情舒畅了好多 O(∩_∩)O哈！

一、结构分析

三列结构的页面布局一般用在一些门户网站上，比如：网易、搜狐和新浪等等。对三列结构进行分析，会发现三列的布局结构可以分成两种情况

1、两个两列布局结构组成

第一种三列结构可以看做是两个两列布局结构组合而成的，比如下面这段HTML代码：

<div id="header">头部信息</div>
<div id="container">
    <div class="wrap">
        <div class="mainBox">主要内容区域</div>
        <div class="subMainBox">次要内容区域</div>
    </div>
    <div class="sideBox">侧边栏</div>
</div>
<div id="footer">底部信息</div>