绵阳师范高校志愿者走进祁东举办任务支教: 立异意课堂,我给你或多或少创意,你还自我很是打动起名

(通讯员   胡娟  摄影  
李佳)
“支教活动对院校来说,很有含义。那里的子女基本上都是留守孩童,希望您们能给子女带来真正的事物,让孩子们感受到‘家’的采暖。”三口湾小学王校长对襄阳师范高校志愿者的来到表示欢迎。

面前的话

  每回写HTML结构关系到CSS命名时,都要挣扎一番。关于CSS命名的正经,市面上有无独有偶,如OOCSS、SMACSS、BEM和MVCSS等。在那里面最火的相应算BEM了。本文将详细介绍CSS命名

 

7月25日至29日,湘潭财经学院“喜迎十九大青春建新功”精准扶贫社会实践服务团下的数学与总结高校“微光•耀梦”教育关爱社会实践服务队一行12人,在校团委老师的率领下,来到邵阳市古丈县太和堂镇高龙村三口湾小学展开任务支教活动,高龙村是湘潭师范高校精准扶贫的悠长对口点,七月的话,邯郸师院持续派出4个劳务分队前往高龙村,“微光•耀梦”服务队是第三支志愿队伍容貌。

主流命名

【BEM】

  说起CSS命名,当然要提到BEM。BEM的意趣就是B模块(block)、E元素(element)、M修饰符(modifier)。模块和子元素之间用多个下划线分隔,子元素和修饰符之间用多个中划线分隔

  关于子元素E,有三种写法。一种是坚守层级嵌套来写,如block-ele1-son-inner,不过如此写会导致命名过长;另一种是扁平化,一个模块B下的装有子元素,无论彼此层级怎么着,都一贯连接B,如block-inner,可是如此就无法表示层级关系,命名时也可能会油但是生争辨

  BEM的命名是很好的,不然也不可能变成最盛行的命超模式。可是,BEM对子元素的命名,无论是层级长命名如故扁平化短命名,都有通病

【NEC】

  相较于BEM以模块B为甲级元素,子元素类名中带有继承关系的命名,腾讯网的NEC规范运用后代拔取器形式

  NEC将元素分为了5类:布局(grid)(.g-);模块(module)(.m-);元件(unit)(.u-);作用(function)(.f-);皮肤(skin)(.s-);状态(.z-)。而后人接纳器不须求总体突显结构树层级,尽量能短则短

.m-list{margin:0;padding:0;}
.m-list .itm{margin:1px;padding:1px;}
.m-list .cnt{margin-left:100px;}

  个人认为,新浪对此元素分类的做法很好。关于部分大局可复用的作用性的模块举行区分,结构尤其显著。然则,对于使用后代接纳器的格局,个人不太认同。当嵌套层级较深时,命名冲突照旧是一个题材

【JD】

  京东的命名规则行使表示层级嵌套关系的长命名。当子孙模块超过4级或上述的时候,考虑在先人模块内拥有识辨性的单独缩写作为新的遗族模块

<div class="modulename">
    <div class="modulename_cover"></div>
    <div class="modulename_info">
        <div class="modulename_info_user">
            <div class="modulename_info_user_img">
                <img src="" alt="起名 1">
                <!-- 这个时候 miui 为 modulename_info_user_img 首字母缩写-->
                <div class="miui_tit"></div>
                <div class="miui_txt"></div>
                ...
            </div>
        </div>
        <div class="modulename_info_list"></div>
    </div>
</div>

  京东那种因子元素名字过长而利用首字母缩写的做法越发赞,至今市面上没有其他更好的缓解长命名的方案

 

走进学府第一眼看到的是一座极老的房舍,大小可是八间房屋和一个厅堂,砖是50年间的土砖,窗子全数坏掉了,上边仅残留挡风的塑料布,屋顶随意盖着稀稀拉拉的黑瓦,走进来,高低不平的地面上满是水坑。那样的房子大致达到了危房的终端。几年前,那里就是三口湾小学的校址所在地,孩子们就是在如此的房屋里阅读,写字。志愿者们的心目登时生起一股心酸,暗下决心,定要让孩子们感受到世界的美好与美观。

取名格局

【后代拔取器仍旧类名】

  关于CSS命名,最大的冲突就是接纳后代接纳器依然利用类名。以下例所示

<ul class="list">
    <li class="list-item"></li>
    <li class="list-item"></li>
    <li class="list-item"></li>
</ul>

<ul class="list">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

<ul class="list">
    <li></li>
    <li></li>
    <li></li>
</ul>

  借使使用第一种长类名的法门,为<li>元素设置样式,只需如下设置即可

.list-item{}

  如若选择第两种短类名的方法,则为<li>元素设置样式,需如下设置

.list .item{}

  倘诺运用第两种后代选择器的主意,则为<li>元素设置样式,需如下设置

.list li{}

  如果从不难角度来看,第二种后代接纳器的方法最简便,无需花时间去给子元素起名,且在sass中书写很容易

.list{
    li{}
}

  可是,它有一个很惨重的标题,就是一旦HTML结构层级较深,往往出现选取器层级过长,如.list
li span a{}

  而且,因为后代选取器强烈地看重HTML结构,为了防止因为少写一层结构,导致选取器特殊性下跌,样式无法生效的图景,也不得不如此写

  一个不得不提的题材是,CSS拔取器的辨析顺序是从右到左。而利用后代拔取器.list
li{},浏览器须要遍历出装有的li,再找出.list下的li,功能是低于的

  因而,个人觉得第三种后代接纳器的主意并不是好采取

  上边介绍第二种短类名的措施

  1、选用器解析功能比第三种办法好,毕竟.item比li的限量小很多

  2、短类名.list
.item同样存在看重HTML结构的情形,很可能出现选用器层级过长

  3、使用较简单,在sass中书写不难,且起名也较容易

  4、由于给li增添了类名,于是伸张了HTML文件大小

  最终介绍第二种长类名的办法

  这种措施的挑选器作用最高,因为.list-item这几个类型页面中只现出四次,可类比于id接纳器的分析速度

  由于使用长类名的方法,可以完全不应用后代拔取器,则无需考虑选拔器特殊性较低,样式不能生效的景况,也不会现出拔取器层级过长,因为它仅有一流

  可是,相应地,它最大的短处是类名较长,大大地充实了HTML文件大小。于是,可借鉴京东,当子孙模块超越3级时,选用首字母缩写,并将缩写后首字母大写的做法,在如将.list-item-link-title缩写为.Lil-title

  最后,选拔可缩写的长类名作为CSS命名的第一情势

【分隔符】

  一般地,classname分隔符有3种,中划线-,下划线_,以及首字母大写,以分隔list和item为例

//中划线
list-item
//下划线
list_item
//首字母大写
listItem

  1、中划线

  中写道可以用来代表层级关系

<div class="box">
    <ul class="box-list">
        <li class="box-list-item"></li>
        <li class="box-list-item"></li>
        <li class="box-list-item"></li>
    </ul>
</div>

  2、下划线

  下划线可以用来代表不相同的景观

<div class="box">
    <button class="box-btn box-btn_default" type="button"></button>
    <button class="box-btn" type="button"></button>
</div>

  3、首字母大写

  首字母大写可以用来代表因为样式的必要,而只能够扩展的HTML结构。一般地,假如在外层扩大结构,可以伸张Wrap,在内层增添结构,可以追加Inner,且不影响原本的classname的命名

<div class="boxWrap">
    <section class="box">
        <h2 class="box-title"></h2>
        <p class="box-content"></p>
    </section>    
</div>

【组件】

  通过上边的长命名方式和分隔符的选用,解决了根基结构的命名。不过,在页面中,很可能出现有的组件的行使,这几个组件可以复用到页面的多个职责。那时,再使用方面的主意就不太适合

  于是,可以以m-为前缀,来表示那是一个组件

<div class="box">
    <button class="m-btn m-btn_error" type="button"></button>
    <button class="m-btn" type="button"></button>
</div>

 

此次支教活动,志愿者们为子女们带去的不单是她们日常设置的语数英课程,更有他们没读过的课余书籍,没听过的神州礼仪,没玩过的意味活动、没画过的摄影、没做过的科学实验和很重点的安全知识。此外,志愿者们尤其集体孩子一起仔细准备了才艺汇报表演和各具特色的期望拍卖会。对于都市里孩子们而言,这个所谓的学识在大城市里似乎常识一样开玩笑。但是对于那几个子女的话,那个知识就像让她们走进了大城市一般,看到了土砖房以外的世界。

取名推荐

  有了适度的命名模式,还亟需语义化命名,且有不影响语义的场所下,可以简写

【布局】

文档    doc
头部    header(hd)
主体    body    
尾部    footer(ft)    
主栏    main
侧栏    side    
容器    box/container

【通用部件】

列表    list
列表项  item
表格    table    
表单    form
链接    link
标题    caption/heading/title
菜单    menu
集合    group
条      bar
内容    content    
结果    result    

【组件】

按钮        button(btn)
字体        icon
下拉菜单     dropdown
工具栏       toolbar
分页         page
缩略图       thumbnail
警告框       alert
进度条       progress
导航条       navbar
导航         nav    
子导航       subnav
面包屑       breadcrumb(crumb)    
标签        label
徽章        badge
巨幕        jumbotron
面板        panel
洼地        well
标签页      tab
提示框      tooltip
弹出框      popover
轮播图      carousel
手风琴      collapse 
定位浮标    affix

【语义化小部件】

品牌        brand
标志        logo
额外部件    addon
版权        copyright
注册        regist(reg)
登录        login
搜索        search    
热点        hot
帮助        help
信息        info
提示        tips
开关        toggle
新闻        news
广告        advertise(ad)
排行        top    
下载        download    

【功用部件】

左浮动    fl
右浮动    fr
清浮动    clear

【状态】

前一个    previous
后一个    next
当前的    current

显示的    show
隐藏的    hide
打开的    open
关闭的    close

选中的    selected
有效的    active
默认的    default
反转的    toggle

禁用的    disabled
危险的    danger
主要的    primary
成功的    success
提醒的    info
警告的    warning
出错的    error

大型的    lg
小型的    sm
超小的    xs

 

三口湾小学旧址

实践

<header class="hd">
    <nav class="hd-navbar m-navbar m-varbar_primary">
        <div class="hd-navbar-tel">联系方式:400-888-8888</div>
        <ul class="hd-navbar-nav">
            <li class="Hnn-itm m-btn m-btn_info"><a href="#">登录</a></li>
            <li class="Hnn-itm m-btn"><a href="#">快速注册</a></li>
            <li class="Hnn-itm m-btn"><a href="#">关于</a></li>
            <li class="Hnn-itm m-btn"><a href="#">帮助</a></li>
        </ul>
    </nav>
    ...
</header>

【幻灯片】

<div class="carousel">
  <div class="carousel-banner">
    <a class="carousel-banner-item Cbi_slide1 Cbi_active" href="#"></a>
    <a class="carousel-banner-item Cbi_slide2" href="#"></a>
    <a class="carousel-banner-item Cbi_slide3" href="#"></a>
    <a class="carousel-banner-item Cbi_slide4" href="#"></a>          
  </div>
  <a class="carousel-control carousel-control_prev" href="javascript:;">&lt;</a>
  <a class="carousel-control carousel-control_next" href="javascript:;">&gt;</a>
  <div class="carousel-indicators">




  </div>
</div>

  关于CSS命名,并不曾最佳实践之说,依照项目标纷纭程序进行恰当的命名才是可取的  

  欢迎互换  

创意课堂——以画换书,每一本书都值得被热爱

“书中自有颜如玉,书中自有黄金屋”是豪门熟稔的句子,“读书好,好读书,读好书”也是二老、老师给男女们的谆谆指引。“三下乡”活动拓展从前,志愿者们打听到三口湾小学的书本观看室书籍相当缺少,同时半数以上儿女家长舍不得花钱为儿女们购置课外书籍,甚至个别父母觉得读书课外书籍是不务正业,只会影响孩子求学。“农村的儿女更欣赏读书,他们对书中的世界充满了显眼的好奇,你们带来的书就是给该校最可贵的财物。”志愿者来此前校长大力赞许了举行“以画换书”这项奇特课堂的企图,将画画与读书联系起来,不仅使课堂更鲜活丰裕,也告知儿女们,书籍来之不易,要漂亮尊崇。

这几个课外书籍是数学与总结大学“微光•耀梦”教育关爱社会实践服务团面向衡师学子募集而来,每一本都表示着一位衡师学子对子女们未来辅导的酷爱,每一本书上都写着衡师学子对男女们的深厚祝福与鞭策。

“同学们,你们要加素描哦,画得好的娃娃就足以到老师那里换本喜欢的书”。李佳先生在教会孩子们怎么着画各类小动物之后说道。

“二姐,我多画几幅画,可以多换几本书吗?”雷湘柔同学向先生投以“渴望被赞成”的眼光说道。

“可以啊,我们用心画就会画的很棒,就都得以提取美观的书啊!”

男女们相当想博得新书,都卯足力气努力画好画

那时候外界下起了大雨,天色阴沉,但是领到书的男女们心中却被照进一点滚烫的微光,在志愿者们更加清扫布置的一间起名为“读书角”的体育场地,认真的开卷,在学识的汪洋大公里翱翔畅游。也许在翱翔畅游的时候就找到了将来的趋势,一时的诱导,很有可能是平生的变动。

获得书的子女们在体育场面安静的看书

新意课堂——你有希望呢?大家来拍卖呢!

人,只要活着就应当有期望,梦想是一个人的力量的源泉,也是一个中华民族的期望。“你们的指望是怎么样?”当孩子们被问到这一个标题时,脸上表露茫然、不安、心慌意乱的神气。“这堂课大家开进行一场梦想拍卖会,现在你们每人拥有3000的冀望积分,每一个可望的起拍价为100可望积分,出价最高一次无人加价者成功竞拍到那一个梦想,五遍出价3000积分的将直接获得此期待,商梦想拍到未来不可以退货或者转让,成功拍卖的期待将不再拍卖。”孩子们精通规则之后,开端尝试。“第三个希望,成为一个有钱人,发轫竞拍。”“第三个梦想,考上好校园”“第五个希望,拥有不俗、坚定、诚实的质量”……经过一番热烈的竞拍之后,第几个梦想变成最几人竞拍的期望。

“希望可以通过那一个意思活动,指点孩子们主动思维自己的冀望是怎么样?大家想为他们开启一扇门,让他们力所能及看得见将来。”志愿者卢雪薇说。

新意课堂——用歌舞传递自信,你是那么美

“向欢快出发,世界那么大,任风吹雨打,梦总会到达。向欢畅出发,别害怕,幸福如同国外灿烂的晚霞,一起来吧……”伴着《向欢愉出发》的歌声响起,同学们随着导师一个一个动作,反复练习,额头一贯挂着的汗水,折射出每位同学的顽固和对歌舞的敬爱,也映照出志愿者老师的用心与耐心。

下课铃响了,准备文艺表演的一局地同学哼着排练时先生教的歌曲,“兴奋是落败挫折那份力量……”蹦蹦跳跳地冲出了课室,还有多少个同学却留在了课室,偷偷在一旁苦练动作。

都会的少年孩童没有缺少舞台,可是城市的小孩没有缺少舞台,不过在农村校园,舞台是金玉一遇的,没有才艺老师教习唱歌、跳舞、乐器,家长们进一步没有剩余的钱给孩子们报各样兴趣班一个小小的的舞台带来这群孩子的不光是四次表现自己的机遇,更是偷偷的告知子女们,你们很美丽,你们很完美,你们有高大的能量可以去做过多你认为不可以的业务,你们和都市里的孩子无异很棒,不差什么。

采纳课余时间,志愿者与子女们一块排练了歌曲《水调歌头》,选择男女合唱,摇滚乐结合的款式,让男女们在赞颂中感受中华杂文之美。舞蹈《隐形的膀子》和《向欢跃出发》,孩子们随着音乐共同跳舞,在转动中找回天真和自信,这一刻,你们都是最美的天使。手语《感恩的心》,教他俩学会用言语和文字以外的方法表明出对家长,对先生,对身边的人感恩。

鉴于每一日的课程安排满档,可以排练的日子至极短暂,本认为孩子们会吵闹,但彩排的时候都出奇意外的灵敏和认真,甚至有过多幼儿每一日6点半左右来临该校找教授训练。这是她们对志愿者的疼爱,对我们的报恩以及在管理学会演上对团结的终将,家长们在文艺会演那天看到在跳舞唱歌的儿女,应该会很打动呢。

文艺汇演上孩子们正在表演舞蹈。

新意课堂——情牵周到课堂,活力无限

“有些人读书了一生,并且学会了全副,但是尚未学会怎么才是有礼貌”,“一粥一饭,当思来之不易,半丝半缕,恒念物力维艰”“有人跟你说对不起,你要对他说哪些?”,“没关系!”

礼貌待人,使用礼貌语言,是我们中华民族的非凡传统,是一个人的大旨素养,怎样文明地处事待人,是每个年轻人成长进度中必修的一课。在此处的每一天,志愿者们演示,谆谆教育孩子们在生活中咋做一个讲礼貌的人。“感谢李俊豪小朋友给我们来得了吃饭七忌,现在,别人给你们表演了节目,同学们应当如何是好啊?”“鼓掌”孩子们大声地回答,随后课堂上回想一阵阵清脆的掌声。小小的手一开一一面如旧打出的掌声中显示了孩子们愿意学习的人格,也暗示了她们梦寐以求成为一个申明通义、落落大方、受人保养的人的美好愿望。

孩子们的一坐一起就是给志愿者最好的礼物,最大的震动。

当衡师学子从一个讲堂走到另一个体育场面,大家的肩上多了一份任务。为了让儿女们学到真正的事物,每一堂课志愿者都用尽感情。实验课上,一个个有意思的不利小尝试让男女们对正确发生了深切的兴趣;音乐带给孩子美的享用;安全知识课堂利用一张张卡通卡片,帮助孩子在生存当中预防危险,健康成长;而体育是她们强身健体的维系,趣味生动的游戏可以进步孩子们的定性和强强联合精神。语数英等历史观课堂上,志愿者们也用尽感情革新形式,让他们增强对那一个科目标志趣,阿尔巴尼亚语作为比较不方便的教程,葡萄牙语老师万分苦口婆心,一句一句教孩子们读,一个一个字母念给孩子们听。

慎重承诺,一定会再来

十二月29日早上9点,天气晴朗,志愿者与子女们一同精心准备的“微光•耀梦”文艺汇报表演正式开班啦!许多老人和隔壁的老乡来到现场见到演出。这场不难的才艺显示没有理想的衣着,没有豪华的舞台,但孩子们认真的演艺和执着的投入,志愿者们的采暖和由衷激起了拥有孩子的热心。

“孩子们,起立,向后转,像这多天的话陪伴和教育你们的教授,鞠躬!”此刻氛围分外安静,老师和学友泪光泛起,强忍着不舍之情,泪水在眼框中转了几圈迟迟不落,似乎倔强着不愿说再见。

“二〇一九年是潮州工业大学第二次来到三口湾小学,大家在此间许下承诺,前年大家还会再来的。”带队老师谭全球在全部师生面前郑重承诺,迎得在场地有学员、老师、家长、村民的凌厉掌声。

“老师,你们真的还会再来吗?不是骗大家的吧?”一贯调皮捣蛋的张恒翔同学抓着志愿者的行李不肯松开,志愿者无声地抱住张恒翔,“今年衡师志愿者肯定会再来,也许没有我,但是会有跟老师一致爱你们的志愿者到来此地,到时候你要听老师的话,好好学习,长大后做一个对社会有效的人。”

子女们赶到教员宿舍,帮导师惩罚行李。

“乡村里的儿女有一颗引人注目标好奇心、旺盛的满腔热情和惊人的创立力,对外边新东西充满求知欲。他们只是紧缺有人教导。我想成为她们成长路上的指点者,引领他们自由梦想”志愿者芦雪微说。

在这次支教活动中,老师带学员精晓了区其他课堂,让她们看来了更宽泛的天地,在追梦路上为他们点起一盏明灯,并告诉她们要坚韧不拔梦想,不要放任奋斗。而学生援救老师在实践中不断的圆满自己,深入驾驭到什么是志愿者精神,志愿活动的意思在哪儿。那是师资与学生双方的教诲运动,他们都在里面赢得了成长。

衡师的菩萨心肠接力一向在继承,老师与子女的故事尚未落成,大家,二零一八年再见!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图