文档章节

《ICECSS入门指南》第二章 使用方法和基础元素

tbaby
 tbaby
发布于 2015/04/15 10:12
字数 728
阅读 160
收藏 1
点赞 0
评论 0

使用ICECSS


首先你需要到 https://github.com/T-baby/ICECSS 上下载最新版本的包。

我们下载后可以看到这样一个文件结构,docs是文档,css中包含了普通版、压缩版、Less版三个版本的CSS文件,font是图标字体,html文件夹里存放了两个例子,同时也是建议大家在开发时将html文件放在html文件夹中。img下存放着图片ICECSS所需的两个图片和一个例子用的logo。

为了大家使用方便,在JS文件夹中不仅有ICECSS的JS还附带了Jquery和Less编译用的js。

ICECSS的版本是写在version.json里的,这是我们内部使用的一个版本管理工具的格式。

plugin下存放的都是ICECSS自主开发或者封装改写的插件,这些插件的版权都归原作者所有。至于每个插件的功能我们在之后的章节再来讲解。

使用起来很简单,将你自己的网页放在html文件夹中或者是根目录,然后引入icecss文件。

 <link rel="stylesheet" href="../css/icecss.css>

然后导入JS,由于ICECSS是基于JQuery的,所以在导入ICECSS的JS前请先导入JQuery,我们在js文件夹中已经附带了一个。

 <script src="../js/jquery.min.js"></script>
 <script src="../js/icecss.js"></script>

ICECSS本身提供了CDN服务,你可以在你的项目中直接使用CDN上的地址。

http://cdn.besdlab.cn/jquery/2.1.1/jquery.2.1.1.min.js
http://cdn.besdlab.cn/icecss/icecss.css
http://cdn.besdlab.cn/icecss/icecss.js


基础元素


ICECSS中所有的CSS的class名字都有ice-这个前缀,比如ice-div、ice-form。这是为了更好的兼容性和减少污染。

我们在开发ICECSS的初期就考虑到使用了两个css框架的情况,所以我们的基础元素也只会在ice-div下生效。

这些基础元素都是不需要增加额外的class的,只需要放在ice-div下即可。

比如:

<div class="ice-div"><h1>TEST</h1></div>

基础元素包括:

  • h1

  • h2

  • h3

  • h4

  • h5

  • h6

  • p

  • ul

  • li

  • ol

  • dl

  • dt

  • dd

  • a

  • blockquote

  • hr(分割线)

  • pre

  • code

如果你需要使元素具有下面的标题效果,可以给它增加一个ice-title标签。

ICECSS的布局是基本不带内边距的,在实际开发中如果需要内边距可以使用透明面板。

ICECSS的基础面板ice-panel是一个灰框白底的,透明则是ice-panel-original。你可以在div上使用面板或者是在布局上使用。

如果是需要一个可以关闭的面板则要用ice-panel-point。如:

<div class="ice-panel-point">
    <span class="ice-close"></span>
    <p>这是一个可关闭的提示面板</p>
</div>

这个可以关闭的面板可以用于做一些提示之类的功能。

© 著作权归作者所有

共有 人打赏支持
tbaby

tbaby

粉丝 23
博文 32
码字总数 14718
作品 7
深圳
网页/平面设计
《ICECSS入门指南》第一章 起源

首先说明下,其实我是一名设计师,因为某些原因走向了开发之路。 ICECSS这件事情我其实策划了蛮久的,之前在开发网页的时候我发现大部分的CSS框架都是圆角的,这与我的喜欢并不匹配。我个人来...

tbaby ⋅ 2015/04/13 ⋅ 0

Oracle数据库学习的福利来啦——最佳入门经验分享

适用人群:从事数据库技术实施或售后工程师,准备参加OCA,OCP认证考试 通过学习对Oracle数据库的相关基础知识进行梳理,最终共同提炼出必须最先掌握的那部分知识,无论你是数据库开发、管理、...

让往事随风 ⋅ 2016/04/13 ⋅ 0

javascript——从「最被误解的语言」到「最流行的语言」

JavaScript曾是“世界上最被误解的语言”,因为它担负太多的特性,包括糟糕的交互和失败的设计,但随着Ajax的到来,JavaScript“从最受误解的编程语言演变为最流行的语言”,这除了幸运之外,...

modernizr ⋅ 2014/05/20 ⋅ 12

Ember.js入门教程、博文汇总

文章来源:http://blog.ddlisting.com 网友@如影随形提意见说整个教程的目录,细想也是,整个网站的管理有点乱,很多东西都不知道放哪里找起来也不方便(太懒了,连个搜索都没有!),特此整...

ubuntuvim ⋅ 2016/05/25 ⋅ 4

机器学习的最佳学习路线原来只有四步

AI这个词相信大家都非常熟悉,近几年来人工智能圈子格外热闹,光是AlphoGo就让大家对它刮目相看。今天小天就来跟大家唠一唠如何进军人工智能的第一步——机器学习。 在机器学习领域,Python已...

ufv59to8 ⋅ 05/12 ⋅ 0

《Knockout应用开发指南》系列技术文章整理收藏

《Knockout应用开发指南》系列技术文章整理收藏 Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化,Knockout应用开发指南系列整理了Knockout方面的技术文章,供学习...

开元中国2015 ⋅ 2015/06/22 ⋅ 0

Ember.js 入门指南——总目录

Ember.js 是什么?我想对于想学习它的人应该知道它是个什么东西,如果你想了解那就赶紧去 Google 或者百度,本系列教程是通过学习官网教程然后摘抄个人觉得比较重要的部分,加上学习实例整合...

ubuntuvim ⋅ 2015/10/25 ⋅ 2

49个python经典电子书

49个python经典电子书 本文转自:http://blog.sina.com.cn/s/blog_5bce66f00102vgqv.html

天意1 ⋅ 2016/01/20 ⋅ 0

精益 React 学习指南 (Lean React)

本书内容 这本书我会由简单到复杂的带领大家进入 React 的世界, 其中 1 - 3 章节都是 React 的基础知识,需要提醒读者的是大多数的基础知识都可以通过 React 的官方文档学习,如果对英语敏感...

陈学家 ⋅ 2016/05/25 ⋅ 0

javascript推荐书籍

WEB前端研发工程师,在国内算是一个朝阳职业,这个领域没有学校的正规教育,大多数人都是靠自己自学成才。本文主要介绍自己从事web开发以来(从大二至今)看过的书籍和自己的成长过程,目的是给...

woaita1314azsls ⋅ 2014/03/28 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

【elasticsearch】 随笔 Date datatype

一。时间类型的本质 首先json是没有时间类型的,对于es来说,时间类型的标示可以是下面三种情况 1.一个时间格式的字符串,如:"2014-11-27T08:05:32Z","2015-01-01" or "2015/01/01 12:10:3...

xiaomin0322 ⋅ 8分钟前 ⋅ 0

阿里云资源编排ROS使用教程

阿里云资源编排ROS详细内容: 阿里云资源编排ROS使用教程 资源编排(Resource Orchestration)是一种简单易用的云计算资源管理和自动化运维服务。用户通过模板描述多个云计算资源的依赖关系、...

mcy0425 ⋅ 11分钟前 ⋅ 0

适配器设计模式

1、适配器模式 把一个类的接口变换成客户端所期待的另一种接口 使原本因接口不匹配而无法在一起工作的两个类能够在一起工作 分为类的适配器模式和对象的适配器模式 2、类适配器模式 类的适配...

职业搬砖20年 ⋅ 15分钟前 ⋅ 0

npm操作报错 _stream_writable.js:61

有一天 不知道什么原因(估计和node的版本有关),无论你做什么npm的操作 都会报错/usr/local/lib/node_modules/npm/node_modules/readable-stream/lib/_stream_writable.js:61 这时候只要执...

lilugirl ⋅ 19分钟前 ⋅ 0

Eclipse安装插件的几种方式

Eclipse魅力之一就是支持可扩展的插件,来丰富自身的功能,这种方式也是建立在开源思想之上的。具体使用什么方式去安装插件,要看我们拿到的是什么。 1. 拿到的是一串URL,如http://subclips...

GordonNemo ⋅ 21分钟前 ⋅ 0

div图片叠加

css实现代码如下: <div style="position: relative;"><!--这个层为外面的父层,需设置相对位置样式--> <div style="position: absolute;"><!--子层,需设置绝对位置样式--> <i......

niithub ⋅ 22分钟前 ⋅ 0

作用域slot

如果父组件需要使用子组件中的内容怎么办,比如父组件需要控制子组件的显示 <div id="root"><child><template slot-scope="props"><h1>{{props.item}} <div>编辑</div></h1><......

金于虎 ⋅ 25分钟前 ⋅ 1

HongHu commonservice-eureka 项目构建过程

上一篇我们回顾了关于 spring cloud eureka的相关基础知识,现在我们针对于HongHu cloud的eureka项目做以下构建,整个构建的过程很简单,我会将每一步都构建过程记录下来,希望可以帮助到大家...

明理萝 ⋅ 28分钟前 ⋅ 1

xml和对象的相互转化

@Data//setter和getter方法,toString和equals,hashcode方法@EqualsAndHashCode//代表重写equals和hashcode方法@XmlAccessorType(XmlAccessType.FIELD)public class Classroom {@X......

拐美人 ⋅ 28分钟前 ⋅ 0

tableView cell的高度 分组头部尾部的高度 自适应

@property (nonatomic) CGFloat rowHeight; // default is UITableViewAutomaticDimension@property (nonatomic) CGFloat sectionHeaderHeight; // default is UITableViewA......

娜一片蓝色星海 ⋅ 29分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部