UI 组件样式示例

样式表:common_component.css

相框

.photoFrame 或 .picture 图片框/相框,设置在包含图片的容器上,另外再设置一个固定宽度,图片根据容器宽度按比例缩放。

.roundCorner | .roundBorder 圆角

.darkBorder 深灰色相框

.lightBorder 浅灰色相框

.redBorder 红色相框

.orangeBorder 橙色相框

.pinkBorder 粉色相框

.blueBorder 蓝色相框

.greenBorder 绿色相框

按钮类

.button
.large / lg 大按钮
.small / .sm 小按钮
.extra_small / .xs 超小按钮
.red 红色按钮,.danger 有危险的含义
.darkred 暗红色按钮
.yellow 黄色按钮,.warning 有警告的含义
.green 绿色按钮,.success 有成功的含义
.darkgreen 暗绿色按钮
.cyan 青色按钮,.info 有信息意味的
.pink 粉红色按钮
.purple 紫色按钮

表格

添加 .table 类,默认样式为:100% 宽度,下边距20px,紧凑边框。

表格标题
姓名 分数
小明 98
小红 96

table class="bordered" 带有边框的表格

表格标题
姓名 星座 电子邮箱
周杰伦 魔蝎座 zjl@163.com
容祖儿 双子座 rze@qq.com

table class="striped" 带有条纹的表格

表格标题
姓名 星座 电子邮箱
周杰伦 魔蝎座 zjl@163.com
容祖儿 双子座 rze@qq.com
关心妍 狮子座 gxy@163.com
麦家瑜 射手座 mjy@gmail.com

表单

使用 .form 添加默认样式

使用 .form-group 包含控件组

现代风格的选择框

红色的选择框 .redCircleTickCheckbox

橙色圆形打勾选择框 .orangeCircleTickCheckbox

特殊图标

i.spinner-loader 加载更多中

i.refreshing-loader 刷新中

.icon.settingIcon 设置图标

.icon.bellIcon 铃铛图标

.icon.gearIcon 齿轮图标

.icon.gearIcon 时钟图标

.icon.gearIcon 喜欢图标 .active 激活状态

.icon.rightArrowIcon 右箭头图标

.icon.insertPhotoIcon 插入照片的图标

文本标签 .textLabel (一般使用 span 标记)

默认 小尺寸 .small 大尺寸 .big 巨大尺寸 .huge 白色文字黑色背景 white black_bg 绿色文字灰色背景 green grey_bg 蓝色文字绿色背景 .blue green_bg 红色文字黄色背景 red yellow_bg 橙红色文字黑色背景 orangered black_bg 橙色文字蓝色背景 orange blue_bg 黄色文字黑色背景 yellow black_bg 粉红色文字黄色背景 pink yellow_bg

卡片式布局,多用于商品列表

样式包含圆角、盒子阴影、白色背景。

结构:

div.card_layout 卡片块容器,需加上宽度和间距设定,比如 .w240 .mr10

----div.image_row 图片行

--------img 图片

----div.title_row 标题行

示例:

baidu logo
这是标题

边框布局,弹性内容使用边框布局

情景:

弹性布局示例1
弹性布局示例1

结构:

.borderLayout 布局容器

----.northRegion 北边区域

----.middleRegion 中间层区域

--------.westRegion 西边区域(需加上宽度)

--------.centerRegion 正中间区域(主要内容)

--------.eastRegion 东边区域(需加上宽度)

----.southRegion 南边区域

示例:

北边(可选)
西边内容(可选)
主要内容
东边内容(可选)
南边(可选)

边框布局:四边固定高度或宽度,中心区域弹性尺寸。

结构:

.borderLayout 应用边框布局

-- .northRegion 北方区域

-- .middleRegion (required) 中间层区域

----- .westRegion 西方区域

----- .centerRegion (required) 中心区域,正文区域

----- .eastRegion 东方区域

-- .southRegion 南方区域

.middleRegion > .centerRegion 是必须有的,其他是可选。

示例:

northRegion

westRegion

centerRegion

eastRegion

southRegion

使用 .form 应用特别样式

普通布局的表单

垂直布局的表单 .verticalLayout

搜索框

依赖:font-awesome

文章列表

结构:

div.listContent

--ul.list_blog

----li.item_blog itemscope="" itemtype="http://schema.org/Blog"

------h2.title_box.title_item itemprop="name"

--------a

------div.item_header

--------span.item_time itemprop="dateCreated" |

--------span.item_click

------div.item_intro

--------div.intro_image

----------img

--------div.text itemprop="description"

示例:
  • 没有不听话的孩子,父母必学聊天方式

    2016-09-09 14:26:07 | 阅读:132
    妈妈和女儿
    很多妈妈抱怨,孩子越长越大,跟家人说话却越来越少。有时候大人问一句“今天过得怎么样?”得到的答案往往是“还行、挺好的”,就再也没了下文。孩子表面上看起来挺听话的,但其实他内心里有自己的小九九,就是不跟家长说。而这样子导致的问题,会在孩子青春期时一下子爆发出来,让人想改都来不及了。所以,在孩子还小的时候,我们就要学会和孩子聊天。...
  • 犹太人的理财智慧故事之一美元贷款

    2016-06-25 00:00:03 | 阅读:169
    1美元
    有一天,一位犹太富翁走进了美国花旗银行的贷款部。贷款部的经理一看,来了一位大客户,因为这位犹太人的手里拎着一个非常昂贵的皮箱,穿着也是非常地体面。 经理一看,马上迎了上去,问道:“这位先生有什么需要我帮忙的吗?” “我想借一些钱。”犹太富翁说。 经理一听,便说:“可以,但是您要在我们这里贷款的话需要有担保人,...

简单文章界面 .article.simpleUI

结构:

*.articleContainer

-*.article.simpleUI itemscope="" itemtype="http://schema.org/Blog"

----*.titleArea itemprop="name"

----*.infoArea

------span.publishedTime itemprop="dateCreated"

|

------span.clickNumber

----*.textArea itemprop="text"

示例:

孩子初学写字,写歪写丑不要纠正,原因你最好知道

发布:2016-09-09 14:12:33  |  阅读次数:116

有人说,孩子学写字时最重要的是要从一开始纠正笔画笔顺,也有人说要让孩子养成工整认真的习惯,这些说法对吗?

幼儿说先给大家举个例子。

嘟嘟最近喜欢拿着笔模仿爸爸的样子写字,当过小学老师的奶奶一看很高兴——小不点要学写字,这是好事儿。随后奶奶就教嘟嘟写“大小”、“上下”这些简单字。嘟嘟很兴奋,就像一个刚入伍的新兵得到任务那样,一本正经地写了起来。

一旁的奶奶没多久皱起了眉头:”不对,‘大’字左撇应该往左拐,不是竖直。“没过一会,又响起了奶奶的声音:“你这‘上’字写歪了,端正一点。”“怎么老是跟你讲要写端正点,耳朵长哪了?”……奶奶一副着急却又恨铁不成钢的样子在一旁不断地纠正。

突然,“啪”的一声,嘟嘟扔掉了手上的笔,两手抱在胸前气鼓鼓地说:“我不写了,没意思!”

“你这孩子,怎么一点耐性都没有呢?”奶奶抱怨,又用小学老师的耐心模式“教育”嘟嘟:“学写字要有耐心,还要认真……”

嘟嘟当作没听到,干脆跑掉了,把奶奶气得吹胡子,见到孩子爸爸就抱怨:“你儿子不行啊,写字一点儿也不认真……”

爸妈们,你们让孩子学写字是不是也这样?孩子写歪写丑不要急着纠正。

幼儿说提醒,如果你家孩子也是这样被大人对待的,你家孩子也是这种反应就糟了。上面有两个错误。

1、太多的否定

“这样不对”,“太丑了”,“写歪了”,“你应该这样”……我们做个假设,假如你正在学溜冰,教练不停地在旁边指责你说“你的左腿应该放松”,“你的头不要低着”,当你摔倒了,教练皱着眉头“你怎么老这样”……你觉得你学这个溜冰还有意思吗?至少你也会从心里排斥和反感:“如果我懂的话,还需要你来教吗?”人的心理有个奇怪的现象,就是当你被对方否定的时候,自然而然的你的内心会激起反抗、为自己辩解;而当人被称赞时,内心会自然地开启自省模式——我在哪里还做得不够好。

当孩子们在学写字时,正确的做法应该是暂时容许他们写歪、写丑,找到他们值得称赞的地方:“你这一笔写得很认真”,“笔顺写对了,不错!”孩子们会很高兴,内心的兴趣和热情也被激发,会促使他们坚持下去。对一个初学写字的孩子来说,没有什么比兴趣更棒的了。

2、给孩子贴负面标签

“你怎么一点耐性都没有呢?”,“你就是一个不认真的孩子”,“我孩子就那样,不懂坚持”……对大人来说,这是大人的抱怨或评判,但对孩子来说就是咀咒和暗示,“我刚才的举动就是没耐性,我妈妈说我是一个没耐性的孩子”,“我就是个没耐心的孩子”,这样的暗示会让孩子巩固身上的标签,甚至还会在日后重复没耐性的行为,“我妈妈说我没耐性,没耐性就是要有那样的行为”。所以负面的标签是有害的,你的抱怨和批评将让孩子成为你心中不希望成为的那种人。 

最后,温馨提示一下:学龄前孩子不建议强迫写字

经常会有父母问,6岁前的孩子是否应该写字。幼儿说的建议是可尝试但不强迫,最重要的还是培养孩子的兴趣,孩子有兴趣可以支持,没兴趣也不强迫。因为从儿童心理发展的角度解释,6岁前最适合的活动是游戏,而不是功利性的学习。任何强迫性的学习,会给孩子造成压力,甚至会影响孩子一生的学习热情。

文章中的图片、音频、视频标记最大宽度是 100%,图片高度根据比例缩放。

 

文章图片

 

 

模块

结构:

div.module 模块主体

--div.module_header 模块头部(标题栏)

----div.module_title.fl 模块的标题

----div.others.fr 模块操作按钮区域

------a 按钮链接

--div.module_body 模块内容区域

示例:

最新文章

  • 男子返乡4天又回京:父母嫌挣得少
  • 阿斯塔纳叙利亚和谈结束 俄伊土达成强化停火共识

进度条

结构:

div.progress

--div.bar

示例:

div.progress 添加 .rounded 可设置圆角

对话框

结构:

.dialog 对话框主体

--.dialog_header 对话框头部

----.dialog_title 对话框标题

----.button_group 对话框头部按钮组

------.close_button 关闭按钮

--.dialog_header 对话框内容部分

示例:

发送成功

消息发送成功!

.dialog 添加 .borderRadius 可设置圆角。

创建项目失败

创建项目失败。
HTTP 500 request error.

.dialog.success 可设置成功对话框样式

成功

创建项目成功!

.dialog.error 可设置错误对话框样式

失败

创建项目失败。
HTTP 500 request error.

树结构

结构:

.treeView 主体

-- .folderNode 目录节点

---- .nameRow 名称行

------ input.checkbox 选择框控件

------ i.folderIcon.icon 目录图标

------ .name.folderName 目录名称

---- .childrenContainer 子节点容器

------ ... 其它节点

-- .leafNode 叶子节点

-- .leafName.name 叶子名称

示例:

目录一
目录1.1
叶子1.1.1
叶子1.2
目录2
目录2.1
叶子2.1.1
叶子3

指示器

div.indicator.roundDotStyle
--span.roundDot.defaultColorCCC
--span.roundDot.defaultColorCCC.activeFA585C