文档章节

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

tbaby
 tbaby
发布于 2015/04/15 10:12
字数 728
阅读 166
收藏 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
[书评有奖活动]HTML 5,你准备好了吗??

话题讨论:富媒体时代的Web内容新规范——HTML 5,你准备好了吗? 活动奖励:针对上述问题跟帖回答或围绕下面的3本图书跟帖讨论,我们会在讨论结束后,抽选10名网友每人赠送一本图书作为奖励...

老枪
2011/03/18
2.4K
73
机器学习的最佳学习路线原来只有四步

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

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

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

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

没有更多内容

加载失败,请刷新页面

加载更多

搭建Git服务器

Windows平台下搭建Git服务器 1、在自己电脑搭建Git服务器,且只有自己的电脑能访问。 即使是自己一个人在开发代码也强烈建议使用Git来管理代码。当然也可以只使用本地Git仓库的形式来管理代码...

国仔饼
20分钟前
0
0
百万并发下的Nginx优化,看这一篇就够了!

本文作者主要分享在 Nginx 性能方面的实践经验,希望能给大家带来一些系统化思考,帮助大家更有效地去做 Nginx。 优化方法论 我重点分享如下两个问题: 保持并发连接数,怎么样做到内存有效使...

JackFace
22分钟前
1
0
中学生读《皮囊》有感相关体会4300字[图]

中学生读《皮囊》有感相关体会4300字[图]: 我们时常知道从哪里来,但很少知道自己要到哪里去,因为我们经常不认识自己,又怎能看见自己皮囊下最真实的面目?——题记 满怀欣喜去迎接五一,应...

原创小博客
31分钟前
2
0
java_集合

非并发集合 并发集合

grace_233
33分钟前
2
0
正则表达式匹配不包含

^((?!xxx).)*$

安小乐
44分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部