css底部添加分割线

CSS底部添加分割线

   在设计网站时，我们经常需要在页面底部加上分割线，以区分内容。这时候，我们可以使用CSS来实现这个效果。   首先，在HTML文件中，我们需要在底部添加一个div元素，作为分割线的容器。   div class="footer">
    /div>
   然后，在CSS文件中，我们给这个div元素添加样式。具体样式如下所示：   .footer {
          width: 100%;
          height: 1px;
          background-color: #dedede;
          margin-bottom: 20px;
  }
      上面的CSS代码中，我们给容器设置了宽度为100%，高度为1px，背景颜色为灰色，并留出20px的底部边距。  完整的HTML和CSS代码如下所示：  HTML代码：  !DOCTYPE html>
      html>
      head>
         title>
    CSS底部分割线/title>
         link rel="stylesheet" type="text/css" href="styles.css">
      /head>
      body>
         div class="wrapper">
            h1>
    这是一个标题/h1>
            p>
    这是一些内容。/p>
            div class="footer">
    /div>
         /div>
      /body>
      /html>
  CSS代码：  .wrapper {
          width: 80%;
          margin: 0 auto;
  }
  .footer {
          width: 100%;
          height: 1px;
          background-color: #dedede;
          margin-bottom: 20px;
  }
      上面的代码中，我们还给wrapper容器设置了宽度为80%，并让其水平居中。  最后，我们就可以在底部看到一个灰色的分割线了。这个方法既简单又实用，可以帮助我们更好地组织页面内容。		

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！