首页 >综合知识 > 内容

footer标签（footer）

综合知识 2023-11-20 18:00:32

导读大家好，最近小红发现有诸多的小伙伴们对于footer标签，footer这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。1、我们...

大家好，最近小红发现有诸多的小伙伴们对于footer标签，footer这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。

1、我们先来写html内容，footer有2部分组成，上面部分是常用的链接内容，可以做友情链接，下面部分是网站的版权申明，代码如下：

2、 <div class="gcs-footer">

3、 <div class="footer-top">

4、 <a href="#">百度网</a> |

5、 <a href="#">新浪网</a> |

6、 <a href="#">腾迅房产</a> |

7、 <a href="#">找货网</a> |

8、 <a href="#">北极绒</a> |

9、 <a href="#">阿里巴巴</a> |

10、 </div>

11、 <p>

13、 </p>

14、 </div>

15、效果图如下：

16、我们设置padding为0，margin为0，这样就可以清除内外边距，否则宽度100%会出现水平滚动条。

17、接下来我们给footer区域加上高度为165px，宽度自适应，设置背景颜色，代码如下：

18、 .gcs-footer{

19、 margin-top: 20px;

20、 background:#222c3a;

21、 width: 100%;

22、 height: 165px;

23、 text-align: center;

24、 color: white;

25、 position: absolute;

26、 }

27、效果图如下：

28、下面给a标签加上样式，去掉text-docoration,设计文字颜色等，代码如下：

29、.gcs-footer .footer-top{

30、 margin-top: 50px;

31、 }

32、.gcs-footer a{

33、 color: #f0f1f1;

34、 text-decoration: none;

35、 padding: 0 10px;

36、 vertical-align:middle;

37、}

38、效果图如下：

39、下面给a加上鼠标经过效果，并设置p元素的css样式，代码如下：

40、.gcs-footer a:hover{

41、 color: red;

42、 text-decoration: underline;

43、}

44、.gcs-footer p{

45、 height: 15px;

46、 color: #888888;

47、 margin-top: 30px;

48、}

49、效果图如下：

50、最后，请看完整的源代码如下：

51、<!DOCTYPE html>

52、<html>

53、 <head>

54、 <meta charset="UTF-8">

55、 <title></title>

56、 <style type="text/css">

57、 *{

58、 padding: 0;

59、 margin: 0;

60、 }*

61、 .gcs-footer{

62、 margin-top: 20px;

63、 background:#222c3a;

64、 width: 100%;

65、 height: 165px;

66、 text-align: center;

67、 color: white;

68、 position: absolute;

69、 }

70、.gcs-footer .footer-top{

71、 margin-top: 50px;

72、 }

73、.gcs-footer a{

74、 color: #f0f1f1;

75、 text-decoration: none;

76、 padding: 0 10px;

77、 vertical-align:middle;

78、}

79、.gcs-footer a:hover{

80、 color: red;

81、 text-decoration: underline;

82、}

83、.gcs-footer p{

84、 height: 15px;

85、 color: #888888;

86、 margin-top: 30px;

87、}

88、 </style>

89、 </head>

90、 <body>

91、 <div class="gcs-footer">

92、 <div class="footer-top">

93、 <a href="#">百度网</a> |

94、 <a href="#">新浪网</a> |

95、 <a href="#">腾迅房产</a> |

96、 <a href="#">找货网</a> |

97、 <a href="#">北极绒</a> |

98、 <a href="#">阿里巴巴</a> |

99、</div>

100、 <p>

102、 </p>

103、 </div>

104、 </body>

105、</html>

以上就是footer这篇文章的一些介绍，希望对大家有所帮助。

免责声明：本文由用户上传，如有侵权请联系删除！

标签：

上一篇：党项族是现在哪个民族图片（党项族是现在的什么民族）

下一篇：最后一页

footer标签（footer）

栏目最新

热门文章

footer标签（footer）

猜你喜欢

最新文章

栏目最新

热门文章