HTML+CSS编写静态网站-34 为Contact页面添加样式

视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015

首先，我们来对无序列表进行一些基本的调整。我们将删除项目符号，然后增加填充和边距，以及调整字体大小。

所以来到CSS中，让我们在PAGE ABOUT下添加一个新的多行注释PAGE CONTACT。

 
 
/* **************************************

PAGE CONTACT

************************************** */
现在，我们可以添加我们的样式。我要选择.contact-info。List-style设置为none，padding设置为0，margin:0，最后将字体大小设置为0.9 em。

 
 
/* **************************************

PAGE CONTACT

************************************** */

 

.contact-info{

       list-style:none;

       padding:0;

       margin:0;

       font-size:0.9em;

}
所以让我们切换回浏览器并观看这个列表，看看是什么样的。

接下来，我将为每个列表项添加背景图像。

所以，我要选择每个列表项，并添加img文件夹中包含的图标。这和以前添加图像的方法略有不同，因为我们想展示给大家各种图像包含技术。

所以首先，我们需要选择contact-info列表，然后选择li，然后在li后面.phone。这里没有空格。因为phone是li的class，而不是嵌套在li列表中的元素。

最后，我们要选择里面的a元素。

所以，这就会选择class为phone下面的a元素。

现在，我们输入属性background-image，然后我们将使用一个特殊值URL，因为我们需要添加一个URL。这个URL将是我们图像的路径。在URL后面的括号内，我们需要添加两个单引号来保存URL，然后我们将键入两个点，一个斜杠，img，然后是phone.png，

 
 
.contact-info li.phone a{

       background-image:url(../img/phone.png);

}
这两个点可以让我们回到当前目录的上一个目录，这将使我们到这里的根文件夹，然后我们可以回到img，最后找到phone.png。这就是相对路径。

接下来，让我们复制并粘贴，我们将粘贴这两次。所有我们需要做的是将class更改为mail和twitter，然后我们需要将图像的名称更改为mail和twitter。

 
 
.contact-info li.mail a{

background-image:url(../img/mail.png);

}

.contact-info li.twitter a{

background-image:url(../img/twitter.png);

}
所以我们会保存一下。刷新页面：

您可以看到这里有一些灰色的方块，实际上，他们应该是在文本左边，所以。我们需要在这里添加一些间距。所以我们再回到css代码。我们说，contact-info，并选择a元素，我们将display设置为block。最小高度设为20px。背景重复属性设置为不重复。背景大小属性设为20像素和20像素。然后填充设为0 0 0 30px。最后将边距设置为0，0和10像素

 
 
.contact-info a{

       display:block;

       min-height:20px;

       background-repeat:no-repeat;

       background-size:20px 20px;

       padding:0 0 0 30px;

    margin:0 0 10px;

}

 

.contact-info li.phone a{
 
这里有很多代码。我们来一一解释。我们已将display设置为block。这意味着在这种情况下，我们每个图像将占据空间。这将给我们更多的空间来使用，以便我们的图像有一个实际显示的地方。

接下来，我们将每个项目的最小高度设置为20像素。这是我们的图标完全可见的最小高度。

接下来，我们设置了另外两个背景属性background-repeat和background-size。默认情况下，CSS中的背景图像将始终重复，但是我们希望这些背景只显示一次。所以我们将背景设置为不重复。

接下来，background的size属性将调整为背景大小。

接下来，我们设置了填充。对于填充，我们希望在元素左侧空出额外的空间，因为我们的图像将放在这些链接的左侧。所以因为在左边有一个填充，这将给图像一个显示的地方。

最后，我们在底部添加十个像素的边距，以使我们每个链接之间垂直的分离开。

保存并刷新。所以，这是关于我们的Contact页面。接下来，我们将会学习如何使我们的网站在各种屏幕分辨率（如桌面和平板电脑）上工作。然后我们将网站放到网上。最后，我们将学习如何解决一些可能遇到的常见错误和错误。

更多精彩内容尽在视频中！

本文固定链接：http://www.oxox.work/web/html-css/contacts-style/ | 虚幻大学

查看原文：http://www.oxox.work/web/html-css/contacts-style/