HTML 课程 |建筑页脚

课程导航

因此，除了页脚之外，我们已经完成了网站的所有部分的构建。那么，让我们来看看我们最终的页脚会是什么样子：

我们的页脚主要由两部分组成：

• 公司详细信息：这包含地址详细信息、电话详细信息和电子邮件详细信息的三列。
• 版权信息：这包含有关版权的信息和社交媒体句柄的链接。

在我们开始构建页脚之前。建议去一次这个链接： Font Awesome Icons 。
我们将在页脚的不同位置使用字体真棒图标。要使用 fontawesome 图标，请按照以下步骤操作：

• 包括 Font Awesome CSS。将以下代码粘贴到 index.html 文件顶部的 head 标记之间。

• 现在，要使用图标，只需将以下类添加到 span 标签。

Where, icon_name is the name of the icon.

现在让我们开始编写网站页脚的 HTML 结构。我们将页脚分为两部分，即公司详细信息和版权信息。
请按照以下步骤操作：

1. 创建两个类名分别为“company-details”和“copyright”的div。
2. 步骤对于类“company-details”的div：
   • 添加一个名为“row”的类。
   • 在前一个 div 中添加三个 div，id 分别为 col1、col2 和 col3。
   • 为每个列 div 声明两个 span 标签。一个用于字体真棒图标，第二个用于信息。
3. 具有“版权”类的 div 的步骤：
   • 添加段落元素以显示文本：“© 保留所有权利 | Geeks for Geeks。”
   • 添加三个元素的无序列表以显示三个社交媒体图标。

下面是页脚的完整 HTML 代码：

HTML

    

 
        
        
        

            

                

                    
 
                    
                    710-B, Advant Navis Business Park,
                    
Sector-142, Noida
                
                
 
                

                    
 
                    
                    Telephone: +91-890 * * * * * * *
                
                
 
                

                    
                    [e-mail]
                
            
        
 
        
        

             
 
© All rights reserved | GeeksforGeeks.
 
 
 
            

                

                    
 
                    
                
 
                

                    
 
                    
                
 
                

                    
 
                    
                
            
        
    

查看下图中红色标记的部分。这是网站页脚现在的样子：

现在让我们向页脚添加样式。

将样式添加到 div “website-details”

• 首先设置基本布局样式：设置基本边距、填充、背景颜色并将文本居中对齐。
  将以下 CSS 代码添加到 style.css 中：

CSS

.company-details{
    overflow: hidden;
    padding: 3em 0em;
    background: #E3F0F7;
    text-align: center;
    margin-top: 5em;
}

• 在一行中对齐三列：将所有三列向左浮动，并为每列分配 320px 的宽度。
  将以下 CSS 代码添加到 style.css 文件中：

CSS

#footer #col1,
#footer #col2,
#footer #col3{
    float: left;
    width: 320px;
    padding: 0px 40px 0px 40px;
}

• 为 FontAwesome 图标添加样式：将图标的字体大小设置为 3em，下边距为 1em，并将它们显示为块。
  将以下 CSS 代码添加到 style.css 文件中：

CSS

#footer #icon{
    display: block;
    margin-bottom: 1em;
    font-size: 3em;
}

将样式添加到 div “版权”

• 向基本布局添加样式：为版权类设置基本边距、填充、背景颜色等。
  将以下 CSS 代码添加到 style.css 文件中：

CSS

.copyright
{
    overflow: hidden;
    padding: 3em 0em;
    border-top: 20px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    background: #4CAF50;
}

• 为段落元素添加样式：为存储在

  标签中的版权信息添加样式。添加字母间距、颜色等。
  将以下 CSS 代码添加到 style.css 文件中：

CSS

.copyright p
{
    letter-spacing: 1px;
    font-size: 0.90em;
    color: rgba(255, 255, 255, 0.6);
}

• 给锚标签添加样式：将锚标签和文本装饰的颜色设置为无：

CSS

.copyright a
{
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
}

如果您现在在浏览器中打开 index.html文件，您将看到如下所示的页脚：

上面的页脚看起来不错，唯一的区别是facebook、twitter 等社交图标的显示。让我们解决这个问题。剩下的最后一件事是为社交媒体图标添加样式。

为社交图标添加样式：

• 从 ul 或名为“contact”的类中删除边距，添加填充并将列表样式设置为无：

CSS

ul.contact{
    margin: 0;
    padding: 2em 0em 0em 0em;
    list-style: none;
}

• 将列表项设置为内联块显示，以便图标可以水平显示而不是垂直显示。还将填充和字体大小添加到列表项。

CSS

ul.contact li{
    display: inline-block;
    padding: 0em 0.10em;
    font-size: 1em;
}

• 添加上述两种样式后，图标现在将水平排列并位于版权div的中心。进行上述更改后，刷新并在浏览器中查看结果。
• 最后一件事是为社交图标添加背景。为此，请为每个列表项的锚标记添加以下样式：

CSS

ul.contact li a{
    color: #FFF;
    display: inline-block;
    background: #4C93B9;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

网站页脚的完整 CSS 代码如下：

CSS

/**********************************/
/*          Styling Footer        */
/**********************************/
 
/*** Adding Styles to Company Details ***/
.company-details{
    overflow: hidden;
    padding: 3em 0em;
    background: #E3F0F7;
    text-align: center;
    margin-top: 5em;
}
 
#footer #col1,
#footer #col2,
#footer #col3{
    float: left;
    width: 320px;
    padding: 0px 40px 0px 40px;
}
     
#footer #icon{
    display: block;
    margin-bottom: 1em;
    font-size: 3em;
}
 
/*** Adding Styles to Copyright Div ***/
.copyright
{
    overflow: hidden;
    padding: 3em 0em;
    border-top: 20px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    background: #4CAF50;
}
     
.copyright p
{
    letter-spacing: 1px;
    font-size: 0.90em;
    color: rgba(255, 255, 255, 0.6);
}
     
.copyright a
{
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
}
 
/* Styling Social Icons */
ul.contact{
    margin: 0;
    padding: 2em 0em 0em 0em;
    list-style: none;
}
     
ul.contact li{
    display: inline-block;
    padding: 0em 0.10em;
    font-size: 1em;
}
 
ul.contact li a{
    color: #FFF;
    display: inline-block;
    background: #4C93B9;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

支持的浏览器：

• 谷歌浏览器
• 微软边缘
• 火狐
• 歌剧
• 苹果浏览器

<< 上一个
最终测验