上拉组件css-USharing

html:

<!DOCTYPE html>

<html>

<head>

<style>

.assort-list {

width:100%;

position: fixed;

bottom: 0;

left: 0;

height: 280px;

background-color: #525252;

display: flex;

justify-content: space-around;

flex-wrap: wrap;

align-items: center;

}

.assort-list-item {

width: 33.33%;

text-align: center;

box-sizing: border-box;

}

.assort-list-item i {

color: #FFFFFF;

font-size: 32px;

}

</style>

</head>

<body>

<button>Click me</button>

</a>

</a>

</a>

</a>

</a>

</a>

</div>

</body>

</html>

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./login-form.css" rel="stylesheet"> <title></title> <style> .assort-list { width:100%; position: fixed; bottom: 0; left: 0; height: 280px; background-color: #525252; display: flex; justify-content: space-around; flex-wrap: wrap; align-items: center; } .assort-list-item { width: 33.33%; text-align: center; box-sizing: border-box; } .assort-list-item i { color: #FFFFFF; font-size: 32px; } </style> </head> <body> <button>Click me</button> <div class="assort-list"> <a href="" class="assort-list-item"> <i class="fab fa-canadian-maple-leaf"></i> </a> <a href="" class="assort-list-item"> <i class="fas fa-headphones-alt"></i> </a> <a href="" class="assort-list-item"> <i class="far fa-play-circle"></i> </a> <a href="" class="assort-list-item"> <i class="fas fa-chart-line"></i> </a> <a href="" class="assort-list-item"> <i class="fas fa-circle-notch"></i> </a> <a href="" class="assort-list-item"> <i class="fas fa-house-damage"></i> </a> </div> </body> </html>

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="./fontawesome/css/all.css" rel="stylesheet">
    <link href="./login-form.css" rel="stylesheet">
    <title></title>
    <style>
      .assort-list {
        width:100%;
        position: fixed;
        bottom: 0;
        left: 0;
        height: 280px;
        background-color: #525252;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        align-items: center;
      }
      
      .assort-list-item {
        width: 33.33%;
        text-align: center;
        box-sizing: border-box;
      }
      
      .assort-list-item i {
        color: #FFFFFF;
        font-size: 32px;
      }
    </style>
  </head>
  <body>
    <button>Click me</button>
    <div class="assort-list">
      <a href="" class="assort-list-item">
        <i class="fab fa-canadian-maple-leaf"></i>
      </a>
      <a href="" class="assort-list-item">
        <i class="fas fa-headphones-alt"></i>
      </a>
      <a href="" class="assort-list-item">
        <i class="far fa-play-circle"></i>
      </a>
      <a href="" class="assort-list-item">
        <i class="fas fa-chart-line"></i>
      </a>
      <a href="" class="assort-list-item">
        <i class="fas fa-circle-notch"></i>
      </a>
      <a href="" class="assort-list-item">
        <i class="fas fa-house-damage"></i>
      </a>
    </div>
  </body>
</html>

上拉组件css

相关推荐

工具站点

觉得文章有用就打赏一下文章作者

微信扫一扫打赏