一个特殊静态页面的处理---静态页面实现流程图

本文介绍了如何处理一个特殊的静态页面,其中包含动态输入的配置信息和可变节点。通过HTML和CSS(Sass)实现布局,利用margin属性确保不同节点在页面上的相对位置。详细解析了布局原理,包括绝对定位和相对定位的结合使用,以及通过调整margin实现元素间距的自适应。

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

Tips:今天接收一个静态页面,被布局所困扰,不知从何下手,请同事指教,求解。

         每一个字段均从后台传入,每一个值也均改变的, 节点是可改变的 输入配置文字也是可以变化的



解决代码:


1.HTML

<!-- modals /S -->
<div class="modal modal-common-black" id="modalAddBucket">
    <div class="modal-box" style="width:800px;margin-top:5%">
       <div class="modal-title">业务流名称三<svg class="icon icon-guanbi size-30" modalAddBucketClose="modalAddBucketClose"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-guanbi"></use></svg></div>
       
        <div class="flow-box">
            <div class="floor1" >
           <div class= "box1">  
               <ul>
               <li><label>节点名称:</label><span>activity start(默认)</span></li>
               <li><label>bucket:</label><span>bucketABC</span></li>
               
               <li><label>输入路径:</label><span>13415425</span></li>
               <li><label>管道ID:</label><span>13415425</span></li>
               <li><label>执行状态:</label><span>进行中</span></li>
               </ul>
               <div class="line-dom"><div class="dom-box">输入配置</div><span class="line"></span></div>
           </div>
           <div class="floor2">
            <div class="line-dom"><div class="dom-box">输入配置</div><span class="line"></span></div>
            <div> 
               <div class="box1 error"> 
               <ul>
               <li><label>节点名称:</label><span>activity start(默认)</span></li>
               <li><label>bucket:</label><span>bucketABC</span></li>
               <li><label>节点名称:</label><span>activity start(默认)</span></li>
               <li><label>输入路径:</label><span>13415425</span></li>
               <li><label>管道ID:</label><span>13415425</span></li>
               <li><label>执行状态:</label><span>进行中</span></li>


               </ul>
               <div class="line-dom"><div class="dom-box">输入配置</div><span class="line"></span></div>
               </div>
               <div class="box1"> 
               <ul>
               <li><label>节点名称:</label><span>activity start(默认)</span></li>
               <li><label>bucket:</label><span>bucketABC</span></li>
               <li><label>节点名称:</label><span>activity start(默认)</span></li>
               <li><label>输入路径:</label><span>13415425</span></li>
               <li><label>管道ID:</label><span>13415425</span></li>
               <li><label>执行状态:</label><span>进行中</span></li>
               <li><label>节点名称:</label><span>activity start(默认)</span></li>
               
               </ul>
               <div class="line-dom"><div class="dom-box">输入配置</div><span class="line"></span></div>
               </div>
               <div class="box1"> 
               <ul>
               <li><label>节点名称:</label><span>activity start(默认)</span></li>
               <li><label>bucket:</label><span>bucketABC</span></li>
               <li><label>节点名称:</label><span>activity start(默认)</span></li>
               <li><label>输入路径:</label><span>13415425</span></li>
               <li><label>管道ID:</label><span>13415425</span></li>
                   <li><label>节点名称:</label><span>activity start(默认)</span></li>
               <li><label>bucket:</label><span>bucketABC</span></li>
               <li><label>节点名称:</label><span>activity start(默认)</span></li>
               <li><label>bucket:</label><span>bucketABC</span></li>
               <li><label>节点名称:</label><span>activity start(默认)</span></li>
               <li><label>输入路径:</label><span>13415425</span></li>
               <li><label>管道ID:</label><span>13415425</span></li>
                   <li><label>节点名称:</label><span>activity start(默认)</span></li>
               <li><label>bucket:</label><span>bucketABC</span></li>
               </ul>
                <div class="line-dom"><div class="dom-box">输入配置</div><span class="line"></span></div>
               </div>
               </div>
           </div>
           <div class="box1">  
               <ul>
               <li><label>节点名称:</label><span>activity start(默认)</span></li>
               <li><label>bucket:</label><span>bucketABC</span></li>
               <li><label>输入路径:</label><span>13415425</span></li>
               <li><label>管道ID:</label><span>13415425</span></li>
               
               </ul>
               <div class="line-dom"><div class="dom-box">输入配置</div><span class="line"></span></div>
           </div>
            </div>
        </div>
        
    </div>
</div>
<!-- modals /E -->


2.css(此为sass写法不能直接读取)

//public start
.modal {
    left: 0;
    top: 0;
    color: #33333c;
    width: 100%;
    height: 100%;
    z-index: 10000;
    position: fixed;
    display: none;
    overflow: auto;
}
.modal-common-white {
    background: rgba(255,255,255,.9);
}


.modal-common-black {
    background: rgba(0,0,0,.6);
}
.modal-box {
    background: #fff;
    border-radius: 3px;
    width: 600px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15%;
    .icon-guanbi {
        position:absolute;
        top:10px;
        right:10px;
        width: 12px;
        height: 12px;
        display: inline-block;
        &:hover {
            cursor: pointer;
        }
    }
}

.flow-box{
    position: relative;
    padding-top: 20px;
    overflow-y: scroll;
    height: 480px;
    overflow-x: hidden;
    padding-bottom: 50px;
    .floor1{
        position:relative;
        left: 20px;
        padding: 1px 0;
        margin-top:32px;
        margin-bottom:32px;
        border-left:1px solid #ededf1;   
    }
    .floor2{
        position:relative;
        left:170px;
        border-left:1px solid #ededf1;
        padding: 1px 0;
        margin-top: 52px;
        margin-bottom: 72px;
        .error{
            background:rgba(255,53,85,.1);
            color:#ff3555;
            border:1px solid #ff3555;
            .line-dom{
                color:#33333c;
            }
        }
        & > .line-dom{
            position:absolute;
            left:-170px;
            top:50%;
            width:170px;
            height:38px;
            font-size:14px;
            text-align:center;
            margin-top: -19px;
            .dom-box{
                width:110px;
                height:35px;
                line-height:35px;
                border:1px solid #ededf1;
                position: absolute;
                left: 50%;
                margin-left: -55px;
                z-index:100;
                background:#f9fafc;
            }
            .line{
                position:absolute;
                top:50%;
                display:inline-block;
                width:170px;
                left:0;
                border-top:1px solid #ededf1;
                z-index:10;
                margin-left:0;
            }
        }
        
    }
    .box1{
        position:relative;
        left:170px;
        width:300px;
        min-height:130px;
        border:1px solid #ededf1;
        background:#f9fafc;
        padding:10px 0;
        box-sizing:border-box;
        margin-top:20px;
        label{
            width:90px;
            display:inline-block;
            text-align:right;
        }
        span{margin-left:20px}
        .line-dom{
            position:absolute;
            left:-171px;
            top:50%;
            width:170px;
            height:38px;
            font-size:14px;
            text-align:center;
            margin-top: -16px;
            .dom-box{
                width:110px;
                height:35px;
                line-height:35px;
                border:1px solid #ededf1;
                position: absolute;
                left: 50%;
                margin-left: -55px;
                z-index:100;
                background:#f9fafc;
            }
            .line{
                position:absolute;
                top:50%;
                display:inline-block;
                width:170px;
                left:0;
                border-top:1px solid #ededf1;
                z-index:10;
                margin-left:0;
            }
        }
    }
    .box1:nth-child(1){
        margin-top: -33px;
        .line-dom{
            top:27px;
        }
    }  
    .box1:last-child{
        /* margin-bottom: -52px; */
        margin-bottom: -52px;
        .line-dom{
            top: auto;
            bottom: 32px;
        }
    } 
    li{
        margin-top:8px;
    }
    li:first-child{
        margin-top:0;
    }
}

解析:

原始设计稿


1.页面需要很多节点 每个节点都是可变得,不是需要固定定位就可以,需要给图一绝对定位,给图二相对定位,使得不论怎么变动两处皆保持同样的位置

图一:

  

图二:


2. 布局原理 :给子元素(黄色盒子代表)相对于父元素一个位移,最上面的盒子给margin-top:-32px; 与此同时给中间盒子一个(粉色边框先代表)一个margin-top:32px; 缩回来。使得位置还是占住了,粉色主体边框显示在子元素的下方,底部元素也一样给最后一个子元素一个margin-bottom:-32px;给粉色盒子一个margin-bottom:32px;中间元素增加减少都无所谓,粉色盒子随子元素多少而增高减少自适应高度,以此类推。

图三:


图四:



已分解出来,理清思路。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值