flex布局结合Before伪元素

最新推荐文章于 2024-06-01 16:48:19 发布

海涛高软

最新推荐文章于 2024-06-01 16:48:19 发布

阅读量1.5k

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_15267341/article/details/109487156

版权

VUE 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            max-width: 540px;
            min-width: 320px;
            background: #f2f2f2;
            margin: 0 auto;
            color: darkblue;
            overflow: hidden;
        }
        
        a {
            text-decoration: none;
        }
        
        ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
        
        .search_index {
            display: flex;
            position: fixed;
            top: 0px;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            width: 100%;
            min-width: 320px;
            max-width: 540px;
            height: 44px;
            background-color: cornflowerblue;
        }
        
        .search {
            flex: 1;
            height: 30px;
            border: 1px gray solid;
            border-radius: 10px;
            margin: 6px 5px;
            position: relative;
            padding-left: 25px;
            line-height: 28px;
        }
        
        .search::before {
            content: "";
            display: block;
            width: 10px;
            height: 10px;
            top: 8px;
            left: 6px;
            background-color: hotpink;
            position: absolute;
        }
        
        .user::before {
            content: "";
            width: 20px;
            height: 20px;
            display: block;
            background-color: cyan;
            margin: 2px auto;
        }
        
        .user {
            width: 40px;
            height: 40px;
            background-color: coral;
            text-align: center;
            font-size: 1px;
        }
        
        .box01 {
            height: 100px;
            display: flex;
            margin-top: 46px;
        }
        
        .box01 li {
            flex: 1;
            background-color: lightgrey;
            text-align: center;
        }
        
        .box01_text::before {
            content: "";
            display: block;
            width: 45px;
            height: 45px;
            margin: 16px auto 4px;
            background-color: lavender;
        }
    </style>
</head>

<body>
    <div class="search_index">
        <div class="search">请输入文字</div>
        <a href="http://www.baidu.com" class="user">我</a>
    </div>
    <ul class="box01">
        <li><a class="box01_text">嵩山</a></li>
        <li><a class="box01_text">泰山</a></li>
        <li><a class="box01_text">华山</a></li>
        <li><a class="box01_text">天山</a></li>
        <li><a class="box01_text">鸡公山</a></li>
    </ul>
</body>

</html>

运行结果：

FR：徐海涛（hunk Xu)
QQ技术交流群：386476712

海涛高软

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex布局结合Before伪元素

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { .
复制链接

扫一扫