关于项目中下单流程HTML设计的一些思考
需求
上面文字和圈圈是对齐的。
想法
一开始是想把文字和圈圈分开来的,也就是两个盒子放置。但操作中发现,想把它们对齐非常的难,总有一些是无法对齐的。
最终换了一种实现方式,按照需求,不就是想把它们关联起来嘛,既然如此不把它们分开就好了,那个圈圈就用伪元素来实现,最终代码如下:
<div class="route">
<em>下单</em>
<em class="active">付款</em>
<em>配货</em>
<em>出库</em>
<em>完成</em>
</div>
<style>
.route{
position:relative;
display:flex;
justify-content:space-between;
margin-top:10px;
padding:10px;
background-color:#fff;
}
.route::after{
content:"";
position:absolute;
left:0;
top:58px;
width:calc(100% - 3.6rem);
height:1px;
margin:0 1.8rem;
background-color:#e1e1e1;
}
.route em{
position:relative;
margin:10px 0 40px;
color:#999;
font-size:1.3rem;
font-style:normal;
}
.route em::after{
content:"";
position:absolute;
bottom:-24px;
left:50%;
width:1rem;
height:1rem;
border-radius:100%;
background-color:#e1e1e1;
transform:translateX(-50%);
}
.route .active::after{
width: 1.2rem;
height: 1.2rem;
background-color: #1bc865;
z-index: 999;
top: 32px;
box-shadow: 0 0 0px 5px #adebc7,0 0 0px 10px #dcf7e7;
}
</style>
这种实现方式,就简单的多了,如果不把它们关联起来,在不同手机里面,对齐是很难实现的。
感想
有些东西之所以难实现,就是没有想清楚它们之间的关系,如果能早点想清楚,一切就简单的多。
关于项目中下单流程HTML设计的一些思考的更多相关文章
- OA项目中的论坛模块设计与实现
1.论坛是什么?论坛与贴吧有什么区别? 简单的说论坛和贴吧都是发表言论和讨论的一个平台. 贴吧是论坛的一个部分. 2.关于论坛模块的需求分析? 首先我们看看论坛的几个设计页面: 这个主要是论坛的版块设 ...
- 在 ASP.NET Core 项目中使用 AutoMapper 进行实体映射
一.前言 在实际项目开发过程中,我们使用到的各种 ORM 组件都可以很便捷的将我们获取到的数据绑定到对应的 List<T> 集合中,因为我们最终想要在页面上展示的数据与数据库实体类之间可能 ...
- 在vue项目中封装echarts的正确姿势
为什么需要封装echarts 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作 可能有一些开发者忘记 ...
- 以项目谈WebGIS中Web制图的设计和实现
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景介绍 一般WebGIS项目中,前端展示数据的流程基本是先做数据入 ...
- AppScan在项目中的使用流程
AppScan在项目中的使用流程 http://www.docin.com/p-829022229.html
- 简单ORM工具的设计和编写,自己项目中曾经用过的
http://www.cnblogs.com/szp1118/archive/2011/03/30/ORM.html 在之前的一个项目中自己编写了一个简单的ORM小工具,这次重新整理和重构了一下代码, ...
- 关于项目中的DAL数据接入层架构设计
摘要:项目中对关系型数据库的接入再寻常不过,也有海量的ORM工具可供选择,一个一般性的DAL数据接入层的结构却大同小异,这里就分享一下使用Hibernate.Spring.Hessian这三大工具对D ...
- 在 React 项目中引入 GG-Editor 编辑可视化流程
蚂蚁金服数据可视化团队曾经开源了一款G6-Editor,但后来停止了对外支持,学习成本太高 好在后来他们团队的大牛高力结合 React + G6 开源了一个 GG-Editor(其实就是G6-Edit ...
- Activiti中工作流的生命周期详细解析!一个BPMN流程示例带你认识项目中流程的生命周期
BPMN 2.0介绍 业务流程模型注解(BusinessProcess Modeling Notation - BPMN)是业务流程模型的一种标准图形注解.这个标准是由对象管理组(Object Man ...
随机推荐
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- python核心编程第二版练习题答案
2-5 #写一个while循环,输出整型为0~10 a=0while a<11: print a a+=1 #写一个for循环重复以上操作 for i in range(11): print i ...
- AES加密
package com.edu.hpu; import java.math.BigInteger; import java.security.MessageDigest; import java.se ...
- jquery.Callbacks的实现
前言 本人是一个热爱前端的菜鸟,一直喜欢学习js原生,对于jq这种js库,比较喜欢理解他的实现,虽然自己能力有限,水平很低,但是勉勉强强也算是能够懂一点吧,对于jq源码解读系列,博客园里有很多,推荐大 ...
- 开发者接入 基本配置 服务器配置 out.aspx
页面代码: 前段为默认的,什么都不用写,后台如下: 即可 来自为知笔记(Wiz)
- 用WebRequest +HtmlAgilityPack 从外网抓取数据到本地
相信大家对于WebRequest 并不陌生,我们在C#中发请求的方式,就是创建一个WebRequest .那么如果我们想发一个请求到外网,比如国内上不了的一些网站,那么该怎么做呢? 其实WebRequ ...
- PHP设计模式(六)原型模式(Prototype For PHP)
原型设计模式: 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 原型设计模式简单的来说,顾名思义, 不去创建新的对象进而保留原型的一种设计模式. 缺点:原型设计模式是的最主要的缺点就 ...
- 15个C++项目列表
实验楼上有很多C++的实战项目,从简单到进阶,学习每个项目都可以掌握相应的知识点. 如果你还是C++新手的话,那么这个C++的项目列表你可以拿去练手实战开发,毕竟学编程动手实践是少不了的! 如果你不知 ...
- NoSql1 在Linux(CentOS)上安装memcached及使用
前言: 今天是初五,生活基本要从过年的节奏中回归到正常的生活了,所以想想也该想想与工作有关的事情了.我之前在工作中会经常使用memcached和redis,但是自己一直没有时间系统的好好看 ...
- mysql集群(双主)
0.安装 所谓双主基本可以理解为两台服务器互为主备,其核心思路与主备配置相同. 服务器A: 内网IP: 10.44.94.219 服务器B: 内网IP: 10.44.94.97 1.配置服务器A lo ...