首先,我们来对无序列表进行一些基本的调整。我们将删除项目符号,然后增加填充和边距,以及调整字体大小。 所以来到CSS中,让我们在PAGE ABOUT下添加一个新的多行注释PAGE CONTACT。
|
现在,我们可以添加我们的样式。我要选择.contact-info。List-style设置为none,padding设置为0,margin:0,最后将字体大小设置为0.9 em。
|
所以让我们切换回浏览器并观看这个列表,看看是什么样的。 接下来,我将为每个列表项添加背景图像。 所以,我要选择每个列表项,并添加img文件夹中包含的图标。这和以前添加图像的方法略有不同,因为我们想展示给大家各种图像包含技术。 所以首先,我们需要选择contact-info列表,然后选择li,然后在li后面.phone。这里没有空格。因为phone是li的class,而不是嵌套在li列表中的元素。 最后,我们要选择里面的a元素。 所以,这就会选择class为phone下面的a元素。 现在,我们输入属性background-image,然后我们将使用一个特殊值URL,因为我们需要添加一个URL。这个URL将是我们图像的路径。在URL后面的括号内,我们需要添加两个单引号来保存URL,然后我们将键入两个点,一个斜杠,img,然后是phone.png,
|
这两个点可以让我们回到当前目录的上一个目录,这将使我们到这里的根文件夹,然后我们可以回到img,最后找到phone.png。这就是相对路径。
接下来,让我们复制并粘贴,我们将粘贴这两次。所有我们需要做的是将class更改为mail和twitter,然后我们需要将图像的名称更改为mail和twitter。
|
所以我们会保存一下。刷新页面: 您可以看到这里有一些灰色的方块,实际上,他们应该是在文本左边,所以。我们需要在这里添加一些间距。所以我们再回到css代码。我们说,contact-info,并选择a元素,我们将display设置为block。最小高度设为20px。背景重复属性设置为不重复。背景大小属性设为20像素和20像素。然后填充设为0 0 0 30px。最后将边距设置为0,0和10像素
|
这里有很多代码。我们来一一解释。我们已将display设置为block。这意味着在这种情况下,我们每个图像将占据空间。这将给我们更多的空间来使用,以便我们的图像有一个实际显示的地方。 接下来,我们将每个项目的最小高度设置为20像素。这是我们的图标完全可见的最小高度。 接下来,我们设置了另外两个背景属性background-repeat和background-size。默认情况下,CSS中的背景图像将始终重复,但是我们希望这些背景只显示一次。所以我们将背景设置为不重复。 接下来,background的size属性将调整为背景大小。 接下来,我们设置了填充。对于填充,我们希望在元素左侧空出额外的空间,因为我们的图像将放在这些链接的左侧。所以因为在左边有一个填充,这将给图像一个显示的地方。 最后,我们在底部添加十个像素的边距,以使我们每个链接之间垂直的分离开。 保存并刷新。所以,这是关于我们的Contact页面。接下来,我们将会学习如何使我们的网站在各种屏幕分辨率(如桌面和平板电脑)上工作。然后我们将网站放到网上。最后,我们将学习如何解决一些可能遇到的常见错误和错误。 更多精彩内容尽在视频中!