Web实现：flex弹性布局分享链接实例

最新推荐文章于 2024-02-22 16:53:56 发布

jasmyn518

最新推荐文章于 2024-02-22 16:53:56 发布

阅读量85

点赞数

分类专栏： HTML 笔记 CSS 文章标签：前端 css css3

本文链接：https://blog.csdn.net/jasmyn518/article/details/123275536

版权

笔记同时被 3 个专栏收录

127 篇文章 3 订阅

订阅专栏

HTML

78 篇文章 2 订阅

订阅专栏

CSS

68 篇文章 0 订阅

订阅专栏

由于图片不是在线图片，效果显示不出来，下面贴出图片，可以自行下载替换。
文件名和图片对应关系如下图：

朋友圈

复制链接

弹性布局
HTML部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./index.css" />
    <title>Flex 布局</title>
  </head>
  <body>
    <div class="container">
      <div class="item wx">
        <div class="logo"></div>
        <span>微信好友</span>
      </div>

      <div class="item wx-circle">
        <div class="logo"></div>
        <span>朋友圈</span>
      </div>

      <div class="item qq">
        <div class="logo"></div>
        <span>QQ好友</span>
      </div>

      <div class="item ding">
        <div class="logo"></div>
        <span>钉钉好友</span>
      </div>

      <div class="item wb">
        <div class="logo"></div>
        <span>新浪微博</span>
      </div>

      <div class="item copy">
        <div class="logo"></div>
        <span>复制链接</span>
      </div>
    </div>
  </body>
</html>

CSS部分：

/* 注意，本题无需写样式清除 */
.container {
  width: 390px;
  background-color: #F1F1F1;
  padding-top: 25px;
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 48px;
  height: 65px;
  text-align: center;
  font-size: 12px;
  margin: 0 0 25px 25px;
}

.logo {
  width: 40px;
  height: 40px;
  border-radius: 25%;
  margin: 0 auto;
  margin-bottom: 8px;
}

.wx .logo {
  background: url(./images/wx.png) no-repeat center/ contain;
}

.wx-circle .logo {
  background: url(./images/wx-circle.png) no-repeat center/ contain;
}

.qq .logo {
  background: url(./images/qq.png) no-repeat center/ contain;
}

.ding .logo {
  background: url(./images/ding.png) no-repeat center/ contain;
}

.wb .logo {
  background: url(./images/weibo.png) no-repeat center/ contain;
}

.copy .logo {
  background: url(./images/link.png) no-repeat center/ contain;
}

jasmyn518

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web实现：flex弹性布局分享链接实例

由于图片不是在线图片，效果显示不出来，下面贴出图片，可以自行下载替换。文件名和图片对应关系如下图：HTML部分：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <met
复制链接

扫一扫