利用Yahoo!免费获取可重复使用的CSS-Web标准教程

01扬帆远航

01扬帆远航

2016-02-19 18:55

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的利用Yahoo!免费获取可重复使用的CSS-Web标准教程教程,一起来看看吧!超容易上手~

浏览器支持

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

CSS工具的一个主要特性就是它的分级提供了对A级浏览器的完美支持。分级浏览器支持纯粹是一个Yahoo!的分级,在它的网站上你可以看到完整的说明,它主要描述了在当今市场上的浏览器中,CSS的良好表现。

在这个在线表格中,浏览器被分为三个级别的浏览器支持(A、C和X)。A级是最高的支持级别。通过充分发挥现代Web标准的强大性能,YUI库发现,A级体验提供了高级的功能性和可视保真度。支持类别和相关文件使你能够切身体会到哪里支持CSS,但是它应该在每一种浏览器中都可用(通过可能的降级)。

可重复使用的CSS

YUI库中包括了三个CSS领域或特性,涉及格式化、字型介绍和以网格为基础的(列和行)版式。网站上用这些术语来描述这三个元素:

Page Grids:使你能够在所用模版容量范围内,嵌入一到四列的网格。

Fonts:提供跨浏览器的排版标准化和控制器。一般来说,它在完全支持用户(在浏览器内)对字体进行调整的同时,还提供了一致的字体和行高。

Reset:提供跨浏览器的HTML元素默认赋值的标准化。它也去除了浏览器中的共同默认表达,如对要强调元素使用粗体,这样是为了帮助保证对所有的字体的定义都是有意图的,并且元素始终用的是它们的语义含义,而不是习惯上的视觉表达。

在被安装了以后,YUI库下载中的每一个元素都可以在Web服务器的以下目录/文件中获得:

Page Grids: buildgridsgrids.css
Fonts: buildfontsfonts.css
Reset: build eset eset.css
你可以在自己的Web服务器上安装这些基础目录或者将它们置于你的站点内,以便根据需要引用它们。CSS的一个重要特性(除了免费之外)就是,它在发布之前,已经经过了彻底的检验和调试。让我们来更仔细地看一下实际操作中的CSS工具。

有网格的页面版式

以网格为基础的版式几乎是所有站点设计或页面版式的动力。过去,这一点常常通过HTML表格来完成,但是CSS为页面版式提供了巨大的力量和灵活性。页面网格提供的代码可以根据你的要求,利用列和行来建立页面。

在页面网格最基本的级别上,它提供了七种Web页面模版,其中六种定义了详细的主要内容/工具条版式;第七个模版定义了一个没有工具条的版式,主要内容占据了整个页面宽度。这些模版的名称如下:

yui-t1:包含一个位于左侧宽度为160px的工具条和一个宽度为570px的主要区域。
yui-t2:包含一个位于左侧宽度为180px的工具条和一个宽度为550px的主要区域。
yui-t3:包含一个位于左侧宽度为300px的工具条和一个宽度为430px的主要区域。
yui-t4:包含一个位于右侧宽度为180px的工具条和一个宽度为550px的主要区域。
yui-t5:包含一个位于右侧宽度为240px的工具条和一个宽度为490px的主要区域。
yui-t6:包含一个位于右侧宽度为300px的工具条和一个宽度为430px的主要区域。
yui-t7:包含一个宽度为750px的主要区域,没有工具条。

你可以结合(或编辑,如果你够大胆)这些模版来达到你的目的。列表A用第一种版式来安排一个页面的格局(注意:CSS工具安装在Web服务器的默认目录中)。

列表A

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

htmlhead
titleYahoo CSS Tools Example 1/title
link rel="stylesheet" type="text/css" href="build/grids/grids.css"
/head
body
div id="doc" class="yui-t2"
div id="hd"Page Header/div
div id="bd"
div id="yui-main"
div class="yui-b"Main Area/div
/divdiv class="yui-b"Left Column/div
/div
div id="ft"Page Footer/div
/div/body/html
HTML页面上的几个注释:

版式被赋予整个页面——主div标签被分配为yui-t2类。这说明采用的是第二种模版。

页面被分为页眉、主体和页脚区域。页眉被赋予标识符hd,主体为bd,页脚为ft。

页面的主体被分为左区域(如果模版支持的话)和主区域。两者都被分配为yui-b类,但是主区域在它的div标签中被附上了yui-main的标识符属性。

展开更多 50%)
分享

猜你喜欢

利用Yahoo!免费获取可重复使用的CSS-Web标准教程

Web开发
利用Yahoo!免费获取可重复使用的CSS-Web标准教程

假睫毛可以重复使用吗 重复使用假睫毛好吗

化妆
假睫毛可以重复使用吗 重复使用假睫毛好吗

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JDBC之代码重复使用

Web开发
JDBC之代码重复使用

假睫毛可以重复使用吗?

假睫毛 化妆 化妆技巧
假睫毛可以重复使用吗?

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

化妆棉可以重复使用吗

化妆棉 化妆工具 化妆品
化妆棉可以重复使用吗

压缩面膜可以重复使用吗

压缩面膜 面膜 护肤
压缩面膜可以重复使用吗

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

我想我爱你丶在乎了很久了

我想我爱你丶在乎了很久了

当修改final值时要重新编译类

当修改final值时要重新编译类
下拉加载更多内容 ↓