Question

我正在尝试自定义以下图标栏（如w3schools所示） - 下面粘贴的代码和链接，显示如图所示。图标需要在它们下面有文本（标签）。这不是微不足道的，因为您将看到是否继续阅读问题的描述。此外，我还想将鼠标悬停在这些图标上，如图所示。

任何解决方案/建议表示赞赏。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_icon_bar_h

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;}

.icon-bar {
    width: 100%;
    background-color: #666;
    overflow: auto;
}

.icon-bar a {
    float: left;
    width: 20%;
    text-align: center;
    padding: 12px 0;
    transition: all 0.3s ease;
    color: white;
    font-size: 36px;
}

.icon-bar a:hover {
    background-color: #000;
}

.active {
    background-color: #44444 !important;
}
</style>
<body>

<div class="icon-bar">
  <a href="signup.php"><i class="fa fa-user"></i></a> 
  <a href="challenges.php"><i class="fa fa-mortar-board"></i></a> 
  <a href="login.php"><i class="fa fa-eye"></i></a> 
  <a href="series.php"><i class="fa fa-download"></i></a>

</div>

</body>
</html>

在显示的图像中，图标栏位于绿色背景图像上。我希望文本直接显示在下面，并且还要悬停文本显示。

我已经尝试了下面的内容，但是让布局正确非常困难。还有更好的方法吗？

<div class="icon-bar">
  <a href="signup.php"><i class="fa fa-user"></i></a> 
  <a href="challenges.php"><i class="fa fa-mortar-board"></i></a> 
  <a href="login.php"><i class="fa fa-eye"></i></a> 
  <a href="series.php"><i class="fa fa-download"></i></a>

</div>
<br>
<br>

    <br>
    <br>
    <br>

    <br>    
    <br><br>
    <br>
    <br>

    <br>    
    <br>
    <p><font color="white">Topic1  &nbsp;&nbsp;&nbsp;&nbsp;    &nbsp;&nbsp;&nbsp;                    Topic2      &nbsp;&nbsp;&nbsp;                   Topic3        &nbsp;&nbsp;&nbsp;&nbsp;                Topic4</font></p>
    <br>
    <br>
    <br>
    <br>

此外，在移动网站上添加文字的设计缺陷，格式化将完全丢失。见下图。

任何能够最有效地做到这一点的想法都会有很大的帮助！

Answer 1

试试这个，

.icon-bar{
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.icon-bar a {
  width: 20%;
  text-align: center;
  padding: 12px 0;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
}

这将影响.icon-bar类的所有标签。

此处还有一些关于display flex如何工作的文档，https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

这是针对w3学校代码的我只是改变了写图标和文字的方式。

无法在所有屏幕尺寸中查看图标栏，无论是放下拉按钮还是垂直显示，我已经写过，用于垂直显示，。我没有改变填充。因为我不知道你想要什么

如果你想要自举，我可以帮助你使用bootstrap我觉得这对你来说很容易。

 <!DOCTYPE html>
  <html>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
  awesome/4.7.0/css/font-awesome.min.css">
  <style>
     body {margin:0;}
    .icon-bar {
       width: 100%;
       background-color: #555;
       overflow: auto;
     }

    .icon-bar a {
       float: left;
       width: 20%;
       text-align: center;
       padding: 12px 0;
       transition: all 0.3s ease;
       color: white;
       font-size: 36px;
    } 

    .icon-bar a:hover {
       background-color: #000;
      }

    .icon-bar a{
       text-decoration:none;

    }

   .active {
    background-color: #4CAF50 !important;
    }

  @media only screen and (max-width: 700px) {
    .icon-bar a {
    width:100% !important;
   }
}

  </style>
  <body>

 <div class="icon-bar">
   <a class="active" href="#">
   <ul style="list-style:none">
    <li><i class="fa fa-home"></i></li>
    <li>home</li>
  </ul>
  </a> 
  <a href="#">
     <ul style="list-style:none" class="menu_ul">
      <li><i class="fa fa-search"></i></li>
      <li>search</li>
     </ul>
 </a> 
  <a href="#">
    <ul style="list-style:none" class="menu_ul">
      <li><i class="fa fa-envelope"></i></li>
      <li>mail</li>
   </ul>
  </a> 
  <a href="#">
     <ul style="list-style:none" class="menu_ul">
       <li><i class="fa fa-globe"></i></li>
       <li>web</li>
    </ul>
  </a>
  <a href="#">
   <ul style="list-style:none" class="menu_ul">
    <li><i class="fa fa-trash"></i></li>
    <li>delete</li>
   </ul></a> 
 </div>

</body>

html和css中的图标栏自定义

2 个答案: