随便给你一个页面你该如何去给他布局呢各位思考一下？-阿里云开发者社区

随便给你一个页面你该如何去给他布局呢各位思考一下？

2023-07-16 48

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 随便给你一个页面你该如何去给他布局呢各位思考一下？

随便给你一个页面你该如何去给他布局呢各位思考一下？

弹性布局案例实操(京东网页对草稿页面进行改进)_星辰镜的博客-CSDN博客

在上面两课的基础下完成的页面效果

案例效果一

效果案例二

案例效果三

案例效果四

案例效果五

案例效果六

案例效果七

案例效果八

案例效果九

案例效果十

案例效果十一

案例效果十二

案例效果十三

弹性布局案例实操(京东网页对草稿页面进行改进)_星辰镜的博客-CSDN博客

代码在上面的的博客中自己可以去找这里Html 不在说明了只展示下面图片的模块代码剩下的内容都是很简单的内容

案例效果十

<!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>导行栏的案例</title>
    <!-- https://www.freesion.com/article/5352147817/ -->
    <style>
        .one {
            float: left;
            background-color: rgb(10, 10, 10);
            color: red;
            height: 100px;
            width: 200px;
            font-size: 8px;
            text-align: center;
            line-height: 100px;
            position: absolute;
        }
        .two {
            background-color: rgb(255, 255, 255);
            height: 657px;
            width: 90%;
            opacity: 0;
            /* border: 1px solid red; */
        }
        .one+.two:hover {
            opacity: 1;
        }
        .three_two {
            height: 657px;
            width: 100%;
            margin-left: 150px;
            display: block;
            /* border: 2px solid lightseagreen; */
        }
        span {
            display: inline-block;
        }
        .father {
            float: left;
            margin-left: -1px;
            width: 78%;
            height: 606px;
            /* border: 1px solid #05690a; */
            background: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 100%);
        }
        .father:hover{
            background-image: linear-gradient(to right, #00c9ff 0%, #92fe9d  100%);
        }
        p {
            width: 100%;
            height: 46px;
            /* border: 1px solid rgb(255, 0, 85); */
            /* background-color: #84d088; */
            font-size: 12px;
            opacity: 0.7;
        }
        .span_tex_span {
            font-size: 16px;
            font-weight: 900;
            background-color: rgb(255, 0, 0);
            color: rgb(255, 255, 255);
        }
        .pos_div {
            float: left;
            width: 18%;
            height: 92%;
            /* background-color: #22a2c3; */
            background-image: linear-gradient(to right, #a8edea 0%, #fed6e3 100%);
        }
        .mode2_text3 {
            background-image: linear-gradient(to right, #b7ebe8 0%, #f7b0c6 100%);
            /* border: 1px solid lightskyblue; */
            margin: 2px;
        }
        table {
            height: 100%;
            width: 100%;
        }
        table img {
            margin: auto;
            width: 28px;
            height: 28px;
        }
        td {
            text-align: center;
            /* border: 1px solid black; */
            height: 20%;
        }
        .one span:hover{
            background-image: linear-gradient(-60deg, #abe9dd 0%, #f4d03f 100%);
        }
        td:hover{
            background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);
        }
    </style>
</head>
<!-- https://uigradients.com/#Lithium -->
<body>
    <div class="one">
        显示元素信息
    </div>
    <div class="two">
        <span class="three_two">
            <div style="width:100% ;margin-left: 20px;height: 40px;line-height: 40px;">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                    style="height: 40px; white;font-weight: 900;width: 200px;text-align: center;border-radius: 12px;  background-image: linear-gradient(to right, #fddb92 0%, #d1fdff 100%);">家电馆&nbsp;&nbsp;&gt;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span
                    style="height: 40px;background-image: linear-gradient(to right, #ebc0fd 0%, #d9ded8 100%);color: white;font-weight: 900;width: 200px;text-align: center;border-radius: 12px;">开店设备一站购物&nbsp;&nbsp;&gt;</span>
            </div>
            <div class="father">
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                        class="span_tex_span">电视&nbsp;&nbsp;&gt;</span>&nbsp;&nbsp;全面屏电视&nbsp;&nbsp;教育电视&nbsp;&nbsp;OLED电视
                    &nbsp;&nbsp;智慧屏4K超清电视&nbsp;&nbsp; 55英寸 &nbsp;&nbsp;65英寸 &nbsp;&nbsp;电视配件</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                        class="span_tex_span">空调&nbsp;&nbsp;&gt;</span>&nbsp;&nbsp;新风空调&nbsp;&nbsp;以旧换新空调&nbsp;&nbsp;挂机空调&nbsp;&nbsp;柜机空调&nbsp;&nbsp;套装新-级能效挂机1.5匹
                    &nbsp;&nbsp;柜机3匹 变频空调 中央空调 移动空调</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                        class="span_tex_span">洗衣机&nbsp;&nbsp;&gt;</span>&nbsp;&nbsp;业滚筒洗衣机&nbsp;&nbsp;洗烘一体&nbsp;&nbsp;机波轮洗衣机&nbsp;&nbsp;洗烘套装&nbsp;&nbsp;迷你洗衣机&nbsp;&nbsp;
                    洗衣机配件 &nbsp;&nbsp;烘干机</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                        class="span_tex_span">冰箱&nbsp;&nbsp;&gt;</span>&nbsp;&nbsp;多门对开门&nbsp;&nbsp;三门双门&nbsp;&nbsp;冰洗套装&nbsp;&nbsp;冷柜/冰吧酒柜冰&nbsp;&nbsp;箱配件
                </p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                        class="span_tex_span">厨卫大电&nbsp;&nbsp;&gt;</span>&nbsp;&nbsp;厨卫大电&nbsp;&nbsp;油烟机
                    &nbsp;&nbsp;灶具烟灶套装集&nbsp;&nbsp;成灶集成水槽消毒柜&nbsp;&nbsp;洗碗机电热水器燃气&nbsp;&nbsp;热水器壁挂&nbsp;&nbsp;炉空
                    气能热水器</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                        class="span_tex_span">厨卫小店&nbsp;&nbsp;&gt;</span>&nbsp;&nbsp;破壁机 咖啡机榨汁机电炖锅果蔬净化清洗机 三
                    明治机/早餐机电烤箱厨师机/和面机 料理机电饼铛</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                        class="span_tex_span">环境用电&nbsp;&nbsp;&gt;</span>&nbsp;&nbsp;热水瓶面包机电火锅空气炸锅养生壶电磁炉 电饭煲电压力锅
                    微波炉面条机电陶炉电烧烤炉煮蛋器电热饭盒豆浆机
                </p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                        class="span_tex_span">个人健康&nbsp;&nbsp;&gt;</span>&nbsp;&nbsp;取暖器&nbsp;&nbsp; 空气净化器加湿器
                    &nbsp;&nbsp;净水器饮水机 &nbsp;&nbsp;茶吧机除湿机&nbsp;&nbsp; 电话机电风扇生&nbsp;&nbsp;活电器配件 冷风扇</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                        class="span_tex_span">清洁能源&nbsp;&nbsp;&gt;</span>&nbsp;&nbsp;剃须刀 电动牙刷 冲牙器 电吹风卷/直发器
                    理发路美容仪剃/脱毛器洁面仪按摩器按摩椅足浴盆</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                        class="span_tex_span">视频影视&nbsp;&nbsp;&gt;</span>&nbsp;&nbsp;吸尘器&nbsp;&nbsp;
                    扫地机器人&nbsp;&nbsp; 擦窗机器人&nbsp;&nbsp; 蒸汽/电动拖把&nbsp;&nbsp; 除螨仪 洗地机视听影育>&nbsp;&nbsp;家庭影院 KTV音响
                    &nbsp;&nbsp;迷你音响 DVD功放回音壁麦克风</p>
            </div>
            <div class="pos_div">
                <div class="mode2_text3">
                    <table>
                        <tr>
                            <td>
                                <img src="../image/table/2.png" alt="">
                                <p>礼品卡</p>
                            </td>
                            <td>
                                <img src="../image/table/3.png" alt="">
                                <p>企业购</p>
                            </td>
                            <td>
                                <img src="../image/table/4.png" alt="">
                                <p>话费</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="../image/table/4.png" alt="">
                                <p>礼品卡</p>
                            </td>
                            <td>
                                <img src="../image/table/5.png" alt="">
                                <p>企业购</p>
                            </td>
                            <td>
                                <img src="../image/table/10.png" alt="">
                                <p>话费</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="../image/table/2.png" alt="">
                                <p>礼品卡</p>
                            </td>
                            <td>
                                <img src="../image/table/3.png" alt="">
                                <p>企业购</p>
                            </td>
                            <td>
                                <img src="../image/table/4.png" alt="">
                                <p>话费</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="../image/table/4.png" alt="">
                                <p>礼品卡</p>
                            </td>
                            <td>
                                <img src="../image/table/5.png" alt="">
                                <p>企业购</p>
                            </td>
                            <td>
                                <img src="../image/table/10.png" alt="">
                                <p>话费</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="../image/table/4.png" alt="">
                                <p>礼品卡</p>
                            </td>
                            <td>
                                <img src="../image/table/5.png" alt="">
                                <p>企业购</p>
                            </td>
                            <td>
                                <img src="../image/table/10.png" alt="">
                                <p>话费</p>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </span>
    </div>
</body>
</html>