當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/3/24 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了一个特殊静态页面的处理---静态页面实现流程图小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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;中間元素增加減少都無所謂，粉色盒子隨子元素多少而增高減少自適應高度，以此類推。

圖三：

圖四：

已分解出來，理清思路。

總結

以上是生活随笔為你收集整理的一个特殊静态页面的处理---静态页面实现流程图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。