CSS重定义

重新定义常用的CSS,对文本、图像、按钮、背景、表格等样式重新设置。

概述

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

HTML5文档

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

<!DOCTYPE html> <html lang="zh-cn"> ... </html>

移动设备优先

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

为了确保适当的绘制和触屏缩放,需要在 之中添加viewport元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在移动设备浏览器上,通过为viewport meta标签添加user-scalable=no可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定!
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari(ios7.0版本以后,safari上已看不到效果)
<meta content="yes" name="apple-mobile-web-app-capable">
将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式(可选default、black、black-translucent)
<meta content="black" name="apple-mobile-web-app-status-bar-style">
忽略将页面中的数字识别为电话号码
<meta content="telephone=no" name="format-detection">
忽略Android平台中对邮箱地址的识别
<meta content="email=no" name="format-detection">
预加载常用图片用来提高手机下的访问速度
<link rel="prefetch" href="预加载的图片" />

容器

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

<!DOCTYPE html> <html lang="zh-cn"> <head> ... </head> <body> <div class="container"> ... </div> </body> </html>
容器空间 .container容器左右各含10px的内填充(padding),如果需要宽度100%容器,请使用.layout样式。
容器大小 在不同屏幕大小,.container,具体表现为超小屏幕:自动;小屏幕:760px;中屏幕:1000px;大屏幕:1200px;当不需要限制容器宽度时,请使用.container-layout容器。
<div class="layout"> ... </div> <div class="container-layout"> ... </div>

建议的文档模版

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

<!DOCTYPE html> <html lang="zh-cn"> <head> <title>拼图前端框架HTML模版</title> <meta name="keywords" content="关键词" /> <meta name="description" content="描述" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="pintuer.css"> <link rel="stylesheet" href="your.css"> <script src="jquery.js"></script> <script src="pintuer.js"></script> <script src="respond.js"></script> <script src="your.js"></script> </head> <body> <div class="container"> <h1> 您好,欢迎使用拼图前端框架! </h1> </div> </body> </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> h1. 拼图前端框架标题 </h1> <h2> h2. 拼图前端框架标题 </h2> <h3> h3. 拼图前端框架标题 </h3> <h4> h4. 拼图前端框架标题 </h4> <h5> h5. 拼图前端框架标题 </h5> <h6> h6. 拼图前端框架标题 </h6>

副标题

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

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


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


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


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


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

h6. 拼图前端框架标题 副标题文本
<h1> h1. 拼图前端框架标题<small>副标题文本</small> </h1> <h2> h2. 拼图前端框架标题<small>副标题文本</small> </h2> <h3> h3. 拼图前端框架标题<small>副标题文本</small> </h3> <h4> h4. 拼图前端框架标题<small>副标题文本</small> </h4> <h5> h5. 拼图前端框架标题<small>副标题文本</small> </h5> <h6> h6. 拼图前端框架标题<small>副标题文本</small> </h6>

段落文本

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

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

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

<p> ... </p>

文本缩进

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

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

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

<p class="text-indent"> ... </p>

强调文本

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

强调文本

也叫着重文本,用strong标签包含,font-weight样式实现,用于强调作用。
拼图框架加粗文本效果
<strong>加粗文本</strong>

斜体文本

用斜体文本强调,包含在i标签之内。
拼图框架斜体文本
<i>...</i>

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

<a href="#">链接文本:拼图框架</a>

文本对齐

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

拼图框架左对齐

拼图框架居中对齐

拼图框架右对齐

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

<p class="text-left"> ... </p> <p class="text-center"> ... </p> <p class="text-right"> ... </p> <p class="text-justify"> ... </p>

文本字号

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

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

大号文本:拼图框架 16px

普通文本:拼图框架 14px

小号文本:拼图框架 12px

特小号文本:拼图框架 10px
<div class="text-large"> ... </div> <div class="text-big"> ... </div> <div class="text-default"> ... </div> <div class="text-small"> ... </div> <div class="text-little"> ... </div>

small小号文本

使用small标签或.text-small样式,可以设置成小号文本,大小为主文本的80%。
小号文本:拼图框架
<small>...</small>

文本颜色

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

文本颜色:默认

文本颜色:主色

文本颜色:辅色

文本颜色:背景色

文本颜色:融合色

文本颜色:点缀色

<p> 文本颜色:默认 </p> <p class="text-main"> 文本颜色:主色 </p> <p class="text-sub"> 文本颜色:辅色 </p> <p class="text-back"> 文本颜色:背景色 </p> <p class="text-mix"> 文本颜色:融合色 </p> <p class="text-dot"> 文本颜色:点缀色 </p>

黑灰白

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

文本颜色:黑色

文本颜色:灰色

文本颜色:白色

<p class="text-black"> 文本颜色:黑色 </p> <p class="text-gray"> 文本颜色:灰色 </p> <p class="text-white"> 文本颜色:白色 </p>

提示颜色

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

提示颜色:红色

提示颜色:黄色

提示颜色:蓝色

提示颜色:绿色

<p class="text-red"> 提示颜色:红色 </p> <p class="text-yellow"> 提示颜色:黄色 </p> <p class="text-blue"> 提示颜色:蓝色 </p> <p class="text-green"> 提示颜色:绿色 </p>

柔和提示色

提示颜色:淡红

提示颜色:淡黄

提示颜色:淡蓝

提示颜色:淡绿

<p class="text-red-light"> 提示颜色:淡红 </p> <p class="text-yellow-light"> 提示颜色:淡黄 </p> <p class="text-blue-light"> 提示颜色:淡蓝 </p> <p class="text-green-light"> 提示颜色:淡绿 </p>

文本行距

文本行距分为超小行距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插件,轻量高效;相对于国外的前端框架,拼图前端框架侧重于对中文的支持,符合国人的视觉及体验,实现到国内主流浏览器的支持,减少兼容性测试时间,提高开发效率。

<p class="height-little"> ... </p> <p class="height-small"> ... </p> <p class="height"> ... </p> <p class="height-big"> ... </p> <p class="height-large"> ... </p>


文本换行新增

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

宽度80%自动换行

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

英文字母内换行

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,可以做强制不换行演示,可能会影响到美观,望体谅。

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

<p class="text-break"> ... </p> <p class="text-breakall"> ... </p> <p class="text-unbreak"> ... </p>


文本截断新增

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

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

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

<p class="text-more"> ... </p>


颜色 新增

默认颜色

拼图响应式前端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 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标准。

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

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

<p class="bg"> 默认</p> <p class="bg-main"> 主色</p> <p class="bg-sub"> 辅助色</p> <p class="bg-back"> 背景色</p> <p class="bg-mix"> 融合色</p> <p class="bg-dot"> 点缀色</p>

黑灰白

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

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

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

<p class="bg-black"> 黑色</p> <p class="bg-gray"> 灰色</p> <p class="bg-white"> 白色</p>

反色

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

无反色处理

反色处理

<p class="bg-main"> 无反色处理</p> <p class="bg-main bg-inverse"> 反色处理</p>

提示背景

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

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

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

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

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

<p class="bg-red"> 危险</p> <p class="bg-yellow"> 警告</p> <p class="bg-blue"> 主要</p> <p class="bg-green"> 成功</p>

柔和色

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

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

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

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

<p class="bg-red-light"> 淡红-危险</p> <p class="bg-yellow-light"> 淡黄-警告</p> <p class="bg-blue-light"> 淡蓝-主要</p> <p class="bg-green-light"> 淡绿-成功</p>

边框颜色

定义边框颜色。

边框:默认
边框:主色
边框:辅色
边框:背景色
边框:融合色
边框:点缀色
<div class="border"> 边框:默认</div> <div class="border border-main"> 边框:主色</div> <div class="border border-sub"> 边框:辅色</div> <div class="border border-back"> 边框:背景色</div> <div class="border border-mix"> 边框:融合色</div> <div class="border border-dot"> 边框:点缀色</div>

黑灰白

边框:黑色
边框:灰色
边框:白色
<div class="border border-black"> 边框:黑色</div> <div class="border border-gray"> 边框:灰色</div> <div class="border border-white"> 边框:白色</div>

提示边框色

边框:红色
边框:黄色
边框:蓝色
边框:绿色
<div class="border border-red"> 边框:红色</div> <div class="border border-yellow"> 边框:黄色</div> <div class="border border-blue"> 边框:蓝色</div> <div class="border border-green"> 边框:绿色</div>

柔和色

边框:淡红
边框:淡黄
边框:淡蓝
边框:淡绿
<div class="border border-red-light"> 边框:淡红</div> <div class="border border-yellow-light"> 边框:淡黄</div> <div class="border border-blue-light"> 边框:淡蓝</div> <div class="border border-green-light"> 边框:淡绿</div>

边框大小、位置及样式

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

边框大小

边框大小分为默认(1px)、无边框(none)、小边框.border-little(2px)、中边框.border-middle(3px)、大边框.boder-big(5px)、超大边框.border-large(10px)。
默认边框
没有边框
小边框
中边框
大边框
超大边框
<div class="border"> 默认边框</div> <div class="border border-small"> 小边框</div> <div class="border border-middle"> 中边框</div> <div class="border border-big"> 大边框</div> <div class="border border-large"> 超大边框</div>

边框位置

边框所在的上、右、下、左及左右、上下位置。
上边框
右边框
下边框
左边框
上下边框
左右边框
<div class="border-small border-top"> 上边框</div> <div class="border-small border-right"> 右边框</div> <div class="border-small border-bottom"> 下边框</div> <div class="border-small border-left"> 左边框</div> <div class="border-small border-top-bottom"> 上下边框</div> <div class="border-small border-left-right"> 左右边框</div>

边框样式

边框的样式,如虚线(.border-dashed)、点(.border-dotted)、双线(.border-double)、内凹(.border-inset)、外凸(.border-outset)等边框效果。
虚线边框
点边框
双线边框
内凹边框
外凸边框
<div class="border border-small border-dashed"> 虚线边框</div> <div class="border border-small border-dotted"> 点边框</div> <div class="border border-small border-double"> 双线边框</div> <div class="border border-small border-inset"> 内凹边框</div> <div class="border border-small border-outset"> 外凸边框</div>

组合效果

大小、位置、样式三种样式可以组合使用,调配成想要的效果。
绿色上下点边框
<div class="border-green border-top-bottom border-dotted"> 绿色上下点边框</div>

圆角

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

直角:0px
小圆角:2px
圆角:4px
大圆角:6px
绕圆角:2em
圆:50%
<div class="radius-none"> 直角:0px</div> <div class="radius-small"> 小圆角:2px</div> <div class="radius"> 圆角:4px</div> <div class="radius-big"> 大圆角:6px</div> <div class="radius-rounded"> 绕圆角:2em</div> <div class="radius-circle"> 圆:50%</div>
在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
<div class="alert box-shadow-none"> 无阴影.box-shadow-none:0px,可以覆盖已有的阴影</div> <br> <div class="alert box-shadow-small"> 小阴影.box-shadow-small:2px</div> <br> <div class="alert box-shadow"> 阴影.box-shadow:4px,默认阴影</div> <br> <div class="alert box-shadow-big"> 大阴影.box-shadow-big:6px</div>
在IE8及以下浏览器不支持

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



边界、填充

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

盒子模型

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

边界:margin
边框:border
填充:padding
内容:content

边界位置

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

默认边界

上边界

右边界

下边界

左边界
<div class="margin"> 默认边界</div> <div class="margin-top"> 上边界</div> <div class="margin-right"> 右边界</div> <div class="margin-bottom"> 下边界</div> <div class="margin-left"> 左边界</div>

边界大小

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

超小边界:2px

小边界:5px

默认边界:10px

大边界:20px

超大边界:30px
<div class="margin-little"> 超小边界</div> <div class="margin-small"> 小边界</div> <div class="margin"> 默认边界</div> <div class="margin-big"> 大边界</div> <div class="margin-large"> 超大边界</div>

边界的大小和位置

边界的大小和位置.margin-(大小)-(位置),可以相互组合成所需要的边界效果。
上超小、右小、底大、左超大
<div class="margin-little-top margin-small-right margin-big-bottom margin-large-left"> 上超小、右小、底大、左超大</div>
边界兼容 margin-top及margin-bottom由于hasLayout渲染导致无效状态,建议使用padding或者用下面的解决办法。

解决办法

  • 在父元素加上边框(0,none无效):border:solid 1px #fff;
  • 在父级元素加内填充:padding:1px;
  • 在父级元素加浮动:overflow:hidden;
  • 该盒子加浮动: float:left; (clear:both;)
  • 该元素绝对定位:position:absolute;

填充位置

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

默认填充

上填充

右填充

下填充

左填充
<div class="padding"> 默认填充</div> <div class="padding-top"> 上填充</div> <div class="padding-right"> 右填充</div> <div class="padding-bottom"> 下填充</div> <div class="padding-left"> 左填充</div>

填充大小

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

超小填充:2px

小填充:5px

默认填充:10px

大填充:20px

超大填充:30px
<div class="padding-little"> 超小填充</div> <div class="padding-small"> 小填充</div> <div class="padding"> 默认填充</div> <div class="padding-big"> 大填充</div> <div class="padding-large"> 超大填充</div>

大小及位置组合

填充的位置和大小.padding-(大小)-(位置),可以相互组合成所需要的填充效果。
上超小、右小、底大、左超大
<div class="padding-little-top padding-small-right padding-big-bottom padding-large-left"> 上超小、右小、底大、左超大</div>

盒子示例

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

边界、边框、填充

上大边界、右中边框、下小填充
<div class="margin padding border"> 边界、边框、填充</div> <div class="margin-big-top padding-small-bottom border-middle border-right"> 上大边界、右中边框、下小填充</div>


CSS动画

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

淡入淡出

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

淡入动画

示例


淡出动画

示例


使用方法 给元素添加样式即可,如淡入,元素使用.fadein即可。
<div class="fadein"> 淡入动画</div> <span class="fadeout">淡出动画</span>

强调动画

提示的强调CSS动画效果。

示例


悬浮效果

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


旋转

持续旋转动画。

旋转:

悬浮旋转:
<span class="icon-asterisk rotate"></span> <span class="icon-refresh rotate"></span> <span class="icon-cog rotate-hover"></span> <span class="icon-spinner rotate-hover"></span>


水平线

水平线

水平线:
空白的水平线:
<hr /> <hr class="space" />

颜色

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

默认
主色
辅色
背景色
融合色
点缀色
黑色
灰色
白色
红色
黄色
蓝色
绿色
<hr /> <hr class="bg-main" /> <hr class="bg-sub" /> <hr class="bg-back" /> <hr class="bg-mix" /> <hr class="bg-dot" /> <hr class="bg-black" /> <hr class="bg-gray" /> <hr class="bg-white" /> <hr class="bg-red" /> <hr class="bg-yellow" /> <hr class="bg-blue" /> <hr class="bg-green" />


图片

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

图片样式

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

<img src="/images/128.png" width="128" height="128" class="radius-small" /> <img src="/images/128.png" width="128" height="128" class="radius" /> <img src="/images/128.png" width="128" height="128" class="radius-big" /> <img src="/images/128.png" width="128" height="128" class="radius-circle" />
IE兼容 IE6,7,8不支持CSS3,不支持圆角效果,直接用直角显示。

图片外边框

使用.img-border样式,给图片添加外边框效果。
<img src="..." width="128" height="128" class="img-border radius-small" /> <img src="..." width="128" height="128" class="img-border radius" /> <img src="..." width="128" height="128" class="img-border radius-big" /> <img src="..." width="128" height="128" class="img-border radius-circle" />

填充边距

使用padding-(*)系列样式,可以改变图片外边框的填充边距。
<img src="..." width="128" height="128" class="img-border radius-small padding-little" /> <img src="..." width="128" height="128" class="img-border radius padding-small" /> <img src="..." width="128" height="128" class="img-border radius-big padding" /> <img src="..." width="128" height="128" class="img-border radius-circle padding-big" />

边框颜色

可以添加border-(*)边框,改变边框颜色。
<img src="..." class="img-border border-red radius-small" /> <img src="..." class="img-border border-yellow radius" /> <img src="..." class="img-border border-blue radius-big" /> <img src="..." class="img-border border-green radius-circle" />

响应式图片

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

<img src="..." class="img-responsive" alt="响应式图片" />


表单

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

输入框

输入框

<form> <input type="text" class="input" placeholder="文本框" /> </form>

带label的输入框

<form> <label class="label"> 账号</label> <input type="text" class="input" placeholder="用户名/邮箱/手机" /> </form>

多行文本框

<form> <label class="label"> 多行文本框</label> <textarea rows="5" class="input" placeholder="多行文本框"></textarea> </form>

浏览文件

浏览文件

<form> <a class="button input-file" href="javascript:void(0);">+ 浏览文件<input size="100" type="file" /></a> </form>
多颜色效果 a链接标签同时可以使用按钮的相关样式,如.border-main,.bg-main等。
<form> <a class="button input-file bg-green" href="javascript:void(0);">+ 浏览文件<input size="100" type="file" name="logo" /></a> </form>

下拉菜单

<form> <label class="label"> 拼图框架:</label> <select class="input"> <option>起步</option> <option>CSS</option> <option>元件</option> <option>模块</option> <option>javascript组件</option> </select> </form>

单选多选

单选框

<form> <label> <input type="radio">拼图框架 </label> </form>

多选框

<form> <label> <input type="checkbox">拼图框架 </label> </form>
按钮样式 单选或多选也可以采用按钮的形式,通过js来控制样式,详情参考"JS组件"的单选多选。

按钮式单选或多选

示例


状态

焦点状态

当选择或输入时的样式效果。
<form> <input type="text" id="doc-input-focus" class="input" size="30" placeholder="焦点状态效果" /> </form>

禁用状态

<form> <input type="text" size="30" class="input" disabled="disabled" placeholder="禁用状态效果" /> </form>

尺寸

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






<form> <input type="text" class="input input-big" size="20" placeholder="大号输入框" /> <input type="text" size="20" class="input" placeholder="默认输入框" /> <input type="text" class="input input-small" size="20" placeholder="小号输入框" /> <select class="input input-big"> <option>大号选择框</option> </select> <select class="input"> <option>默认选择框</option> </select> <select class="input input-small"> <option>小号选择框</option> </select> </form>

颜色及圆角效果

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


<form> <input type="text" class="input border-yellow-light bg-yellow-light" placeholder="文本框" /> <input type="text" class="input border-green bg-green bg-inverse" placeholder="文本框" /> </form>

直角或圆角

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

<form> <input type="text" class="input radius-none" placeholder="文本框" /> <input type="text" class="input radius-rounded" placeholder="文本框" /> </form>


按钮

按钮样式

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

<button class="button"> 默认</button> <button class="button border-main"> 主色</button> <button class="button border-sub"> 辅色</button> <button class="button border-back"> 背景色</button> <button class="button border-mix"> 融合色</button> <button class="button border-dot"> 点缀色</button> <button class="button border-black"> 黑色</button> <button class="button border-gray"> 灰色</button> <button class="button border-white"> 白色</button>

背景色按钮

<button class="button bg"> 默认</button> <button class="button bg-main"> 主色</button> <button class="button bg-sub"> 辅色</button> <button class="button bg-back"> 背景色</button> <button class="button bg-mix"> 融合色</button> <button class="button bg-dot"> 点缀色</button> <button class="button bg-black"> 黑色</button> <button class="button bg-gray"> 灰色</button> <button class="button bg-white"> 白色</button>

提示按钮

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


<button class="button border-red"> 危险</button> <button class="button border-yellow"> 警告</button> <button class="button border-blue"> 主要</button> <button class="button border-green"> 成功</button> <button class="button border-red-light"> 危险</button> <button class="button border-yellow-light"> 警告</button> <button class="button border-blue-light"> 主要</button> <button class="button border-green-light"> 成功</button> <button class="button bg-red"> 危险</button> <button class="button bg-yellow"> 警告</button> <button class="button bg-blue"> 主要</button> <button class="button bg-green"> 成功</button> <button class="button bg-red-light"> 危险</button> <button class="button bg-yellow-light"> 警告</button> <button class="button bg-blue-light"> 主要</button> <button class="button bg-green-light"> 成功</button>

直角和圆角按钮

使用.radius-(*)圆角系列样式,可以改变按钮的圆角形状。
<button class="button bg-main radius-none"> 直角按钮</button> <button class="button bg-sub radius-rounded"> 圆角按钮</button>

按钮尺寸

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









<button class="button button-large"> ...</button> <button class="button button-big"> ...</button> <button class="button"> ...</button> <button class="button button-small"> ...</button> <button class="button button-little"> ...</button>

按钮块

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

<button class="button button-block"> ...</button> <button class="button bg-dot button-big button-block"> ...</button>

禁用效果

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

<button type="button" class="button border-main" disabled="disabled"> 禁用效果</button> <button type="button" class="button bg-main" disabled="disabled"> 禁用效果</button> <button type="button" class="button " disabled="disabled"> 禁用效果</button>

可用元素

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

链接a按钮效果
<button class="button"> button按钮效果</button> <input class="button" type="button" value="input按钮效果" /> <a class="button" href="#">链接a按钮效果</a>

带图标的按钮

<button class="button icon-heart">喜欢</button> <button class="button"><span class="icon-search"></span>搜索</button> <button class="button"><span class="icon-spinner rotate"></span>加载</button>


列表

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

无序列表

顺序不重要的排序

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

有序列表

按顺序排列的内容。

  1. 拼图前端框架,是一款开源的专业网页前端UI解决方案。
  2. 是HTML、CSS、Javascrip三者结合的前端框架。
  3. 配合js效果,提供了拼图的CSS、HTML标准。
  4. 方便个性化、人性化的前端设计方法。
  5. 受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
  6. 拼图框架提供了CSS的重定义、元件样式的预设。
  7. 拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。
  8. 丰富了页面效果,同时让前端设计简单化、傻瓜化。
  9. 任何初学者都可快速建设美观、简洁的页面。
<ol> <li> ...</li> </ol>
采用中文有序列表,添加样式list-cn,部份浏览器不支持,另外,加上行高样式height-(*),可以改变列表的行距。
  1. 拼图前端框架,是一款开源的专业网页前端UI解决方案。
  2. 是HTML、CSS、Javascrip三者结合的前端框架。
  3. 配合js效果,提供了拼图的CSS、HTML标准。
  4. 方便个性化、人性化的前端设计方法。
  5. 受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
  6. 拼图框架提供了CSS的重定义、元件样式的预设。
  7. 拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。
  8. 丰富了页面效果,同时让前端设计简单化、傻瓜化。
  9. 任何初学者都可快速建设美观、简洁的页面。
<ol class="list-cn height"> <li> ...</li> </ol>

字母排序

  1. 拼图前端框架,是一款开源的专业网页前端UI解决方案。
  2. 是HTML、CSS、Javascrip三者结合的前端框架。
  3. 配合js效果,提供了拼图的CSS、HTML标准。
<ol class="list-alpha"> <li> ...</li> </ol>

无样式列表

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

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

内联列表

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

  • 拼图框架
  • 起步
  • CSS效果
  • 元件
<ul class="list-inline"> <li>...</li> </ul>

描述

带有描述内容的列表。

拼图框架
是一款开源的专业网页前端UI解决方案
框架应用
配合js效果,提供了拼图的CSS、HTML标准。
广受欢迎
受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
<dl> <dt>...</dt> <dd> ...</dd> </dl>

水平排列的描述

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


表格

表格列表

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

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

条纹表格

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

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

带边框的表格

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

鼠标悬停

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

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

紧缩表格

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

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

单元格背景

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

起步 CSS 元件 模块 JS组件
下载前端框架 文本 网格系统 框架 概述
框架包含的文件 图片 图标 头部 窗口工具
基本页面 水平线 标签 Banner 选项标签
响应式布局 按钮 徽章 导航 对话框
浏览器支持 列表 进度条 面包屑 提示
框架包含的文件 图片 图标 头部 警告框
基本页面 水平线 标签 Banner 表单验证
框架包含的文件 图片 图标 头部 警告框
基本页面 水平线 标签 Banner 表单验证
<table> <!--行--> <tr class="current"> <td> ... </td> </tr> <tr class="red"> <td> ... </td> </tr> <tr class="yellow"> <td> ... </td> </tr> <tr class="blue"> <td> ... </td> </tr> <tr class="green"> <td> ... </td> </tr> <!--单元格--> <tr> <td class="current"> >... </td> </tr> <tr> <td class="red"> ... </td> </tr> <tr> <td class="yellow"> ... </td> </tr> <tr> <td class="blue"> ... </td> </tr> <tr> <td class="green"> ... </td> </tr> </table>

响应式表格-默认

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

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


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

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

起步 CSS 元件 模块
下载前端框架 文本 网格系统 框架
框架包含的文件 图片 图标 头部
基本页面 水平线 标签 Banner
响应式布局 按钮 徽章 导航
浏览器支持 列表 进度条 面包屑
<div class="table-responsive-y"> <table class="table table-hover"> <thead> <tr> <th> 起步 </th> <th> CSS </th> <th> 元件 </th> <th> 模块 </th> </tr> </thead> <tbody> <tr> <td data-title="起步"> 下载前端框架 </td> <td data-title="CSS"> 文本 </td> <td data-title="元件"> 网格系统 </td> <td data-title="模块"> 框架 </td> </tr> <tr> <td data-title="起步"> 框架包含的文件 </td> <td data-title="CSS"> 图片 </td> <td data-title="元件"> 图标 </td> <td data-title="模块"> 头部 </td> </tr> <tr> <td data-title="起步"> 基本页面 </td> <td data-title="CSS"> 水平线 </td> <td data-title="元件"> 标签 </td> <td data-title="模块"> Banner </td> </tr> <tr> <td data-title="起步"> 响应式布局 </td> <td data-title="CSS"> 按钮 </td> <td data-title="元件"> 徽章 </td> <td data-title="模块"> 导航 </td> </tr> <tr> <td data-title="起步"> 浏览器支持 </td> <td data-title="CSS"> 列表 </td> <td data-title="元件"> 进度条 </td> <td data-title="模块"> 面包屑 </td> </tr> </tbody> </table> </div>


引用

引用样式

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

<blockquote> <p> ...</p> </blockquote>

配合代码显示

增加strong及smll标签,有不同的样式效果。
拼图框架

拼图前端框架,是一款开源的专业网页前端UI解决方案,是HTML、CSS、Javascrip三者结合的前端框架。

它配合js效果,提供了拼图的CSS、HTML标准,方便个性化、人性化的前端设计方法。
<blockquote> <strong>...</strong> <p> ...</p> <small>...</small> </blockquote>

向右对齐效果

拼图框架

拼图前端框架,是一款开源的专业网页前端UI解决方案,是HTML、CSS、Javascrip三者结合的前端框架。

它配合js效果,提供了拼图的CSS、HTML标准,方便个性化、人性化的前端设计方法。
<blockquote class="quote-floatright"> <strong>...</strong> <p> ...</p> <small>...</small> </blockquote>

引用颜色

使用.border-(*)系列样式,可以立即改变引用的边框颜色。

拼图前端框架

拼图前端框架,是一款开源的专业网页前端UI解决方案,是HTML、CSS、Javascrip三者结合的前端框架。


拼图前端框架

拼图前端框架,是一款开源的专业网页前端UI解决方案,是HTML、CSS、Javascrip三者结合的前端框架。


拼图前端框架

拼图前端框架,是一款开源的专业网页前端UI解决方案,是HTML、CSS、Javascrip三者结合的前端框架。


拼图前端框架

拼图前端框架,是一款开源的专业网页前端UI解决方案,是HTML、CSS、Javascrip三者结合的前端框架。


拼图前端框架

拼图前端框架,是一款开源的专业网页前端UI解决方案,是HTML、CSS、Javascrip三者结合的前端框架。

<blockquote class="border-main"> <strong>...</strong> <p> ...</p> </blockquote> <blockquote class="border-main quote-floatright"> <strong>...</strong> <p> ...</p> </blockquote>


浮动

设置浮动

通过这两个class让页面元素左右浮动。 !important被用来避免某些问题。

<div class="float-left"> ...</div> <div class="float-right"> ...</div>

清除浮动

使用.clearfix清除任意页面元素的浮动。

<div class="clearfix"> ...</div>


显示隐藏

显示和隐藏

通过.show 和 .hidden可以强制显示或隐藏元素。这两个class使用了!important以避免冲突,原因和快速浮动类似。

<div class="show"> ...</div> <div class="hidden"> ...</div>

使用下面的class可以针对打印机隐藏或显示某些内容

<div class="print-show"> ...</div> <div class="print-hidden"> ...</div>


透明新增

快速设置层、文字、图片等透明。

背景透明

通过.opacity设置背景是否透明,.opacity 默认,完全透明/.opacity-small 透明20%/.opacity-middle 透明一半/.opacity-big 透明80%/.opacity-none 不透明(用户重置已设置透明度的样式)。

完全透明
透明20%
透明一半
透明80%
不透明
<div class="bg-green opacity">完全透明</div> <div class="bg-green opacity-small">透明20%</div> <div class="bg-green opacity-middle">透明一半</div> <div class="bg-green opacity-big">透明80%</div> <div class="bg-green opacity-none">不透明</div> <!--其他透明度需自行定义,复制如下代码,更改opacity=后的数值即可--> .opacity-名称自拟{filter:alpha(opacity=100);-moz-opacity:1.0;-khtml-opacity: 1.0;opacity: 1.0;}

文字透明

通过.opacity设置背景是否透明,.opacity 默认,完全透明/.opacity-small 透明20%/.opacity-middle 透明一半/.opacity-big 透明80%/.opacity-none 不透明(用户重置已设置透明度的样式)。

完全透明
透明20%
透明一半
透明80%
不透明
<div class="bg-green opacity">完全透明</div> <div class="text-green opacity-small">透明20%</div> <div class="text-green opacity-middle">透明一半</div> <div class="text-green opacity-big">透明80%</div> <div class="text-green opacity-none">不透明</div> <!--其他透明度需自行定义,复制如下代码,更改opacity=后的数值即可--> .opacity-名称自拟{filter:alpha(opacity=100);-moz-opacity:1.0;-khtml-opacity: 1.0;opacity: 1.0;}