本小节基本要求：

了解CSS选择器

要点：

css选择器

目前样式

目标样式

在css文件中定义main-left选择器里面的内容

Step1：公告框

Step2：广告框

Step3：文章框

main-right选择器里的内容我们暂时不必定义。

此时右键，run运行，结果如下：

结论：

文字是显示出来了，但是框框没显示出来，为什么？因为还没有在css文件中写css选择器的代码。

以下是我定义的选择器：

  <div class="gonggao">哈喽，我是公告位</div>这个选择器为 gonggao

<div class="panel">    <div class="guangao">哈喽，我是广告位</div></div>这个有两个选择器，分别是panel与guanggao

文章就有些多了。

先来一个大的框框选择器content，我为什么要在外面加个大的框框content？因为这样好定义样式，而且写的有条有序是最重要的。 当然，也可以不写。自己玩的话，怎么方便怎么来。

大框框如下：

  <div class="content">        </div>

我们可以把热门文章放里面：

我又定义了card，hot，card-body这三个选择器。

<div class="cotent">             <div class="card">                    <div class="hot">                        我是热门文章                    </div>                    <div class="card-body">                            <ul>                                <li>文章一</li>                            </ul>                    </div>                </div>  </div> 

再把最新文章定义进去：

记住，我们知道标签之间是有父子关系的，也就是大小关系。

最新最热文章我把它们俩放在了大框框content里，所有它们两个是content的孩子(子节点)。

而最热文章hot，与最新文章new是同级的，同级别！

它们在content这个大框框里各占一半面积。

<div class="cotent">             <div class="card">     //最热文章                    <div class="hot">                        我是热门文章                    </div>                    <div class="card-body">                            <ul>                                <li>文章一</li>                            </ul>                    </div>                </div>					 						<div class="card">		//最新文章                    <div class="new">                        我是最新文章                    </div>                    <div class="card-body">                        <ul>                            <li>文章一</li>                        </ul>                    </div>                </div>  </div> 

下一篇就将这些选择器的代码写出来，让它们都有个家(框)。