Homework-03, Badges布局

最新推荐文章于 2024-09-13 23:28:46 发布

_洋

最新推荐文章于 2024-09-13 23:28:46 发布

阅读量123

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/mantou_riji/article/details/121090698

版权

Homework-03, Badges布局

补充说明：Google Material Icon，是Google设计提供的一套免费开源的图标库
Google官方最新为v4版，用以下v3即可
学习使用方法及国内CDN：http://micon.dxbtech.cn/
正确引入css后，声明展示对应的图标

实现如下效果：
在这里插入图片描述
原理与思路
布局
badge整体容器，包含：badge-content容器，badge-wrapper容器
badge-content容器，内容为图标
badge-wrapper容器，内容为数字

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bug</title>
    <link rel="stylesheet" type="text/css" href="fixed.css">
    <link href="https://cdn.jsdelivr.net/gh/google/material-design-icons@3.0.1/iconfont/material-icons.min.css" rel="stylesheet">
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .badge-content{
            color: #34a1ce;
            font-size: 100px;
        }
        .badge{
            position: relative;
            width: 100px;
            height: 100px;
        }
        .badge-wrapper{
            background-color: red;

            /*位置*/
            position: absolute;
            top:5px;
            left:55px;

            /*大小*/
            width: 40px;
            height: 40px;

            /*文字*/
            color: white;
            font-size: 20px;
            text-align: center;

            /*边界*/
            border-radius: 50%;
            border: 5px solid white;
        }

    </style>
</head>
<body>
<div class="badge">
    <div><i class="material-icons badge-content">bug_report</i></div>
    <div class="badge-wrapper">12</div>
</div>

</body>
</html>