小米案例之伪元素的使用

杏黄的三叶草

于 2020-01-25 20:32:19 发布

阅读量126

点赞数

分类专栏： Web前端CSS

本文链接：https://blog.csdn.net/dwjdj/article/details/104084675

版权

Web前端CSS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

官网上的图片

在这里插入图片描述

我们就只写出大概框架

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box{
            width: 300px;
            height: 200px;
            background-color: rgba(0,0,0,0.5);
            margin: 100px auto;
        }
        .box li{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }
        /*横线*/
        li::before{
            content: "";
            display:block;
            width: 90px;
            height: 1px;
            background-color:blue;
            position: absolute;
            left: 5px;
        }
        /*竖线*/
        li::after{
            content: "";
            display: block;
            width: 1px;
            height: 90px;
            background-color:blue;
            position: absolute;
            top: 5px;
        }
        li:nth-child(1)::after{
            display: none;
        }
        li:nth-child(4)::after{
            display: none;
        }
        li:nth-child(-n+3)::before{
            display: none;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

图标字体和图片后面有空再加上去

杏黄的三叶草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小米案例之伪元素的使用

官网上的图片我们就只写出大概框架<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ ...
复制链接

扫一扫