HTML 课程 |构建主要内容 – 第 2 节

课程导航

在上一篇文章中，我们开始构建网站的主要部分，并完成了第一部分。现在让我们转到主要内容的第 2 部分。

您可以在下图中看到主要内容的第 2 部分：

如果仔细观察，可以说第 2 部分分为三列，如下所示：

这在 Web 开发的术语中也称为3 列布局。

让我们开始为我们网站的第 2 部分编写 HTML，请按照以下步骤操作：

1. 使用名为 row的类声明父 div。
2. 在父行 div 中声明三个 div 以包含三列，并将它们分别指定为 column1、column2 和 column3。
3. 对于每一列：
   • 用 class = “column-title” 声明一个 div。对于列的标题。
   • 为内容的描述声明一个段落p 元素。
   • 声明一个锚标签以添加一个外部链接，稍后将其样式设置为按钮。

以下是主要内容第 2 部分的完整 HTML 代码：

    

        

            

                
GFG Content
            
                      
            

                A Computer Science portal for geeks. It 
                contains well written, well thought and 
                well explained computer science and 
                programming articles, quizzes and ...
            
      
            
                Learn More
            
        
                  
        

            

                
GFG Practice
            
                      
            

                A practice poratal to test your knowledge 
                of data structures and algorithms by solving 
                problems asked in interviews of many tech giants 
                like, Amazon, Microsoft etc.
            
          
            
                Learn More
            
        
                      
        

            

                
GFG IDE
            
                      
            

                An integrated development environment to 
                run and test your codes in almost all of 
                the popular and widely used programming 
                languages.
            
              
            
                Learn More
            
        
    

如果您在浏览器中运行 index.html，您将能够看到如下所示的内容：

这与我们在主要内容中的最后第 2 节很接近。让我们开始为它添加样式。

• 添加布局的基本样式：首先，将溢出设置为隐藏并添加所有必需的边距和填充。接下来是在该部分的顶部提供 1px 的细边框，以将其与上一部分分开，并将其中的所有文本居中对齐。

  将以下 CSS 代码添加到 style.css 中：

  #section-2{
      overflow: hidden;
      margin-top: 5em;
      padding-top: 1em;
      border-top: 1px solid rgba(0, 0, 0, 0.2);
      text-align: center;
  }
  

• 对齐列内联：下一步是将单行中的所有列一个接一个地对齐。为此，请将以下 CSS 代码添加到 style.css 文件中：

  .row #column1, 
  .row #column2,
  .row #column3{
          float: left;
          width: 320px;
          padding: 80px 40px 80px 40px;
  }
  

• 设置列标题的样式：下一件好事是设置列标题的样式。除了默认值之外，为它们提供适当的字体大小和权重。将以下 CSS 代码添加到 style.css 文件中：

  .column-title h2{
      margin: 1em 0em;
      font-size: 1.6em;
      font-weight: 700;
  }
  

成功添加上述样式后，您的第 2 部分现在将如下所示：

除了底部的按钮，它现在看起来不错。这些按钮仍然显示为简单的链接。让我们通过添加一些 CSS 来让它们看起来不错。

样式按钮
要使按钮看起来不错，请执行以下操作：

• 删除文本装饰。
• 将文本居中对齐。
• 将显示属性设置为“inline-block”。
• 设置按钮的适当字体大小、颜色和背景颜色。
• 添加填充和边距。
• 将 cursor 属性设置为 pointer，这样每当用户将鼠标悬停在按钮上时，鼠标指针就会变成一个漂亮的手，代表一个指针。
• 每当用户将鼠标悬停在按钮上时，请使用:hover 选择器添加样式。

以下是您需要添加到 style.css 文件中的“按钮”类的完整 CSS 代码：

.button {
    text-decoration: none;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    background-color: #4CAF50; 
    color: white; 
    border: 2px solid #4CAF50;
    padding: 16px 32px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}
      
.button:hover {
    background-color: white;
    color: #4CAF50;
}

现在，我们网站的第 2部分已完成，如下所示：

<< 上一个

下一个 >>