HTML+CSS编写静态网站-29 改变链接和页脚样式

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

现在，我们发现导航的样式还是不够漂亮，让我们继续对anchor元素应用样式。这里我们不必过多的使用样式的层级，因为我们的nav元素中只有一组anchor元素。所以，我们直接nav a。我们将font-weight设置为800. 实际上，字体重量属性可以设置为normal或bold。但它也可以设置为特定的数字。接着，我们将padding设置为15像素和10像素。所以，我们在链接元素的上下左右都添加了一些填充。这将更方便触摸屏设备的鼠标的点击。

 
 
nav li{

display:inline-block;

}

 

nav a{

       font-weight:800;

       padding:15px 10px;

}
现在，如果我们保存并刷新，您可以看到我们的链接现在更粗了，在他们的周围有更多的空间。并且，当我悬停在链接上时，您可以看到文本周围的很多空间现在也可以点击。所以，当我们在小屏幕的设备上，这将使得我们可以更容易的点击这些链接，这就是填充的作用。

接下来。在我们的页脚，你会注意到，我们的twitter和Facebook的图标太大了。我们希望他们小一点。现在它们是40个像素的大小，我们要将它减小一半，也就是20个像素大小。

为了做到这一点，我们实际上需要切换回到我们的HTML文件，这样我们才可以找到应用样式的地方。在我们的第一个链接上，紧跟在alt属性之后，我将添加一个class属性，称为social-icon。然后，我将复制这个class属性，并将其粘贴在我们的第二个链接上：

 
 
<footer>

<a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>

<a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
所以让我们保存我们的HTML，然后回到我们的CSS。在我们的FOOTER多行注释下，我要选择我们的social-icon。我将设置宽度为20像素，高度为20像素，边距为0和五个像素。所以，顶部和底部为0，左侧和右侧为5px，这将使得两个图标之间有一定的分隔。宽度和高度是图标大小的一半：

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

FOOTER

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

footer{

font-size:0.75em;

text-align:center;

clear:both;

padding-top:50px;

color:#ccc;

}

 

.social-icon{

       width:20px;

       height:20px;

       margin:0 5px;

}
让我们刷新页面：

你看，我们的图标现在小了很多，尺寸更加合理。

那么，到目前为止，你几乎已经学会了建立任何类型的简单网页所需的大部分技能。一开始学习HTML和CSS是非常具有挑战性的，但是，通过持续的实践，你会发现元素和属性会变成了你直觉。

接下来的课程中，我们仍然需要创建其他页面，但这将变得更容易，因为现在我们已经创建了大部分的公共元素。

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

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

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