十六、flex应用练习做淘宝按钮界面

最新推荐文章于 2024-06-24 21:51:41 发布

gaoya7305

最新推荐文章于 2024-06-24 21:51:41 发布

阅读量157

点赞数

文章标签： flex 练习

本文链接：https://blog.youkuaiyun.com/gaoya7305/article/details/131702304

版权

本文通过实例演示如何利用Flex布局制作手机淘宝页面中的按钮界面。详细讲解了从目标设定、页面预览到具体实现的步骤，包括设置外层容器、内层元素以及文字样式，最终实现按钮的响应式设计，保证图标大小自适应并控制元素间距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目标
小技巧
实现
最终代码

一、目标：我们要做一个手机版本的淘宝网，蓝色框住的按钮这部分。

二、小技巧：如何在网页上看手机版本的页面

首先在网页上打开淘宝网，然后按F12，进入调试状态；（mac电脑要按出F12 - 长按fn - bar条上就自动显示F1 - F12 - 然后在点击）
点击这个类似pad按钮，就可以切换成手机版本 -》然后切换下成手机如iphone12 pro或者其他 -》然后再点击顶部的刷新按钮 -》接下来页面就会变成手机版的页面。 -》观察你要做的页面；

三、实现

1.准备工作 - 搭骨架

先后顺序分别是：

最外层容器nav；
两行nav-inner;
每行里面的按钮item;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
   
            margin: 0;
            padding: 0;
        }

        /* 设置外层容器 */
        /* 因为两行div本身就是垂直排列，所以不用把nav设置成弹性容器，所以不用管nav */
        .nav{
   
             /* 外层容器和屏幕是一样宽的，当然不写也一样 */
            width: 100%;
        }

        /* 设置每一行的容器 */
        /* nav-inner 里面的div元素因为需要横向排列，直接把他设置为弹性容器 */
        .nav-inner{
   
            display: flex;
        }

    </style>
</head>

<body>
    <!-- 创建一个最外层容器 -->
    <nav class="nav">
        <!-- 第一行行按钮 -->
        <div class="nav-inner">
            <!-- 单个按钮 -->
            <div class="item">
                <a href="#">
                    <img src="img/16/1.png">
                </a>
            </div>

            <div class="item">
                <a href="#">
                    <img src="img/16/2.png">
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/3.png">
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/4.png">
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/5.png">
                </a>
            </div>
            
        </div>


        <!-- 第二行行按钮 -->
        <div class="nav-inner">
             <!-- 单个按钮 --&

最低0.47元/天解锁文章