HTML+CSS编写静态网站-27 清空footer浮动属性

最新推荐文章于 2021-06-04 05:38:50 发布

虚坏叔叔

最新推荐文章于 2021-06-04 05:38:50 发布

阅读量710

点赞数

本文链接：https://blog.csdn.net/biggbang/article/details/74516194

版权

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

现在，让我们继续。最后需要我们应用样式的是我们的列表项中的段落。

所以，我要选择我们的gallery下面的li下面的a下面的p，设置margin为0，因为段落在默认情况下有一定的边距。然后，我们将padding设置为5％，然后，我们想减小字体的大小，因为它们有点大。所以我们将它设置为0.75 em。最后，我们要调整颜色。我们将它设置为bdc3c7：

 
 #gallery li a p{

       margin:0;

       padding:5%;

       font-size:0.75em;

       color:#bdc3c7;

}
所以，如果我们保存，切换回浏览器。刷新。你可以看到，现在我们段落变成更浅的灰色，我们已将边距设置为零，这有利于在图像周围添加填充。最后，你可以看到字体大小和颜色都发生了改变。

接着，我们还需要解决的一件事情。我们来到页脚，你会注意到它在我们的画册里面。这是因为它也被浮动的属性影响。所以，我们需要清除掉左边和右边的浮动对footer的影响。所以，让我们找到我们的footer并添加一个名为clear的属性。

我们将clear的值设置为both，因为我们希望左右两侧的影响都被清除：

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

FOOTER

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

footer{

font-size:0.75em;

text-align:center;

       clear:both;

padding-top:50px;

color:#ccc;

}
保存，切换回浏览器并刷新。你看，页脚现在回到了页面底部。

现在，注意到页面顶部仍然存在对齐问题，但是当我们对导航和标题进行修改时，我们再来解决这个问题。

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

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

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