文档章节

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

tbaby
 tbaby
发布于 2015/04/15 10:12
字数 728
阅读 165
收藏 1

使用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
0
Oracle数据库学习的福利来啦——最佳入门经验分享

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

让往事随风
2016/04/13
34
0
javascript——从「最被误解的语言」到「最流行的语言」

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

modernizr
2014/05/20
1K
12
机器学习的最佳学习路线原来只有四步

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

ufv59to8
05/12
0
0
《Knockout应用开发指南》系列技术文章整理收藏

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

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

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周三乱弹 —— 程序员左轮轮盘赌注

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享Bon Jovi的单曲《You Give Love a Bad Name》 《You Give Love a Bad Name》- Bon Jovi 手机党少年们想听歌,请使劲儿戳(这...

小小编辑
31分钟前
448
11
oracle 用户密码过期-ORA-28001: 口令已经失效

oracle 用户密码过期-ORA-28001: 口令已经失效 操作步骤: [BEGIN] 2018-10-23 17:25:43Last login: Mon Sep 3 08:46:32 2018 from 10.2.202.12#登陆数据库#(1)在命令窗口中输入:...

诺岚
35分钟前
1
0
[转载]Yarn作业提交流程

1、yarn简述 yarn是一个资源调度平台,负责为运算程序提供服务器运算资源,相当于一个分布式操作系统平台,而mapreduce等运算程序则相当于运行与操作系统之上的应用程序。yarn在hadoop2.x系列...

hnairdb
39分钟前
0
0
WebSocketdemo

WebSocket是html5提供的一种在单个tcp连接上进行全双工通讯的协议。 Http协议是无状态、无连接的、单向的应用层协议,采用了请求响应模型,通信请求智能有客户端发起,服务端对请求做出应答处...

qiang123
45分钟前
1
0
谷歌推迟公布Google+漏洞遭参议员不满

参议院商务委员会主席约翰·图恩和另外两位参议员杰瑞·莫兰和罗杰·维克发出信函,要求谷歌解释推迟披露此问题的原因。信中称:“谷歌如果要保持或重获用户对其服务的信任,就必须在公众和立...

linuxCool
53分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部