框架说明

flex布局,当

水平方向排版

欢迎访问 官方网站!

默认效果

tile默认是不换行的,所以当在tile里面填充left、right项目的时候,是会撑开tile容器。

left将自身项目居左,right将自身项目居右。可重复使用。

使用方法

tileleftrightitem。见下方代码结构。

代码结构

应用示例

比如中企动力的头部排版,这里用这样的结构实现。https://www.300.cn/,主要代码结构如下:

欢迎访问 官方网站!

百度的顶部,主要代码结构如下:

pcb分板机整体解决方案升级厂家

为高要求厂家提供智能化切割设备与技术

恒亚智能装备网站的头部(2020.01.10年截图),代码结构如下:

卓越迈创的网站头部,代码结构如下

Copyright © tengsheji.com. All Rights Reserved / 网站地图 / 沪ICP备16016981号-1 / 沪公网安备31011402007306号

腾设计的底部(2020.01.10截图)。代码结构如下:

多行多列排版

one tiles

one tile content

two tiles

two tile content

three tiles

three tile content

four tiles

four tile content

five tiles

five tile content

默认效果

所有的tile都是默认都是display:flex样式的,所以tile里面所包含的任意项目都会变作为flex项目。上方演示的效果是有内边距的,这个是因为添加了box样式,仅仅作为区别边界演示用。

使用方法

is-verticalis-1~is-12,代码结构见下方。

代码结构

about us

拥有10年SEO项目经验的专业SEO技术团队,帮助企业提升流量、增加用户、提高订单量!引流的同时,更用行业内独创的领先技术实现客户的全网品牌形象维护。

Copyright © 苏州煜达林网络科技有限公司

备案号:苏ICP备12073886号

we are everywhere

400-0512-109

2355908506@qq.com

our newsletter

表格

昵称 加入时间 签名
昵称 加入时间 签名
贤心 2016-11-29 人生就像是一场修行
许闲心 2016-11-28 于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…

使用方法

给表格添加table样式。

代码

默认效果

所有的单元格填充为5px 10px,表头和表尾的色值为#ddd,默认表格线条的色值为#eee。鼠标滑过单行变色,底色色值为#f9f9f9

可选样式

预置了边框border、条纹背景stripe两种样式。

昵称 加入时间 签名
贤心 2016-11-29 人生就像是一场修行
许闲心 2016-11-28 于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…
sentsin 2016-11-27 Life is either a daring adventure or nothing.
Pos Team Pld W D L GF GA GD Pts Qualification or relegation
1 Leicester City (C) 38 23 12 3 68 36 +32 81 Qualification for the Champions League group stage
2 Arsenal 38 20 11 7 65 36 +29 71 Qualification for the Champions League group stage
3 Tottenham Hotspur 38 19 13 6 69 35 +34 70 Qualification for the Champions League group stage
4 Manchester City 38 19 9 10 71 41 +30 66 Qualification for the Champions League play-off round
5 Manchester United 38 19 9 10 49 35 +14 66 Qualification for the Europa League group stage
6 Southampton 38 18 9 11 59 41 +18 63 Qualification for the Europa League group stage
7 West Ham United 38 16 14 8 65 51 +14 62 Qualification for the Europa League third qualifying round

调整表格

.table thead tr th,.table tfoot tr th,.table tbody tr th,.table tbody tr td调整单元格填充的间隙

.table thead tr th,.table tfoot tr th调整表头和表尾的底色

.table tbody tr:hover调整鼠标停留在单行上的底色

.table.border td,.table.border th调整边框的颜色

.table.stripe tr:nth-of-type(2n)调整条纹背景的颜色

苏州煜达林的底部排版代码结构

col是作为一个单独的列来使用的,它的宽度是自动的,如果在row里面只放了一个col的话,那它是会填满整个row的空间。

您的模块

其实left和right,也是等同于col的,因为left和right的宽度也是随着内部的内容而撑开来。如果他们内部的元素内容宽度超出的时候,容易独占一行,将后面的元素挤下去。

is*来表示left、right或者col到底占据一行的12分几。*由数字1-12来替代。例如is4表示整行的4/12,也就是1/3的宽度。

占据1/12
占据2/12,也就是1/6
占据3/12,也就是1/4
占据4/12,也就是1/3
占据5/12
占据6/12,也就是1/2
占据7/12
占据8/12,也就是2/3
占据9/12,也就是3/4
占据10/12,也就是5/6
占据11/12
占据12/12,也就是1
单列
单列

网站头部和底部

基本结构

大部分网站头部比较常见的都是左右结构的,所以我们一般都是用一个div来包裹左浮动和右浮动。我们就先创建个样式为row的div来包裹里面的元素。像下面这样。

接着是左右两边,一个是left,一个是right

如果只是需要左浮动和右浮动,这样在里面填充自己的div应该是已经足够了,你可能就能实现下面这样的效果。

可能你会奇怪为什么框架没有包含example、welcome、toplink这几个样式,这是因为这些模块个人觉得存在些不确定性,由于不确定性可能会导致这些模块的最终样式可能并不会仅仅是如下的模样。

这样的布局结构在布局简单的情况下还可以使用,当情况变的复杂的时候,比如左边是logo+nav,右边是登录注册的时候,就可以注意到每个模块是不一样的,其实应该是当成一个模块来布局,这个模块应该是最终的一个模块。那么也就是说这个left或者right里面就包含了两个以上的子模块,子模块则用item来包裹,结构像下面这样。item可以保持在水平方向上的垂直居中。

再放几个例子,供大家参考和熟悉。目前仅仅只是用rowleftrightitem来搭建框架。

在这建好的框架中,塞入自己的模块,自己的模块的样式则是需要自己另外书写的。

isvertical则用来将left、right、col内部按照垂直来排列。