css-table属性运用
最近在工作中遇到了一些不常用的布局,很多使用 CSS table 属性,并结合 ::before,::after 伪元素完成了,使得 HTML 的结构相对更简单,更具有语义性。当 HTML 结构越清晰,越有规律时,便于阅读,循环套数据时也可以少很多的判断。
一、有下面这样一个设计,上面是标题,中间是流程图,下面是电话。
很明显:
1. 这个设计图中的所有内容都是居中显示的;
2. 标题部分,分为了中文和英文,下面有两条线,还有一个菱形;
3. 中间部分,流程的每一项,除了最后一项外,每一项下面都有一个箭头指向;
4. 电话部分,左右两边各有一条线,且各有一个菱形;
这个设计图的实现中,现在我们不使用图片,依靠 CSS 中 table,定位,伪元素来完成。
- 首先,根据效果图写出没有多余的标签的 HTML 结构:
注:其它 li 标签和第一个 li 标签的结构一致,只是 icon 类名和文本不同。
- 思考:
.heading 的布局
1. 宽度不能固定,得根据文本内容来适应;2. 在父容器中需要水平居中; 3. 线的宽度可以根据内容的宽度来确定; 4. 菱形可以通过正方形顺时针或者逆时针旋转 45° 获得。
.heading {
position: relative;
display: table;
margin: 0 auto 40px;
padding: 0 80px 18px;
color: #333;
&::before,
&::after {
content: "";
position: absolute;
bottom:;
width: calc(50% - 20px);
height: 1px;
background-color: #999;
}
&::before {
left:;
}
&::after {
right:;
}
strong {
display: block;
text-align: center;
}
.cn {
color: #333;
line-height: .9;
font-family: "webfont", Arial, sans-serif; // 这里使用的网络安全字体
font-weight: normal;
font-size: 20px;
margin-bottom: 10px;
}
.en {
color: #666;
font-family: "webfont", Arial, sans-serif;
font-weight: lighter;
text-transform: capitalize;
font-size: 14px;
line-height:;
&::after {
content: "";
position: absolute; // 这里的布局定位已祖先元素含有非 static 定位的元素进行绝对定位
bottom: -2px;
left: 50%;
width: 5px;
height: 5px;
background-color: #999;
transform: translateX(-50%) rotate(45deg);
}
}
}
注:
1. .heading 使用 table 显示,不同于 block 显示的元素宽度跟随父元素默认 100%。也不同于 inline-block 显示不能通过设置 margin 实现水平居中。
2. .heading 的 padding-right 和 padding-left 使用 80px,这个 。heading 的宽度就会比内容宽度多出 160px,左右两条线通过定位 left: 0 和 right: 0 不必计算。
3. 左右的两条线宽度使用 (50% - 20px) 留出了 40px 的空白,菱形需要占位。
4. strong 设置为 block 显示,它的宽度就与父元素 .heading 一样,父元素和其两个子元素中宽度较大的那个一样。
5. 在第二个 strong 的伪元素 ::after 中设置了绝对定位,它会相对于祖先元素中(从父元素一层一层往上找)非 static 定位的元素进行定位,这里是相对于 .heading 进行定位。并且设置 left: 50%, transform:translateX(-50%) rotate(46deg) 让其在水平位置上居中,并且旋转 45°。
2. .body 的布局
1. 流程图每一项宽度不能固定,得根据文本内容来适应;2. 在父容器中需要水平居中; 3. 箭头可以根据一条竖线加上一个箭头来合成。
li {
position: relative;
display: table;
margin-right: auto;
margin-left: auto;
height: 40px;
line-height: 38px;
padding-right: 35px;
padding-left: 35px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 20px;
font-size: 14px;
color: #333;
&:not(:last-of-type) {
margin-bottom: 32px;
&::before { // 箭头的竖线
content: "";
position: absolute;
bottom: -26px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 20px;
background-color: #999;
}
&::after { // 箭头
content: "";
position: absolute;
bottom: -26px;
left: 50%;
transform: rotate(-45deg);
transform-origin: left bottom;
width: 7px;
height: 7px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
}
}
i {
font-size: 1.3em;
color: #a57e60;
margin-right: 10px;
}
}
3. .join-us 的布局同 .heading 相似。
拓展:
table 属性的用法远不止这些
我们最常用到水平垂直布局也可以通过设置元素为单元格样式来实现:
<div class="parent">
<div class="child">我在父元素中水平垂直居中</div>
</div>
.parent {
width: 400px;
height: 200px;
border: 1px solid #f00;
display: table-cell;
text-align: center;
vertical-align: middle;
}
css-table属性运用的更多相关文章
- CSS display:table属性用法- 轻松实现了三栏等高布局
display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
- css table 布局
使用CSS表格 CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题.例如,“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一 ...
- div+css的属性
div+css的属性 gCascading Style Sheet 层叠式样式表 ==> 层叠样式表 Internal Style Sheet 内部样式表 External Style Shee ...
- CSS expression属性
expression属性是在IE5版本之后支持使用的,用来把CSS属性和JavaScript脚本关联起来.简单粗暴的说,该属性是用来调用JavaScript代码的. CSS属性后面是一段JavaScr ...
- CSS Table(表格)
CSS Table(表格) 一.表格边框 border 指定CSS表格边框,使用border属性. 下面的例子指定了一个表格的Th和TD元素的黑色边框: table, th, td { border: ...
- css display属性详解
css display属性在对css做layout设计时非常重要,它的值有以下几种: Value Description Play it inline Default value. Displays ...
- css Table布局:基于display:table的CSS布局
两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
- css table布局
表格布局有两种方式: 1.HTML Table(<table>标签)和 2. CSS Table(display:table 等相关属性). HTML Table是指使用原生的<ta ...
- CSS-W3School:CSS table-layout 属性
ylbtech-CSS-W3School:CSS table-layout 属性 1.返回顶部 1. CSS table-layout 属性 CSS 参考手册 实例 设置表格布局算法: table { ...
- CSS will-change 属性
介绍 如果你注意到在webkit的浏览器上“flicker”一些CSS操作(尤其是变形和动画方面的)的表现,你很可能之前就注意过硬件加速了 CPU.GPU和硬件加速 硬件加速意味着Graphics P ...
随机推荐
- Oracle存储过程中调用DBLink同义词出现错误:PLS-00201: 必须声明标识符
前几天编写一个存储过程,需要访问远程数据库的字段,于是建立一个dbLink并建了同义词: CREATE PUBLIC DATABASE LINK orcl@dbc CONNECT TO orcl ID ...
- Microsoft .NET Pet Shop 4: Migrating an ASP.NET 1.1 Application to 2.0
249 out of 297 rated this helpful - Rate this topic Gregory Leake Microsoft Corporation Alan Le, Ale ...
- 在Eclipse中指定JDK
1.Windows下的Eclipse中的eclipse.ini -startup plugins/org.eclipse.equinox.launcher_1.3.100.v20150511-1540 ...
- linux 网络命令last、lastlog、traceroute、netstat
last /usr/bin/last语法:last功能:列出目前与过去登入系统的用户信息 reboot 是重启信息 lastlog lastlog -u 502(用户ID) traceroute /b ...
- spring <context:annotation-config/> 注解作用
<context:component-scan>包含<context:annotation-config/>的作用 <context:annotation-config/ ...
- 为何说 JavaScript 开发很疯狂
[编者按]本文作者为 Sean Fioritto,主要阐述了 JavaScript 开发为何让人有些无从下手的根本原因.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 网络开发乐趣多多!Ja ...
- angular-动画。
ngAnimate插件是做什么的? ngAnimate插件如其名字一样是为元素提供动画的. 怎么定义动画? 第一步必须是引入插件 <script src="//cdn.bootcss. ...
- git repo代码部署策略及工具
一般在项目或者产品开发流程中,先是开发人员在本地做好开发及测试,其中可能包含很多用于测试用的目录以及源代码文件,在部署前往往会有一个build过程.web项目最终build产生出优化生产环境下减少ht ...
- Oracle EBS AR 收款核销行关联到事务处理
select ra.trx_number from ar_cash_receipts_all cr, ar_receivable_applications_all ar,ra_customer_trx ...
- Oracle EBS 获取说明性弹性域全局数据元
SELECT b.flex_value_set_id, t.application_column_name, t.form_left_prompt FROM fnd_descriptive_flexs ...