个人中心
gpt4 book ai didi

html - html和css中的图标栏自定义

转载 作者：太空宇宙 更新时间：2023-11-04 01:25:23 25 4
gpt4 key购买 nike

我正在尝试自定义以下图标栏(如 w3schools 中所示)- 粘贴在下面的代码和链接，以显示如图所示的图像。图标下方需要有文字(标签)。这不是微不足道的，因为如果您继续阅读问题的描述，您就会看到。此外，我想向这些图标添加悬停文本，如图所示。

enter image description here

感谢任何解决方案/建议。

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>

此外，以这种方式添加文本的设计缺陷是在移动网站上，格式将完全丢失。见下图。

enter image description here

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

最佳答案

这是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 - html和css中的图标栏自定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48225355/

25 4 0
文章推荐： 使用字典的 Python 正则表达式替换
文章推荐： javascript - JavaScript闭包如何工作？
文章推荐： c - 为什么 gcc 在 cmd 行 (-D) 中重新定义 malloc() 时不检查函数的隐式声明？
文章推荐： python - 删除 python 3 中的尾随空格
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com