使用DIV+CSS布局美化影城首页（1） #Web开发（2）

在“使用HTML制作影城首页”的案例中，只是使用标签将内容放置到页面中显示，没有用到样式，所以看起来并不美观。本次案例将在之前HTML页面的基础上进行添加和修改，使用CSS样式，对其进行美化。这里将使用外部引入CSS样式表的形式应用到HTML文档中，实现页面结构与表现层的分离。在选择元素时要合理的使用选择器。

在项目CSS目录下新建一个.css文件，并命名为“index.css”，然后在“index.html”的head中使用link标签将此外部样式文件引进来。

<link rel="stylesheet" href="css/index.css" type="text/css"> 在头部写入这个代码，把index.css中的文件引到index.html中来。

【如下图所示！！！】

第一步就是因为我们的标签，虽然我们是没有强制给它加一些样式，但是这个标签在设计的时候呢，它本身默认的不同的浏览器去解析的时候呢，它是有一些默认的值的，通常情况下呢，这个默认的值在不同浏览器下是不一样的，那么这就要求我们在做Web开发的时候，我们就要考虑到统一性！！！毕竟我们在开发的时候我们并不知道用户将来要使用哪一款浏览器，但是我们希望它看到我们的产品肯定是统一的样式，所以我们就要解决掉这些差异性。

我们这种差异性的解决其实是有很多种办法的。比如说你有默认的差异，那我们就把这些都重置一下，把它们全部置为零。在重制的基础上，我们再把这些给它加上我们默认的像素，不就解决了差异性了吗。

我要使html上所有的标签所有的元素都统一化，我们就用到了 {} 这个选择器。如我要使外边距和内边距格式化【* 这选择器叫作 通配符】：

首先打开“index.css”文件，先重置页面的样式，因为页面中会大量的用到a标签和li，所以在重置时先去掉a标签的下划线和li标签的项目编号等默认样式。

【这样就可以使index.html中的id=“header”与index.css中的#header形成连接！！！】

我们要想改变新浪和QQ的图标怎么办呢？

其实也好办，我们只需要将新浪和QQ的图标由图片变成背景图片就可以了。然后我们用后带选择器就可以了。

【大家可以看看多了什么！！！】

{好吧！！！今天先进行到这！！！}