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

本文链接：https://blog.youkuaiyun.com/zhaoshuang1010/article/details/70577091

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

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

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

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

解决代码：

1.HTML

<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>

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;中间元素增加减少都无所谓，粉色盒子随子元素多少而增高减少自适应高度，以此类推。

图三：