2025-11-18 09:58:05

CSS重定义

概述

拼图跨屏响应式前端框架，针对常用的CSS基本重新定义，使其更符合实际应用，更适合中文的字符效果。

HTML5文档

拼图前端框架部份效果需要采用HTML5文档格式，使用拼图前端框架需要采用HTML5的文档类型：

...

移动设备优先

拼图前端框架针对移动设备做了友好开发，使项目在移动设备上有良好的表现，及优秀的用户体验。

为了确保适当的绘制和触屏缩放，需要在

之中添加viewport元数据标签。

在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari(ios7.0版本以后，safari上已看不到效果)

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式(可选default、black、black-translucent)

忽略将页面中的数字识别为电话号码

忽略Android平台中对邮箱地址的识别

预加载常用图片用来提高手机下的访问速度

容器

在拼图前端框架中，代码效果都包含在.container容器里。

...

容器空间 .container容器左右各含10px的内填充(padding)，如果需要宽度100%容器，请使用.layout样式。

容器大小在不同屏幕大小，.container，具体表现为超小屏幕：自动；小屏幕：760px；中屏幕：1000px；大屏幕：1200px；当不需要限制容器宽度时，请使用.container-layout容器。

...

建议的文档模版

在项目中，对于初学者，我们建议采用此文档格式，同时也可以根据自己的需求修改代码。

拼图前端框架HTML模版

您好，欢迎使用拼图前端框架!

自定义文件 your.css及your.js为自定义文件，your.css应放在respond.js之前，不然在IE8下无法识别响应式样式。

文本

标题文本

HTML的标题文本，从h1到h6，同时也提供了.h1到.h6的样式。

h1. 拼图前端框架标题：24px

h2. 拼图前端框架标题：20px

h3. 拼图前端框架标题：18px

h4. 拼图前端框架标题：16px

h5. 拼图前端框架标题：14px

h6. 拼图前端框架标题：12px

h1. 拼图前端框架标题

h2. 拼图前端框架标题

h3. 拼图前端框架标题

h4. 拼图前端框架标题

h5. 拼图前端框架标题

h6. 拼图前端框架标题

副标题

在标题内还可以包含small标签或.small样式，可以用来标记副标题，副文本为主文本字号的60%，当小于12px时显示为12px。

h1. 拼图前端框架标题副标题文本

h2. 拼图前端框架标题副标题文本

h3. 拼图前端框架标题副标题文本

h4. 拼图前端框架标题副标题文本

h5. 拼图前端框架标题副标题文本

h6. 拼图前端框架标题副标题文本

h1. 拼图前端框架标题副标题文本

h2. 拼图前端框架标题副标题文本

h3. 拼图前端框架标题副标题文本

h4. 拼图前端框架标题副标题文本

h5. 拼图前端框架标题副标题文本

h6. 拼图前端框架标题副标题文本

段落文本

拼图将全局的字体大小设置为14px，包含div,p,table等，段落文本包含在标签p之内，其他标签同时也可以用.p实现，同时段落文本还设置了15px的底部边距。

拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法，受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱。

拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果，丰富了页面效果，同时让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。

...

文本缩进

文本添加.text-indent样式，段落缩进2个字符。

...

强调文本

包含加粗、斜体、下划线等效果。

强调文本

也叫着重文本，用strong标签包含，font-weight样式实现，用于强调作用。

拼图框架加粗文本效果

加粗文本

斜体文本

用斜体文本强调，包含在i标签之内。

拼图框架斜体文本

...

链接文本

超级链接，包含在a标签内。

链接文本：拼图框架

文本对齐

包含左对齐，居中，右对齐等效果。

拼图框架左对齐

拼图框架居中对齐

拼图框架右对齐

拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法，受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱。拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果，丰富了页面效果，同时让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。

...

文本字号

文本字号由font-size设置，拼图框架把字号分为特大号、大号、普通、小号、特小号五个等级。

特大号文本：拼图框架 24px

大号文本：拼图框架 16px

普通文本：拼图框架 14px

小号文本：拼图框架 12px

特小号文本：拼图框架 10px

...

small小号文本

使用small标签或.text-small样式，可以设置成小号文本，大小为主文本的80%。

小号文本：拼图框架

...

文本颜色

可通过样式改变文本颜色，也可以应用于文本链接，网页配色色系，除默认的颜色外，建议根据实际应用来修改，上一章节已介绍自定义颜色修改方法。

文本颜色：默认

文本颜色：主色

文本颜色：辅色

文本颜色：背景色

文本颜色：融合色

文本颜色：点缀色

文本颜色：默认

文本颜色：主色

文本颜色：辅色

文本颜色：背景色

文本颜色：融合色

文本颜色：点缀色

黑灰白

无色色系，包含黑白灰三色，不建议改动，使用默认即可。

文本颜色：黑色

文本颜色：灰色

文本颜色：白色

文本颜色：黑色

文本颜色：灰色

文本颜色：白色

提示颜色

包含红色、黄色、蓝色、绿色四种提示文字。

提示颜色：红色

提示颜色：黄色

提示颜色：蓝色

提示颜色：绿色

提示颜色：红色

提示颜色：黄色

提示颜色：蓝色

提示颜色：绿色

柔和提示色

提示颜色：淡红

提示颜色：淡黄

提示颜色：淡蓝

提示颜色：淡绿

提示颜色：淡红

提示颜色：淡黄

提示颜色：淡蓝

提示颜色：淡绿

文本行距

文本行距分为超小行距16px(.height-little)、小行距20px(.height-small)、默认24px(.height)、大行距30px(.height-big)、超大行距40px(.height-large)。

超小行距16px(.height-little)：

拼图：国内优秀的HTML、CSS、JS跨屏响应式开源前端框架，使用最新浏览器技术，为快速的前端开发提供一系列的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包，占用资源小，使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面，让前端开发像玩游戏一样快乐而轻松。

小行距20px(.height-small)：

拼图前端框架在传统CSS框架的基本上，增加了HTML5、CSS3、JS等技术组合应用，应用最新的浏览器技术，同时兼容较早的浏览器，新旧结合，承前启后，开发者只需把框架文件引入到项目中，就可以初现快速的共同开发，改变以往建立PC网站同时，再建立手机网站的局面，实现一站响应所有设备，大大提高了开发效率。

默认24px(.height)：

移动优先、跨屏响应：拼图以移动设备为基点，优先适应于移动设备；从移动设备扩大到平板、桌面电脑等设备，实现跨屏响应，兼容桌面浏览器的同时，更适应了移动互联网的潮流。

大行距30px(.height-big)：

组件丰富、海量插件：拼图前端框架重新定义了CSS基础、常用元件及JS组件，可快速构架前端界面，实现跨屏响应。同时兼容所有jQuery插件，在项目中可以灵活使用，让前端开发如虎添翼。

超大行距40px(.height-large)：

轻量高效、国产开源：拼图基于应用广泛jQuery插件，轻量高效；相对于国外的前端框架，拼图前端框架侧重于对中文的支持，符合国人的视觉及体验，实现到国内主流浏览器的支持，减少兼容性测试时间，提高开发效率。

...

文本换行新增

设置文字换行，.text-break 默认自动换行/.text-breakall 字母在单词内换行/.text-unbreak 强制不换行.

宽度80%自动换行

英文字母内换行

Jigsaw puzzle is excellent responsive front-end CSS open source framework, domestic front frame pioneer and leader, automatically adapt to the mobile phone, tablet, computer equipment, such as let the front-end development happy game, simple, flexible and convenient.

强制不换行(注：浏览器中看到的并不是拼图BUG，可以做强制不换行演示，可能会影响到美观，望体谅。

移动优先、跨屏响应：拼图以移动设备为基点，优先适应于移动设备；从移动设备扩大到平板、桌面电脑等设备，实现跨屏响应。

...

文本截断新增

指定宽度后截断文本并用省略。

截断文字(只能截断一行文字并出现省略号，此样式多用于文章标题)

...

颜色新增

默认颜色

拼图响应式前端CSS框架自带颜色。

拼图默认颜色表

颜色

类名

描述

色值

类型

默认/黑色

#000

文本色/背景色/边框色

text-main/bg-main/border-main

主色

#0a8

文本色/背景色/边框色

text-sub/bg-sub/border-sub

辅色

#0ae

文本色/背景色/边框色

text-back/bg-back/border-back

背景色

#efe

文本色/背景色/边框色

text-mix/bg-mix/border-mix

融合色

#aed

文本色/背景色/边框色

text-dot/bg-dot/border-dot

点缀色

#e33

文本色/背景色/边框色

text-black/bg-black/border-black

黑色

#000

文本色/背景色/边框色

text-gray/bg-gray/border-gray

灰色

#999

文本色/背景色/边框色

text-white/bg-white/border-white

白色

#fff

文本色/背景色/边框色

text-red/bg-red/border-red

红色

#e33

文本色/背景色/边框色

text-yellow/bg-yellow/border-yellow

黄色

#f60

文本色/背景色/边框色

text-blue/bg-blue/border-blue

蓝色

#0ae

文本色/背景色/边框色

text-green/bg-green/border-green

绿色

#2c7

文本色/背景色/边框色

text-red-light/bg-red-light/border-red-light

淡红

#fcd

文本色/背景色/边框色

text-yellow-light/bg-yellow-light/border-yellow-light

淡黄

#fec

文本色/背景色/边框色

text-blue-light/bg-blue-light/border-blue-light

淡蓝

#def

文本色/背景色/边框色

text-green-light/bg-green-light/border-green-light

淡绿

#ded

文本色/背景色/边框色

...

自定义颜色

用户自行设定颜色，这里只提供颜色值表和自定义颜色命名规范。当然也可以使用：拼图自定义颜色生成工具快速生成样式。

十六进制颜色表

颜色

英文代码

形象描述

十六进制

RGB

LightPink

浅粉红

#FFB6C1

255,182,193

Pink

粉红

#FFC0CB

255,192,203

Crimson

猩红

#DC143C

220,20,60

LavenderBlush

脸红的淡紫色

#FFF0F5

255,240,245

PaleVioletRed

苍白的紫罗兰红色

#DB7093

219,112,147

HotPink

热情的粉红

#FF69B4

255,105,180

DeepPink

深粉色

#FF1493

255,20,147

MediumVioletRed

适中的紫罗兰红色

#C71585

199,21,133

Orchid

兰花的紫色

#DA70D6

218,112,214

Thistle

蓟

#D8BFD8

216,191,216

plum

李子

#DDA0DD

221,160,221

Violet

紫罗兰

#EE82EE

238,130,238

Magenta

洋红

#FF00FF

255,0,255

Fuchsia

灯笼海棠(紫红色)

#FF00FF

255,0,255

DarkMagenta

深洋红色

#8B008B

139,0,139

Purple

紫色

#800080

128,0,128

MediumOrchid

适中的兰花紫

#BA55D3

186,85,211

DarkVoilet

深紫罗兰色

#9400D3

148,0,211

DarkOrchid

深兰花紫

#9932CC

153,50,204

Indigo

靛青

#4B0082

75,0,130

BlueViolet

深紫罗兰的蓝色

#8A2BE2

138,43,226

MediumPurple

适中的紫色

#9370DB

147,112,219

MediumSlateBlue

适中的板岩暗蓝灰色

#7B68EE

123,104,238

SlateBlue

板岩暗蓝灰色

#6A5ACD

106,90,205

DarkSlateBlue

深岩暗蓝灰色

#483D8B

72,61,139

Lavender

熏衣草花的淡紫色

#E6E6FA

230,230,250

GhostWhite

幽灵的白色

#F8F8FF

248,248,255

Blue

纯蓝

#0000FF

0,0,255

MediumBlue

适中的蓝色

#0000CD

0,0,205

MidnightBlue

午夜的蓝色

#191970

25,25,112

DarkBlue

深蓝色

#00008B

0,0,139

Navy

海军蓝

#000080

0,0,128

RoyalBlue

皇军蓝

#4169E1

65,105,225

CornflowerBlue

矢车菊的蓝色

#6495ED

100,149,237

LightSteelBlue

淡钢蓝

#B0C4DE

176,196,222

LightSlateGray

浅石板灰

#778899

119,136,153

SlateGray

石板灰

#708090

112,128,144

DoderBlue

道奇蓝

#1E90FF

30,144,255

AliceBlue

爱丽丝蓝

#F0F8FF

240,248,255

SteelBlue

钢蓝

#4682B4

70,130,180

LightSkyBlue

淡蓝色

#87CEFA

135,206,250

SkyBlue

天蓝色

#87CEEB

135,206,235

DeepSkyBlue

深天蓝

#00BFFF

0,191,255

LightBLue

淡蓝

#ADD8E6

173,216,230

PowDerBlue

火药蓝

#B0E0E6

176,224,230

CadetBlue

军校蓝

#5F9EA0

95,158,160

Azure

蔚蓝色

#F0FFFF

240,255,255

LightCyan

淡青色

#E1FFFF

225,255,255

PaleTurquoise

苍白的绿宝石

#AFEEEE

175,238,238

Cyan

青色

#00FFFF

0,255,255

Aqua

水绿色

#00FFFF

0,255,255

DarkTurquoise

深绿宝石

#00CED1

0,206,209

DarkSlateGray

深石板灰

#2F4F4F

47,79,79

DarkCyan

深青色

#008B8B

0,139,139

Teal

水鸭色

#008080

0,128,128

MediumTurquoise

适中的绿宝石

#48D1CC

72,209,204

LightSeaGreen

浅海洋绿

#20B2AA

32,178,170

Turquoise

绿宝石

#40E0D0

64,224,208

Auqamarin

绿玉\碧绿色

#7FFFAA

127,255,170

MediumAquamarine

适中的碧绿色

#00FA9A

0,250,154

MediumSpringGreen

适中的春天的绿色

#F5FFFA

245,255,250

MintCream

薄荷奶油

#00FF7F

0,255,127

SpringGreen

春天的绿色

#3CB371

60,179,113

SeaGreen

海洋绿

#2E8B57

46,139,87

Honeydew

蜂蜜

#F0FFF0

240,255,240

LightGreen

淡绿色

#90EE90

144,238,144

PaleGreen

苍白的绿色

#98FB98

152,251,152

DarkSeaGreen

深海洋绿

#8FBC8F

143,188,143

LimeGreen

酸橙绿

#32CD32

50,205,50

Lime

酸橙色

#00FF00

0,255,0

ForestGreen

森林绿

#228B22

34,139,34

Green

纯绿

#008000

0,128,0

DarkGreen

深绿色

#006400

0,100,0

Chartreuse

查特酒绿

#7FFF00

127,255,0

LawnGreen

草坪绿

#7CFC00

124,252,0

GreenYellow

绿黄色

#ADFF2F

173,255,47

OliveDrab

橄榄土褐色

#556B2F

85,107,47

Beige

米色(浅褐色)

#6B8E23

107,142,35

LightGoldenrodYellow

浅秋麒麟黄

#FAFAD2

250,250,210

Ivory

象牙

#FFFFF0

255,255,240

LightYellow

浅黄色

#FFFFE0

255,255,224

Yellow

纯黄

#FFFF00

255,255,0

Olive

橄榄

#808000

128,128,0

DarkKhaki

深卡其布

#BDB76B

189,183,107

LemonChiffon

柠檬薄纱

#FFFACD

255,250,205

PaleGodenrod

灰秋麒麟

#EEE8AA

238,232,170

Khaki

卡其布

#F0E68C

240,230,140

Gold

金

#FFD700

255,215,0

Cornislk

玉米色

#FFF8DC

255,248,220

GoldEnrod

秋麒麟

#DAA520

218,165,32

FloralWhite

花的白色

#FFFAF0

255,250,240

OldLace

老饰带

#FDF5E6

253,245,230

Wheat

小麦色

#F5DEB3

245,222,179

Moccasin

鹿皮鞋

#FFE4B5

255,228,181

Orange

橙色

#FFA500

255,165,0

PapayaWhip

番木瓜

#FFEFD5

255,239,213

BlanchedAlmond

漂白的杏仁

#FFEBCD

255,235,205

NavajoWhite

Navajo白

#FFDEAD

255,222,173

AntiqueWhite

古代的白色

#FAEBD7

250,235,215

Tan

晒黑

#D2B48C

210,180,140

BrulyWood

结实的树

#DEB887

222,184,135

Bisque

(浓汤)乳脂,番茄等

#FFE4C4

255,228,196

DarkOrange

深橙色

#FF8C00

255,140,0

Linen

亚麻布

#FAF0E6

250,240,230

Peru

秘鲁

#CD853F

205,133,63

PeachPuff

桃色

#FFDAB9

255,218,185

SandyBrown

沙棕色

#F4A460

244,164,96

Chocolate

巧克力

#D2691E

210,105,30

SaddleBrown

马鞍棕色

#8B4513

139,69,19

SeaShell

海贝壳

#FFF5EE

255,245,238

Sienna

黄土赭色

#A0522D

160,82,45

LightSalmon

浅鲜肉(鲑鱼)色

#FFA07A

255,160,122

Coral

珊瑚

#FF7F50

255,127,80

OrangeRed

橙红色

#FF4500

255,69,0

DarkSalmon

深鲜肉(鲑鱼)色

#E9967A

233,150,122

Tomato

番茄

#FF6347

255,99,71

MistyRose

薄雾玫瑰

#FFE4E1

255,228,225

Salmon

鲜肉(鲑鱼)色

#FA8072

250,128,114

Snow

雪

#FFFAFA

255,250,250

LightCoral

淡珊瑚色

#F08080

240,128,128

RosyBrown

玫瑰棕色

#BC8F8F

188,143,143

IndianRed

印度红

#CD5C5C

205,92,92

Red

纯红

#FF0000

255,0,0

Brown

棕色

#A52A2A

165,42,42

FireBrick

耐火砖

#B22222

178,34,34

DarkRed

深红色

#8B0000

139,0,0

Maroon

栗色

#800000

128,0,0

White

纯白

#FFFFFF

255,255,255

WhiteSmoke

白烟

#F5F5F5

245,245,245

Gainsboro

#DCDCDC

220,220,220

LightGrey

浅灰色

#D3D3D3

211,211,211

Silver

银白色

#C0C0C0

192,192,192

DarkGray

深灰色

#A9A9A9

169,169,169

Gray

灰色

#808080

128,128,128

DimGray

暗淡的灰色

#696969

105,105,105

Black

纯黑

#000000

0,0,0

自定义颜色样式，请遵循如下格式

如果觉得麻烦可以使用拼图自定义颜色生成工具

.text-lightpink,

a.text-lightpink:link,

a.text-lightpink:visited,

.button.border-lightpink,

blockquote.border-lightpink,

.pager.border-lightpink a,

.pager-prev.border-lightpink,

.pager-next.border-lightpink {

color: #FFB6C1;

}

.border-lightpink,

.border-lightpink .button,

.border-lightpink .tab-nav li a,

.border-lightpink .tab-body,

.button.bg-lightpink,

.selected.border-lightpink,

.pointer.border-lightpink li,

.nav.border-lightpink .active a,

.nav.nav-tabs.border-lightpink,

.nav-main.border-lightpink a,

.nav-main.border-lightpink .nav-head,

.pagination.border-lightpink li,

.pager.border-lightpink a {

border-color: #FFB6C1;

}

.bg-lightpink,

.border-lightpink .button.active,

.pointer.border-lightpink .active,

.nav-pills.border-lightpink .active a,

.nav-lightpink.border-lightpink .nav-head,

.pagination.border-lightpink .active {

background-color: #FFB6C1;

}

配色方案

常用的一些配色方案，仅供参考。当然也可以使用：拼图配色工具

...

背景、边框、圆角

背景色

给元素添加背景色样式，突出或强调信息，实际应用中建议修改为自主定义的颜色。

默认：拼图前端框架。

主色：拼图前端框架，是一款开源的专业网页前端UI解决方案。

辅助色：是HTML、CSS、Javascrip三者结合的前端框架。

背景色：配合js效果，提供了拼图的CSS、HTML标准。

融合色：方便个性化、人性化的前端设计方法。

点缀色：受到设计师、前端工程师、程序员及网页设计初学者的喜爱。

默认

主色

辅助色

背景色

融合色

点缀色

黑灰白

黑色：拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及JS交互。

灰色：配合js效果，提供了拼图的CSS、HTML标准。

白色：让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。

黑色

灰色

白色

反色

当使用的背景色为深色时，内部文字需要用白色文本，则加上.bg-inverse，实现文字颜色的处理。

无反色处理

反色处理

无反色处理

反色处理

提示背景

提示背景包含红、黄、蓝、绿四种，分别表示危险、警告、主要、成功三种信号。

危险：拼图前端框架，是一款开源的专业网页前端UI解决方案。

警告：是HTML、CSS、Javascrip三者结合的前端框架。

主要：方便个性化、人性化的前端设计方法。

成功：配合js效果，提供了拼图的CSS、HTML标准。

危险

警告

主要

成功

柔和色

淡红-危险：拼图前端框架，是一款开源的专业网页前端UI解决方案。

淡黄-警告：是HTML、CSS、Javascrip三者结合的前端框架。

淡蓝-主要：方便个性化、人性化的前端设计方法。

淡绿-成功：配合js效果，提供了拼图的CSS、HTML标准。

淡红-危险

淡黄-警告

淡蓝-主要

淡绿-成功

边框颜色

定义边框颜色。

边框：默认

边框：主色

边框：辅色

边框：背景色

边框：融合色

边框：点缀色

边框：默认

边框：主色

边框：辅色

边框：背景色

边框：融合色

边框：点缀色

黑灰白

边框：黑色

边框：灰色

边框：白色

边框：黑色

边框：灰色

边框：白色

提示边框色

边框：红色

边框：黄色

边框：蓝色

边框：绿色

边框：红色

边框：黄色

边框：蓝色

边框：绿色

柔和色

边框：淡红

边框：淡黄

边框：淡蓝

边框：淡绿

边框：淡红

边框：淡黄

边框：淡蓝

边框：淡绿

边框大小、位置及样式

设置边框的大小粗细、上下左右的位置及不同的样式效果。

边框大小

边框大小分为默认(1px)、无边框(none)、小边框.border-little(2px)、中边框.border-middle(3px)、大边框.boder-big(5px)、超大边框.border-large(10px)。

默认边框

没有边框

小边框

中边框

大边框

超大边框

默认边框

小边框

中边框

大边框

超大边框

边框位置

边框所在的上、右、下、左及左右、上下位置。

上边框

右边框

下边框

左边框

上下边框

左右边框

上边框

右边框

下边框

左边框

上下边框

左右边框

边框样式

边框的样式，如虚线(.border-dashed)、点(.border-dotted)、双线(.border-double)、内凹(.border-inset)、外凸(.border-outset)等边框效果。

虚线边框

点边框

双线边框

内凹边框

外凸边框

虚线边框

点边框

双线边框

内凹边框

外凸边框

组合效果

大小、位置、样式三种样式可以组合使用，调配成想要的效果。

绿色上下点边框

圆角

添加圆角.radius，小圆角.radius-small，大圆角.radius-big，圆.radius-circle样式，可以使背景或边框圆角化。

直角：0px

小圆角：2px

圆角：4px

大圆角：6px

绕圆角：2em

圆：50%

直角：0px

小圆角：2px

圆角：4px

大圆角：6px

绕圆角：2em

圆：50%

在IE8及以下浏览器不支持

因IE8及以下浏览器不支持CSS3，所以圆角效果不显示，直接显示为直角。radius-none为直角，可以用来消除已有圆角效果的样式。

阴影新增

添加阴影.box-shadow，小阴影.box-shadow-small，大阴影.box-shadow-big，无阴影.box-shadow-none 可覆盖原有阴影样式。

无阴影.box-shadow-none：0px，可以覆盖已有的阴影

小阴影.box-shadow-small：2px

阴影.box-shadow：4px，默认阴影

大阴影.box-shadow-big：6px

无阴影.box-shadow-none：0px，可以覆盖已有的阴影

小阴影.box-shadow-small：2px

阴影.box-shadow：4px，默认阴影

大阴影.box-shadow-big：6px

在IE8及以下浏览器不支持

因IE8及以下浏览器不支持CSS3，所以阴影效果不显示。box-shadow-none，可以用来消除已有阴影效果的样式。

边界、填充

包含边界(.margin)和填充(.padding)，在理解他们与边框、内容的关系时，应该先了解下CSS的盒子模型。

盒子模型

每个盒子都有：边界、边框、填充、内容四个属性；每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；举个箱子例子，最里面的物品(内容)、物品由泡沫(填充)保护着、然后箱子(边框)、最后是箱子离你的距离(边界)，这就是一个完整的盒子模型。

边界：margin

边框：border

填充：padding

内容：content

边界位置

包含上、右、下、左及四个都有的位置属性，默认的.margin外边距大小为10px。

默认边界

上边界

右边界

下边界

左边界

默认边界

上边界

右边界

下边界

左边界

边界大小

边界大小包含超小边界2px(.margin-little)、小边界5px(.margin-small)、默认边界10px(.margin)、大边界20px(.margin-big)、超大边界30px(.margin-large)五个等级。

超小边界：2px

小边界：5px

默认边界：10px

大边界：20px

超大边界：30px

超小边界

小边界

默认边界

大边界

超大边界

边界的大小和位置

边界的大小和位置.margin-(大小)-(位置)，可以相互组合成所需要的边界效果。

上超小、右小、底大、左超大

边界兼容 margin-top及margin-bottom由于hasLayout渲染导致无效状态，建议使用padding或者用下面的解决办法。

解决办法

在父元素加上边框(0，none无效)：border:solid 1px #fff;

在父级元素加内填充：padding:1px;

在父级元素加浮动：overflow:hidden;

该盒子加浮动： float:left; (clear:both;)

该元素绝对定位：position:absolute;

填充位置

和边界类似，填充也包含上、右、下、左及四个都有的位置属性，默认的.padding外边距大小为10px。

默认填充

上填充

右填充

下填充

左填充

默认填充

上填充

右填充

下填充

左填充

填充大小

填充大小包含超小填充2px(.padding-little)、小填充5px(.padding-small)、默认填充10px(.padding)、大填充20px(.padding-big)、超大填充30px(.padding-large)五个等级。

超小填充：2px

小填充：5px

默认填充：10px

大填充：20px

超大填充：30px

超小填充

小填充

默认填充

大填充

超大填充

大小及位置组合

填充的位置和大小.padding-(大小)-(位置)，可以相互组合成所需要的填充效果。

上超小、右小、底大、左超大

盒子示例

使用边界、边框、填充三者的内容元素示例。

边界、边框、填充

上大边界、右中边框、下小填充

边界、边框、填充

上大边界、右中边框、下小填充

CSS动画

CSS3动画样式，包含渐变，摇晃，震动，旋转等丰富的前端效果。

淡入淡出

使元素具备淡入淡出显示效果，点击按钮即可预览动画。

淡入动画

示例

淡入.fadein

上淡入.fadein-top

右淡入.fadein-right

下淡入.fadein-bottom

左淡入.fadein-left

淡出动画

示例

淡出.fadeout

上淡出.fadeout-top

右淡出.fadeout-right

下淡出.fadeout-bottom

左淡出.fadeout-left

使用方法给元素添加样式即可，如淡入，元素使用.fadein即可。

淡入动画

淡出动画

强调动画

提示的强调CSS动画效果。

示例

弹跳.bounce

弹入.bouncein

弹出.bounceout

转入.rotatein

转出.rotateout

闪烁.flash

震颤.shake

摇摆.swing

摇晃.wobble

震铃.ring

悬浮效果

鼠标悬浮即可实现相关效果。

示例

弹跳.bounce-hover

闪烁.flash-hover

震颤.shake-hover

摇摆.swing-hover

摇晃.wobble-hover

震铃.ring-hover

旋转

持续旋转动画。

旋转：

悬浮旋转：

水平线

水平线：

空白的水平线：

颜色

可以结合背景色，改变水平线的颜色。

默认

主色

辅色

背景色

融合色

点缀色

黑色

灰色

白色

红色

黄色

蓝色

绿色

图片

定义图片样式，形状等样式。

图片样式

使用.radius-(*)样式，可以给图片快速添加效果，改变图片样式。

IE兼容 IE6,7,8不支持CSS3，不支持圆角效果，直接用直角显示。

图片外边框

使用.img-border样式，给图片添加外边框效果。

填充边距

使用padding-(*)系列样式，可以改变图片外边框的填充边距。

边框颜色

可以添加border-(*)边框，改变边框颜色。

响应式图片

为了让图片更友好显示，拼图框架设置了响应式图片，让图片宽度为100%；可按比例缩放，但不超过父元素，

响应式图片

表单

表单输入框、浏览文件、选项按钮等基本效果；多个表单元素使用及表单验证请查看"元件"下的"表单组"及"JS组件"下的"表单验证"文档。

输入框

带label的输入框

账号

多行文本框

浏览文件

+ 浏览文件

多颜色效果 a链接标签同时可以使用按钮的相关样式，如.border-main,.bg-main等。

+ 浏览文件

下拉菜单

拼图框架：

起步

CSS

元件

模块

javascript组件

单选多选

单选框

拼图框架

多选框

拼图框架

按钮样式单选或多选也可以采用按钮的形式，通过js来控制样式，详情参考"JS组件"的单选多选。

按钮式单选或多选

示例

是

否

起步

CSS

元件

状态

焦点状态

当选择或输入时的样式效果。

禁用状态

尺寸

通过input-big,input-small设置不同的大号及小号输入框。

大号选择框

默认选择框

小号选择框

颜色及圆角效果

给输入框架上.border-(*)及.bg-(*)样式，可以改变其边框及背景颜色；深色背景时需要同时加上.bg-inverse改变文本的颜色。

直角或圆角

去除圆角请添加.radius-none样式，半圆角添加.radius-rounded样式。

按钮

按钮样式

结合背景.bg-(*)和边框border-(*)的样式，添加至按钮中，可快速改变其颜色及背景。

默认

主色

辅色

背景色

融合色

点缀色

黑色

灰色

白色

背景色按钮

默认

主色

辅色

背景色

融合色

点缀色

黑色

灰色

白色

提示按钮

包含危险、警告、主要、成功等样式。

危险

警告

主要

成功

危险

警告

主要

成功

危险

警告

主要

成功

危险

警告

主要

成功

直角和圆角按钮

使用.radius-(*)圆角系列样式，可以改变按钮的圆角形状。

直角按钮

圆角按钮

按钮尺寸

通过button-large,button-big,button-small,button-little设置不同的大小。

特大尺寸按钮

大尺寸按钮

默认尺寸按钮

小尺寸按钮

特小尺寸按钮

按钮块

给按钮添加.button-block样式，按钮的宽即为100%，不超过其父元素宽。

按钮块效果

禁用效果

通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。

禁用效果

可用元素

按钮样式可以于button,input,a等元素。

button按钮效果

链接a按钮效果

带图标的按钮

喜欢

搜索

加载

列表

包含无序列表、有序列表、内联列表、描述列表等效果。

无序列表

顺序不重要的排序

拼图前端框架，是一款开源的专业网页前端UI解决方案。

是HTML、CSS、Javascrip三者结合的前端框架。

配合js效果，提供了拼图的CSS、HTML标准。

方便个性化、人性化的前端设计方法。

受到设计师、前端工程师、程序员及网页设计初学者的喜爱。

拼图前端框架，是一款开源的专业网页前端UI解决方案。

是HTML、CSS、Javascrip三者结合的前端框架。

配合js效果，提供了拼图的CSS、HTML标准。

方便个性化、人性化的前端设计方法。

受到设计师、前端工程师、程序员及网页设计初学者的喜爱。

拼图框架提供了CSS的重定义、元件样式的预设。

拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。

丰富了页面效果，同时让前端设计简单化、傻瓜化。

任何初学者都可快速建设美观、简洁的页面。

有序列表

按顺序排列的内容。

拼图前端框架，是一款开源的专业网页前端UI解决方案。

是HTML、CSS、Javascrip三者结合的前端框架。

配合js效果，提供了拼图的CSS、HTML标准。

方便个性化、人性化的前端设计方法。

受到设计师、前端工程师、程序员及网页设计初学者的喜爱。

拼图框架提供了CSS的重定义、元件样式的预设。

拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。

丰富了页面效果，同时让前端设计简单化、傻瓜化。

任何初学者都可快速建设美观、简洁的页面。

采用中文有序列表，添加样式list-cn，部份浏览器不支持，另外，加上行高样式height-(*)，可以改变列表的行距。

拼图前端框架，是一款开源的专业网页前端UI解决方案。

是HTML、CSS、Javascrip三者结合的前端框架。

配合js效果，提供了拼图的CSS、HTML标准。

方便个性化、人性化的前端设计方法。

受到设计师、前端工程师、程序员及网页设计初学者的喜爱。

拼图框架提供了CSS的重定义、元件样式的预设。

拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。

丰富了页面效果，同时让前端设计简单化、傻瓜化。

任何初学者都可快速建设美观、简洁的页面。

字母排序

拼图前端框架，是一款开源的专业网页前端UI解决方案。

是HTML、CSS、Javascrip三者结合的前端框架。

配合js效果，提供了拼图的CSS、HTML标准。

无样式列表

添加list-unstyle样式，可以去除列表样式效果。

拼图前端框架，是一款开源的专业网页前端UI解决方案。

是HTML、CSS、Javascrip三者结合的前端框架。

配合js效果，提供了拼图的CSS、HTML标准。

方便个性化、人性化的前端设计方法。

受到设计师、前端工程师、程序员及网页设计初学者的喜爱。

拼图前端框架，是一款开源的专业网页前端UI解决方案。

是HTML、CSS、Javascrip三者结合的前端框架。

配合js效果，提供了拼图的CSS、HTML标准。

方便个性化、人性化的前端设计方法。

受到设计师、前端工程师、程序员及网页设计初学者的喜爱。

拼图框架提供了CSS的重定义、元件样式的预设。

拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。

丰富了页面效果，同时让前端设计简单化、傻瓜化。

任何初学者都可快速建设美观、简洁的页面。

内联列表

通过设置display: inline-block;并添加少量的padding，将所有元素放置于同一列。

拼图框架

起步

CSS效果

元件

描述

带有描述内容的列表。

拼图框架

是一款开源的专业网页前端UI解决方案

框架应用

配合js效果，提供了拼图的CSS、HTML标准。

广受欢迎

受到设计师、前端工程师、程序员及网页设计初学者的喜爱。

...

...

水平排列的描述

添加样式 dl-inline

拼图前端框架

是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法，受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱。

学习使用

...

...

表格

表格列表

加表格添加.table样式，使表格分行。

起步

CSS

元件

模块

下载前端框架

文本

网格系统

框架

框架包含的文件

图片

图标

头部

基本页面

水平线

标签

Banner

响应式布局

按钮

徽章

导航

浏览器支持

列表

进度条

面包屑

...

条纹表格

添加table-striped样式，表格每隔行增加背景，IE8以下不支持此效果。

起步

CSS

元件

模块

下载前端框架

文本

网格系统

框架

框架包含的文件

图片

图标

头部

基本页面

水平线

标签

Banner

响应式布局

按钮

徽章

导航

浏览器支持

列表

进度条

面包屑

...
...

带边框的表格

起步

CSS

元件

模块

下载前端框架

文本

网格系统

框架

框架包含的文件

图片

图标

头部

基本页面

水平线

标签

Banner

响应式布局

按钮

徽章

导航

浏览器支持

列表

进度条

面包屑

...

鼠标悬停

鼠标悬停时显示当前行的背景色。

起步

CSS

元件

模块

下载前端框架

文本

网格系统

框架

框架包含的文件

图片

图标

头部

基本页面

水平线

标签

Banner

响应式布局

按钮

徽章

导航

浏览器支持

列表

进度条

面包屑

...

紧缩表格

添加.table-condensed样式，减少表格间距。

起步

CSS

元件

模块

下载前端框架

文本

网格系统

框架

框架包含的文件

图片

图标

头部

基本页面

水平线

标签

Banner

响应式布局

按钮

徽章

导航

浏览器支持

列表

进度条

面包屑

...

单元格背景

含当前.current，红.red，黄.yellow，蓝.blue，绿.green五种色彩。

起步

CSS

元件

模块

JS组件

下载前端框架

文本

网格系统

框架

概述

框架包含的文件

图片

图标

头部

窗口工具

基本页面

水平线

标签

Banner

选项标签

响应式布局

按钮

徽章

导航

对话框

浏览器支持

列表

进度条

面包屑

提示

框架包含的文件

图片

图标

头部

警告框

基本页面

水平线

标签

Banner

表单验证

框架包含的文件

图片

图标

头部

警告框

基本页面

水平线

标签

Banner

表单验证

...

>...

...

响应式表格-默认

将任何.table包裹在.table-responsive中即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。

起步

CSS

元件

模块

下载前端框架

文本

网格系统

框架

框架包含的文件

图片

图标

头部

基本页面

水平线

标签

Banner

响应式布局

按钮

徽章

导航

浏览器支持

列表

进度条

面包屑

...

响应式表格-移动端纵向显示新增

将任何.table包裹在.table-responsive-y 中即可创建响应式表格，其会在小屏幕设备上（小于800px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失，并且不再纵向排列。因，响应式表格-移动端纵向显示比较特殊，请严格按照示例中的方式进行编码。

起步

CSS

元件

模块

下载前端框架

文本

网格系统

框架

框架包含的文件

图片

图标

头部

基本页面

水平线

标签

Banner

响应式布局

按钮

徽章

导航

浏览器支持

列表

进度条

面包屑

起步	CSS	元件	模块
下载前端框架	文本	网格系统	框架
框架包含的文件	图片	图标	头部
基本页面	水平线	标签	Banner
响应式布局	按钮	徽章	导航
浏览器支持	列表	进度条	面包屑

起步

CSS

元件

模块

下载前端框架

文本

网格系统

框架

框架包含的文件

图片

图标

头部

基本页面

水平线

标签

Banner

响应式布局

按钮

徽章

导航

浏览器支持

列表

进度条

面包屑

引用

引用样式

...

配合代码显示

增加strong及smll标签，有不同的样式效果。

拼图框架