flex可以使其内部的元素弹性布局

最新推荐文章于 2023-08-18 00:15:00 发布

python基础教程

最新推荐文章于 2023-08-18 00:15:00 发布

阅读量636

点赞数

分类专栏： 01前端基础教程html_css_js

本文链接：https://blog.csdn.net/stopcpp/article/details/72579419

版权

01前端基础教程html_css_js 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

这里写图片描述
仿天猫头部
使用diplay:flex可以使其内部的元素弹性布局

<!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,maximum-scale=1,user-scalable=no" />
    <title>仿天猫头部</title>
    <style>
    #header {
        display: flex;
        width: 100%;
        height: 50px;
    }

    .ss {
        flex: 1;
    }
    </style>
</head>

<body>
    <header id="header" class="home">
        <figure class="fl ff">
            <img src="fl.png" alt="分类" class="flp">
            <figcaption>分&nbsp;类</figcaption>
        </figure>
        <input type="text" class="ss" name="ss" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;搜索双11，好货马上到手">
        <figure class="fr ff">
            <img src="images/sys.png" alt="扫一扫" class="frp">
            <figcaption>扫一扫</figcaption>
        </figure>
    </header>
</body>

</html>