一个特殊静态页面的处理---静态页面实现流程图
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;中间元素增加减少都无所谓,粉色盒子随子元素多少而增高减少自适应高度,以此类推。
图三:
图四:
已分解出来,理清思路。
一个特殊静态页面的处理---静态页面实现流程图相关推荐
- 静态Web服务器-返回固定页面数据
1. 开发自己的静态Web服务器 实现步骤: 编写一个TCP服务端程序 获取浏览器发送的http请求报文数据 读取固定页面数据,把页面数据组装成HTTP响应报文数据发送给浏览器. HTTP响应报文数据 ...
- nginx 配置静态文件目录_nginx缓存静态资源,只需几个配置提升10倍页面加载速度...
nginx缓存静态资源,只需几个配置提升10倍页面加载速度 首先我们看图说话 这是在没有缓存的情况下,这个页面发送了很多静态资源的请求: 可以看到,静态资源占用了整个页面加载用时的90%以上,而且这个 ...
- php读取模板生成静态功能,php 生成静态页面的办法与实现代码详细版
php中主要用到的就是要用到fread()和fwirte().而静态页面生成了之后,就会牵扯到修改的问题.这里可以用到正则匹配的方法来替换模版中改变的部位.不过此种方法太麻烦,值得推荐的方法是直接把原 ...
- ThinkPHP6项目基操(11.实战部分 部署后台静态页面模板及后台登录页面)
实战部分 部署后台静态页面模板及后台登录页面 前言 一.部署静态资源到项目 1.新建后台静态资源文件夹 二.后台登录页面 1. 目录结构 2. 模板字符串替换配置 前言 网站后台一般是在基础静态页面上 ...
- spring mvc使用html页面,Spring MVC静态页面
以下示例显示如何使用Spring MVC Framework编写一个简单的基于Web的应用程序,它可以使用标记访问静态页面和动态页面.首先使用Eclipse IDE创建一个动态WEB项目,并按照以下步 ...
- 什么是静态的html页面,什么是静态页面?什么是动态页面?二者有什么区别
一.什么是静态页面 1.在静态html页面中,用户通过Web浏览器HTTP协议向web服务器发送一个响应请求,告诉web服务器要浏览这个网站的哪个页面,接着根据用户的响应请求返回一个html页面给用户 ...
- 静态页面和动态页面中的静态和动态到底指的是什么
今天讨论一个话题,这是在考研的专业课考试中的一个问题:静态页面和动态页面的联系和区别 ,这考的我就很猝不及防 ,这个方面虽然以前有了解 ,但是理解得并不深刻,网安方向涉及到的东西太多了,慢慢学习吧~首 ...
- 织梦 tags.php静态化,教你dedecms织梦tag标签页面怎么实现静态化
大家好,我最近一直在研究织梦的tag页面静态化问题,从网络上看了不少的教程,有的是教你伪静态怎么设置的,有的是利用插件实现真静态的,简单的给大伙分析一下用哪个好. ①伪静态:节约硬盘空间,隐藏文件真实 ...
- jsp网页制作html页面,JSP制作静态网页.ppt
JSP制作静态网页 JSP制作静态网页 主要内容 1 制作网站的原型 2 制作注册页面 2.1 HTML的常用标签 2.2 CSS简介 2.3 使用HTML+CSS制作注册页面 2.4 JavaScr ...
- 页面静态化优缺点_静态网站生成器的优缺点
页面静态化优缺点 很久以前,人们在遥远的互联网上手工建造自己的网站,将每个HTML标签都放在工匠的精心照顾下. 他们花了一整天的时间思考诸如"我应该使用<b>还是完全使用< ...
最新文章
- Nginx配置反向代理,一篇搞定!
- C#量转换为汉字表达
- 算法:串联所有单词的子串
- 收藏几个有意思的SQL脚本
- DeepMind论文解读:让机器更深入地理解文本
- python加go_[Python异步博客开发] 加入Golang, go~!
- 在Spring中配置多个View解析器
- 听说,高手都用记事本写C语言代码?
- 电脑缺失MSVCP110.dll文件
- 《Python Cookbook 3rd》笔记(5.12):测试文件是否存在
- Mybatis 常见知识点问题
- FBX格式和obj格式的区别
- linux shell 切换目录,如何在Shell中快速切换目录?
- python画兔子代码_Python基础练习实例11(兔子问题)
- 英语拼写鉴别器_CodingPark编程公园
- Sketch for mac(专业矢量绘图设计软件)
- codeforces EDU suffix array
- Android应用中捕捉所有点击事件实现
- 温故知新(九一)什么是抽象语法树,有哪些用途
- 集合运算的C语言算法
热门文章
- android调试stetho的那点事
- 托盘程序与jgp文件加载
- 关于软件可测试性的资料
- android midi 分析,MIDI 架构 | Android 开源项目 | Android Open Source Project
- html square的作用,html里面的type标签square,怎么用?干吗的?
- 解决mysql子查询里面无法使用LIMIT This version of MySQL doesn't yet support 'LIMIT IN/ALL/ANY/SOME subquery'
- 最简操作系统内核HelloOS
- 很好用的FreeCAD
- Modbus通讯笔记
- 75页政务大数据资源平台建设解决方案(附下载).pptx