CSS图标菜单栏-CSS应用实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>搞代码-CSS图标菜单栏-CSS应用实例(gaodaima.com)</title> 
<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;
}

.active {
    background-color: #4CAF50 !important;
}
</style>
</head>
<body>
<div class="icon-bar">
  <a class="active" href="#"><i class="fa fa-home"></i></a> 
  <a href="#"><i class="fa fa-search"></i></a> 
  <a href="#"><i class="fa fa-envelope"></i></a> 
  <a href="#"><i class="fa fa-globe"></i></a>
  <a href="#"><i class="fa fa-trash"></i></a> 
</div>
</body>
</html>

本文案例为大家展示了《》的代码，若要看代码效果请大家点击“运行代码”按钮。

[code]<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <link rel=”stylesheet” href=”https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css”> <title>搞代码-CSS图标菜单栏-CSS应用实例(gaodaima.com)</title> <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; } .active { background-color: #4CAF50 !important; } </style> </head> <body> <div class=”icon-bar”> <a class=”active” href=”#”><i class=”fa fa-home”></i></a> <a href=”#”><i class=”fa fa-search”></i></a> <a href=”#”><i class=”fa fa-envelope”></i></a> <a href=”#”><i class=”fa fa-globe”></i></a> <a href=”#”><i class=”fa fa-trash”></i></a> </div> </body> </html>[/code]

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]‍，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：CSS图标菜单栏-CSS应用实例

Hi，您需要填写昵称和邮箱！