CSS浮动(float,clear)通俗讲解

 css  CSS浮动(float,clear)通俗讲解已关闭评论
9月 302016
 

网上看到的对css的float,clear讲的比较好的文章,分享下:

 

      很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。

       前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。

      

写在前面的话:

       由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解。

       如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你。

       小菜水平有限,本文仅仅是入门教程,不当之处请谅解!

       本文以div元素布局为例。

 

教程开始:

 

       首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的。如下图:

 

 

 

       可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素是独占一行的。

       注意,以上这些理论,是指标准流中的div。

       小菜认为,无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”。

       显然标准流已经无法满足需求,这就要用到浮动。      

       浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。

       例如,假设上图中的div2浮动,那么它将脱离标准流,但div1、div3、div4仍然在标准流当中,所以div3会自动向上移动,占据div2的位置,重新组成一个流。如图:

 

 

       从图中可以看出,由于对div2设置浮动,因此它不再属于标准流,div3自动上移顶替div2的位置,div1、div3、div4依次排列,成为一个新的流。又因为浮动是漂浮在标准流之上的,因此div2挡住了一部分div3,div3看起来变“矮”了。

       这里div2用的是左浮动(float:left;),可以理解为漂浮起来后靠左排列,右浮动(float:right;)当然就是靠右排列。这里的靠左、靠右是说页面的左、右边缘。

       如果我们把div2采用右浮动,会是如下效果:

 

 

       此时div2靠页面右边缘排列,不再遮挡div3,读者可以清晰的看到上面所讲的div1、div3、div4组成的流。

       目前为止我们只浮动了一个div元素,多个呢?

       下面我们把div2和div3都加上左浮动,效果如图:

 

 

       同理,由于div2、div3浮动,它们不再属于标准流,因此div4会自动上移,与div1组成一个“新”标准流,而浮动是漂浮在标准流之上,因此div2又挡住了div4。

       咳咳,到重点了,当同时对div2、div3设置浮动之后,div3会跟随在div2之后,不知道读者有没有发现,一直到现在,div2在每个例子中都是浮动的,但并没有跟随到div1之后。因此,我们可以得出一个重要结论:

       假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。

       div的顺序是HTML代码中div的顺序决定的。

       靠近页面边缘的一端是,远离页面边缘的一端是

 

 

       为了帮助读者理解,再举几个例子。

       假如我们把div2、div3、div4都设置成浮动,效果如下:

 

 

 

       根据上边的结论,跟着小菜理解一遍:先从div4开始分析,它发现上边的元素div3是浮动的,所以div4会跟随在div3之后;div3发现上边的元素div2也是浮动的,所以div3会跟随在div2之后;而div2发现上边的元素div1是标准流中的元素,因此div2的相对垂直位置不变,顶部仍然和div1元素的底部对齐。由于是左浮动,左边靠近页面边缘,所以左边是前,因此div2在最左边。

       假如把div2、div3、div4都设置成浮动,效果如下:

 

 

       道理和左浮动基本一样,只不过需要注意一下前后对应关系。由于是右浮动,因此右边靠近页面边缘,所以右边是前,因此div2在最右边。

       假如我们把div2、div4左浮动,效果图如下:

 

       依然是根据结论,div2、div4浮动,脱离了标准流,因此div3将会自动上移,与div1组成标准流。div2发现上一个元素div1是标准流中的元素,因此div2相对垂直位置不变,与div1底部对齐。div4发现上一个元素div3是标准流中的元素,因此div4的顶部和div3的底部对齐,并且总是成立的,因为从图中可以看出,div3上移后,div4也跟着上移,div4总是保证自己的顶部和上一个元素div3(标准流中的元素)的底部对齐

       至此,恭喜读者已经掌握了添加浮动,但还有清除浮动,有上边的基础清除浮动非常容易理解。

       经过上边的学习,可以看出:元素浮动之前,也就是在标准流中,是竖向排列的,而浮动之后可以理解为横向排列。

       清除浮动可以理解为打破横向排列。

       清除浮动的关键字是clear,官方定义如下:

 

       语法:

       clear : none | left | right | both

       取值:

       none  :  默认值。允许两边都可以有浮动对象

       left   :  不允许左边有浮动对象

       right  :  不允许右边有浮动对象

       both  :  不允许有浮动对象

 

       定义非常容易理解,但是读者实际使用时可能会发现不是这么回事。

       定义没有错,只不过它描述的太模糊,让我们不知所措。

       根据上边的基础,假如页面中只有两个元素div1、div2,它们都是左浮动,场景如下:

     此时div1、div2都浮动,根据规则,div2会跟随在div1后边,但我们仍然希望div2能排列在div1下边,就像div1没有浮动,div2左浮动那样。

     这时候就要用到清除浮动(clear),如果单纯根据官方定义,读者可能会尝试这样写:在div1的CSS样式中添加clear:right;,理解为不允许div1的右边有浮动元素,由于div2是浮动元素,因此会自动下移一行来满足规则。

       其实这种理解是不正确的,这样做没有任何效果。看小菜定论:

       对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素。

       怎么理解呢?就拿上边的例子来说,我们是想让div2移动,但我们却是在div1元素的CSS样式中使用了清除浮动,试图通过清除div1右边的浮动元素(clear:right;)来强迫div2下移,这是不可行的,因为这个清除浮动是在div1中调用的,它只能影响div1,不能影响div2。

       根据小菜定论,要想让div2下移,就必须在div2的CSS样式中使用浮动。本例中div2的左边有浮动元素div1,因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素,这样div2就被迫下移一行。

      那么假如页面中只有两个元素div1、div2,它们都是右浮动呢?读者此时应该已经能自己推测场景,如下:

       此时如果要让div2下移到div1下边,要如何做呢?

       同样根据小菜定论,我们希望移动的是div2,就必须在div2的CSS样式中调用浮动,因为浮动只能影响调用它的元素。

       可以看出div2的右边有一个浮动元素div1,那么我们可以在div2的CSS样式中使用clear:right;来指定div2的右边不允许出现浮动元素,这样div2就被迫下移一行,排到div1下边。

 

       至此,读者已经掌握了CSS+DIV浮动定位基本原理,足以应付常见的布局。

       其实,万变不离其宗,只要读者用心体会,再复杂的布局都可以通过小菜总结的规律搞定。

 

写在后面的话:

 

       必须严正声明,CSS这块极其混乱,尤其是浏览器的兼容性问题,小菜水平有限,本文很可能有不当之处,望读者见谅。

       其实真不想写这么长的文章,可为了读者能够理解,总是不由自主的想多举些例子。

       为了减轻读者心理压力,本文没有任何CSS、HTML代码,因为现在很多教程上来就是一大堆CSS代码,看到就烦,别说细读了。

       最后预祝读者阅读愉快,开心掌握知识。

 

转自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

css中 border, margin, padding,Background,Font,属性简写速记说明

 css  css中 border, margin, padding,Background,Font,属性简写速记说明已关闭评论
9月 262016
 

以下文字来自msn官网,内容简明扼要,分享下:

Definition

Shorthand properties are CSS properties that let you set the values of several other CSS properties simultaneously. Using a shorthand property, a Web developer can write more concise and often more readable style sheets, saving time and energy.

The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. E. g. the CSSbackground property is a shorthand property that’s able to define the value of background-colorbackground-imagebackground-repeat, and background-position. Similarly, the most common font-related properties can be defined using the shorthand font, and the different margins around a box can be defined using the margin shorthand.

Tricky edge cases

Even if they are very convenient to use, there are a few edge cases to keep in mind when using them:

  1. A value which is not specified is set to its initial value. That sounds anecdotal, but it really means that it overrides previously set values. Therefore:

    background-color: red; background: url(images/bg.gif) no-repeat top right;

    will not set the color of the background to red but to background-color‘s default, transparent, as the second rule has precedence.

  2. Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword inherit can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keywordinherit.
  3. Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories:

    1. Shorthands handling properties related to edges of a box, like border-stylemargin or padding, always use a consistent 1-to-4-value syntax representing those edges:

      border1.png The 1-value syntax: border-width: 1em — The unique value represents all edges
      border2.png The 2-value syntax: border-width: 1em 2em — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.
      border3.png The 3-value syntax: border-width: 1em 2em 3em — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge
      border4.png

      The 4-value syntax: border-width: 1em 2em 3em 4em — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word trouble: TRBL)

    2. Similarly, shorthands handling properties related to corners of a box, like border-radius, always use a consistent 1-to-4-value syntax representing those corners:

      corner1.png The 1-value syntax: border-radius: 1em — The unique value represents all corners
      corner2.png The 2-value syntax: border-radius: 1em 2em — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.
      corner3.png The 3-value syntax: border-radius: 1em 2em 3em — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner
      corner4.png

      The 4-value syntax: border-radius: 1em 2em 3em 4em — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.

Background properties

A background with the following properties:

background-color: #000; background-image: url(images/bg.gif); background-repeat: no-repeat; background-position: top right;

Can be shortened to just one declaration:

background: #000 url(images/bg.gif) no-repeat top right;

(The shorthand form is actually the equivalent of the longhand properties above plus background-attachment: scroll and, in CSS3, some additional properties.)

Font properties

The following declarations:

font-style: italic; font-weight: bold; font-size: .8em; line-height: 1.2; font-family: Arial, sans-serif;

can be shortened to the following:

font: italic bold .8em/1.2 Arial, sans-serif;

This shorthand declaration is actually equivalent to the longhand declarations above plus font-variant: normal and font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3).

Border properties

With borders, the width, color, and style can be simplified into one declaration. For example,

border-width: 1px; border-style: solid; border-color: #000;

Can be written as

border: 1px solid #000;

Margin and Padding properties

Shorthand versions of margin and padding values work the same way. The following CSS declarations:

margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px;

are the same as the following declaration (note that the values are in clockwise order from top: top, right, bottom, then left (TRBL, the consonants in “trouble”))

margin: 10px 5px 10px 5px;

正确理解clear:both

 css  正确理解clear:both已关闭评论
9月 182016
 

学习css中的clear:both使用:

要注意以下几点: 
1、 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以)。 
2、 浮动元素后边的非浮动元素显示问题。 
3、 多个浮动方向一致的元素使用流式排列,此时要注意浮动元素的高度。 
4、子元素全为浮动元素的元素高度自适应问题。 

以下详细分析四个问题。 

一、浮动元素自动变块级元素 
首先说说块级元素和行内元素区别,简单的来说,块级元素独占一行,可以设置宽高以及边距,行内元素不会独占一行,设置宽高行距等不会起效。常见的块级元素有:h1~h6、p、div、ul、table,常见的行内元素有:span、a、input、select等。 

示例代码: 

复制代码

代码如下:


<div style=”height: 200px; width: 200px;”> 
<span style=”float: left; width: 150px; height: 150px; margin: 5px; padding: 5px; 
border: solid 1px red; background-color: Olive;”>浮动元素span</span> 
</div> 
<div style=”height: 200px; width: 200px;”> 
<span style=”width: 150px; height: 150px; margin: 5px; padding: 5px; border: solid 1px red; 
background-color: Olive;”>浮动元素span</span> 
</div> 

效果如下: 
<img height="279" alt="" src="http://www.jb51.net/do/uploads/allimg/101227/1515420.png" width="230" title="正确理解 clear:both” style=”border:1px solid #CCCCCC;” /> 
二、浮动元素后的非浮动元素问题 
浮动元素后边的元素若是非浮动行内元素且因为定位产生重叠时,行内元素边框、背景和内容都在该浮动元素“之上”显示,若是非浮动块级元素跟在浮动元素后边且在定位后产生重叠时,该块级元素边框和背景在该浮动元素“之下”显示,只有内容在浮动元素不在浮动元素“之下”显示。 
示例代码如下: 

复制代码

代码如下:


<div style=”width: 600px; height: 500px; border: solid 1px blue; background-color: yellow;”> 
<div style=”float: left; width: 250px; height: 250px; border: solid 1px Aqua; background-color: gray; 
margin: 10px 0 0 10px;”> 
浮动DIV</div> 
<div style=”background-color: red; border: solid 1px green; width: 300px; height: 150px;”> 
跟在浮动元素后边的DIV</div> 
<span style=”background-color: red; border: solid 1px green; margin: 0 0 0 -50px;”> 
跟在浮动元素后边的span</span> 
</div> 

效果图如下: 
<img height="521" alt="" src="http://www.jb51.net/do/uploads/allimg/101227/1515421.png" width="621" title="正确理解 clear:both” style=”border:1px solid #CCCCCC;” /> 

从图中可以看出来,跟在浮动div后边的div背景以及边框被压在了底下,内容却没有,span整体都在浮动div之上显示。 

不过在ie6这个效果却很怪异,如图:

<img height="521" alt="" src="http://www.jb51.net/do/uploads/allimg/101227/1515422.png" width="625" title="正确理解 clear:both” style=”border:1px solid #CCCCCC;” />
浮动元素没有压在非浮动div之上,反而把span压住了。
三、多个并列同方向浮动元素高度不一致问题 
多个同方向浮动元素若是高度不一致的话,很可能会得到意外的效果,跟你想要的布局差别很大。多个同方向浮动元素一般是按照流式布局,一行满了则自动换行,也就是类似于以下效果: 
<img height="417" alt="" src="http://www.jb51.net/do/uploads/allimg/101227/1515423.png" width="613" title="正确理解 clear:both” style=”border:1px solid #CCCCCC;” /> 
但各个浮动元素高度不一致的话效果很可能出现下边的情况: 
<img height="413" alt="" src="http://www.jb51.net/do/uploads/allimg/101227/1515424.png" width="618" title="正确理解 clear:both” style=”border:1px solid #CCCCCC;” /> 
很意外吧,主要排列到元素7的时候,一行已经显示不下了,所以要换行,但此处换行并不是从行头开始,而是从元素5那开始,因为元素5比元素6高很多导致。 
四、子元素全为浮动元素高度自适应问题 
由于元素浮动后脱离了文档流,所以父元素是无法根据元素来自适应的。解决此问题最常用的办法由两种,第一种就是在所有浮动元素后加: 
<div style=”clear:both;height:0px;”></div> 
第二种办法,使用万能clear: 

复制代码

代码如下:


.clearfix:after 

visibility: hidden; 
display: block; 
font-size: 0; 
content: “.”; 
clear: both; 
height: 0; 

* html .clearfix 

zoom: 1; 

*:first-child + html .clearfix 

zoom: 1; 

然后在你需要自适应的元素上加上class=” clearfix”即可。详细请参考: 

你真的理解clear:both吗 
在开发中,从美工MM给你Html代码中,肯定能经常看”<div style=”clear:both;”></div>”这样的代码,但是你真的能明白它是做什么用的吗? 
如: 

复制代码

代码如下:


<div style=”border:2px solid red;”> 
<div style=”float:left;width:80px;height:80px;border:1px solid blue;”>TEST DIV</div> 
<div style=”clear:both;”></div> 
</div> 

你可以将此部分代码放到一个HTML页面看看效果,然后在去掉”<div style=”clear:both;”></div>”看一下效果,就知道这句话的作用了。 
如图: 
(1)有clear:both的: 

 

你真的理解clear:both吗?

 

2)无clear:both

你真的理解clear:both吗?
这样看,应该就一目了然了:原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开,所以有时候,我们在将内部div都设置成浮动之后,就会发现,外层div的背景没有显示,原因就是外层的div没有撑开,太小,所以能看到的背景仅限于一条线。 

但这种办法就是最好了的吗? 
我这么说,当然答案就不是了。可以采用通过Hack实现: 

复制代码

代码如下:


<style> 
.clearfix:after{ 
visibility: hidden; 
display: block; 
font-size: 0; 
content: “.”; 
clear: both; 
height: 0; 

* html .clearfix{zoom: 1;} 
*:first-child + html .clearfix{zoom: 1;} 
</style> 
<div class=”clearfix” style=”border: 2px solid red;”> 
<div style=”float: left; width: 80px; height: 80px; border: 1px solid blue;”> 
TEST DIV</div> 
</div> 

看完解决办法,咱们来看里边的原理: 
(1)、首先是利用:after这个伪类来兼容FF、Chrome等支持标准的浏览器。 
:after伪类IE不支持,它用来和content属性一起使用设置在对象后的内容,例如: 
a:after{content:”(link)”;} 
这个CSS将会让a标签内的文本后边加上link文本文字。 

(2)、利用“* html”这个只有IE6认识的选择符,设置缩放属性“zoom: 1;”实现兼容IE6。 
(3)、利用“*:first-child + html”这个只有IE7认识的选择符,设置缩放属性“zoom: 1;”实现兼容IE7。

转自:http://blog.sina.com.cn/s/blog_709475a10100wkdj.html

box-sizing属性概述

 css  box-sizing属性概述已关闭评论
9月 122016
 

网上找到的关于box-sizing描述的比较清楚的资料,记录下:

box-sizing的CSS属性是用来改变默认的CSS框模型,用于计算元素的宽度和高度。它可以使用这个属性来模拟浏览器的行为不正确支持CSS盒模型的规范。

说到 IE 的 bug,在 IE6以前的版本中,IE对盒模型的解析出现一些问题,跟其它浏览器不同,将 border 与 padding 都包含在 width 之内。而另外一些浏览器则与它相反,是不包括border和padding的。

在我们开发的过程中会发现,有时候,如果对页面中的大区域进行设置时,将border、padding计算到width和height之内,反而更灵活。但W3C的 CSS2.1规范却规定了他们并不能被包含其中。考虑到这个问题,css3中引入了一个新的属性:box-sizing,它具有“content-box”和”border-box“两个值。

box-sizing:content-box

当我们设置 box-sizing: content-box; 时,浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准,当它定义width和height时,它的宽度不包括border和padding。

box-sizing:border-box

当我们设置box-sizing: border-box; 时,浏览器对盒模型的解释与 IE6之前的版本相同,当它定义width和height时,border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和 “height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负,必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。

box-sizing属性

初始值:content-box
适用于:接受的所有元素的宽度或高度
继承:无
媒体:visual
指定的:as specified
动画:no
规范秩序:独特的无歧义的正式语法定义的顺序
box-sizing属性语法

Formal syntax: content-box | padding-box | border-box
box-sizing: content-box
box-sizing: padding-box
box-sizing: border-box
box-sizing: inherit
box-sizing属性取值

content-box

这是默认样式指定CSS标准。测量winth和height属性只包括的内容,但不是border, margin, 或者 padding。

padding-box

winth和height属性包括padding的大小,不包括border和margin

border-box

winth和height属性包括padding和border,但不是margin。这是盒模型的文档时,Internet Explorer使用Quirks模式。

box-sizing属性示例

/* support Firefox, WebKit, Opera and IE8+ */
.example {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

用 CSS 实现三角形与平行四边形

 css  用 CSS 实现三角形与平行四边形已关闭评论
12月 242015
 

最近项目中看到个使用css实现三角形的功能,收集下相关资料:

1. 转自:http://jerryzou.com/posts/use-css-to-paint-triangle-and-parallelogram/

2. 更牛B的网站在这里: https://css-tricks.com/examples/ShapesOfCSS/ 供参考

最近在逛某个技术网站的时候,感觉文章关键词上的样式好酷炫啊。于来张截图:

分页样式的截图

你在首页的底部也可以看到这样一个分页栏;是不是看上去还不错?下面就来看看这是如何实现的吧~

第一种方法:利用border

第一种方法是借助border属性 hack 出三角形,然后通过一个矩形拼接两个三角形最终制造出一个平行四边形。为什么使用border可以产生三角形呢?先来看看一张图片:

CSS triangle

看了图中的三个小图形的变化过程,你应该已经清楚了一半。其实 hack 出三角形只需要两个条件,第一,元素本身的长宽为0;其次,将不需要的部分通过 border-color 来设置隐藏。通过类似的方法,你还可以创造出梯形,上图中的三个图形的代码如下。(另附 CodePen 示例

#first { width: 20px; height: 20px; border-width: 10px; border-style: solid; border-color: red green blue brown; } #second { width: 0; height: 0; border-width: 10px; border-style: solid; border-color: red green blue brown; } #third { width: 0; height: 0; border-width: 10px; border-style: solid; border-color: red transparent transparent transparent; }

接下来就要考虑如何拼接出一个平行四边形了。在border法中,它由三部分组成,分别是左三角形、矩形、右三角形。如果每次绘制平行四边形都要创建三个元素显然过于麻烦了,所以在这里:before和:after伪元素是个不错的选择。下面我们实现一下这样的效果:

three parallelogram

为了将三角形与矩形无缝拼接到一起,多处属性要保持一致,所以使用类似 Less, Sass, Stylus 等 CSS 预处理器来写这段代码会更容易维护,下面给出 Scss 版本的代码。(另附 CodePen 链接

//三角形的宽高 $height: 24px; $width: 12px; //对平行四边形三部分的颜色进行赋值 @mixin parallelogram-color($color) { background: $color; &:before { border-color: transparent $color $color transparent; } &:after { border-color: $color transparent transparent $color; } } //单个三角形的样式 @mixin triangle() { content: ''; display: block; width: 0; height: 0; position: absolute; border-style: solid; border-width: $height/2 $width/2; top: 0; } //平行四边形的样式 .para { display: inline-block; position: relative; padding: 0 10px; height: $height; line-height: $height; margin-left: $width; color: #fff; &:after { @include triangle(); right: -$width; } &:before { @include triangle(); left: -$width; } @include parallelogram-color(red); }

需要注意的是,如果通过 $height、$width 设置的三角形斜率太小或太大都有可能造成渲染出锯齿,所以使用起来要多多测试一下不同的宽高所得到的视觉效果如何。

第二种方法:利用transform

使用transform来实现平行四边形的方法是我在逛去啊的时候看到的,效果大概是这个样子:

去啊中的平行四边形

看到之后觉得好神奇啊,原来还可以只有平行四边形的外轮廓。(因为方法一只能创造填充效果的平行四边形)实现起来非常简单,主要是借助了transform: skew(…),下面就来看看源码吧。

<style> .city { display: inline-block; padding: 5px 20px; border: 1px solid #44a5fc; color: #333; transform: skew(-20deg); } </style> <div class="city">上海</div>

于是我们得到了这样的效果:

skew shanghai

看到图片的你一定是这样想的:

坑爹呢这是

别着急嘛,我们的确是把整个 div 进行了歪曲,导致中间的文字也是倾斜的,而这显然不是我们所要的效果。所以我们需要加一个内层元素,并对内层元素做一次逆向的歪曲,从而得到我们想要的效果:

normal shanghai

实现代码如下,另附 CodePen 示例

<style> .city { display: inline-block; padding: 5px 20px; border: 1px solid #44a5fc; color: #333; transform: skew(-20deg); } .city div { transform: skew(20deg); } </style> <div class="city"> <div>上海</div> </div>

总结

第一种方法使用 border 属性 hack 出三角形,并通过对三个元素进行拼接最终实现了平行四边形;而第二种方法则通过 transform: skew来得到平行四边形。总体来说,第二种方法相对于第一种代码量小得多,而且也很好理解。唯一的不足是无法构造像本站的分页中所使用的梯形。希望本文对各位有所帮助。

LESS CSS 框架简介—使用 LESS 简化层叠样式表(CSS)的编写

 css  LESS CSS 框架简介—使用 LESS 简化层叠样式表(CSS)的编写已关闭评论
12月 232015
 

网上找到的一篇介绍的一篇通俗易懂的介绍less使用的文章,分享下:

简介

CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中。HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义。

作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。LESS 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。

LESS 原理及使用方式

本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。下面是一个简单的例子:

清单 1. LESS 文件
 @color: #4D926F; 

 #header { 
  color: @color; 
 } 
 h2 { 
  color: @color; 
 }

经过编译生成的 CSS 文件如下:

清单 2. CSS 文件
 #header { 
  color: #4D926F; 
 } 
 h2 { 
  color: #4D926F; 
 }

从上面的例子可以看出,学习 LESS 非常容易,只要你了解 CSS 基础就可以很容易上手。

LESS 可以直接在客户端使用,也可以在服务器端使用。在实际项目开发中,我们更推荐使用第三种方式,将 LESS 文件编译生成静态 CSS 文件,并在 HTML 文档中应用。

客户端

我们可以直接在客户端使用 .less(LESS 源文件),只需要从 http://lesscss.org下载 less.js 文件,然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码:

<link rel="stylesheet/less" type="text/css" href="styles.less">

LESS 源文件的引入方式与标准 CSS 文件引入方式一样:

<link rel="stylesheet/less" type="text/css" href="styles.less">

需要注意的是:在引入 .less 文件时,rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是:LESS 源文件一定要在 less.js 引入之前引入,这样才能保证 LESS 源文件正确编译解析。

服务器端

LESS 在服务器端的使用主要是借助于 LESS 的编译器,将 LESS 源文件编译生成最终的 CSS 文件,目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS,安装成功后就可以在 node 环境中对 LESS 源文件进行编译。

在项目开发初期,我们无论采用客户端还是服务器端的用法,我们都需要想办法将我们要用到的 CSS 或 LESS 文件引入到我们的 HTML 页面或是桥接文件中,LESS 提供了一个我们很熟悉的功能— Importing。我们可以通过这个关键字引入我们需要的 .less 或 .css 文件。 如:

@import “variables.less”;

.less 文件也可以省略后缀名,像这样:

@import “variables”;

引入 CSS 同 LESS 文件一样,只是 .css 后缀名不能省略。

使用编译生成的静态 CSS 文件

我们可以通过 LESS 的编译器,将 LESS 文件编译成为 CSS 文件,在 HTML 文章中引入使用。这里要强调的一点,LESS 是完全兼容 CSS 语法的,也就是说,我们可以将标准的 CSS 文件直接改成 .less 格式,LESS 编译器可以完全识别。

语法

变量

LESS 允许开发者自定义变量,变量可以在全局样式中使用,变量使得样式修改起来更加简单。

我们可以从下面的代码了解变量的使用及作用:

清单 3 LESS 文件
 @border-color : #b5bcc7; 

 .mythemes tableBorder{ 
   border : 1px solid @border-color; 
 }

经过编译生成的 CSS 文件如下:

清单 4. CSS 文件
 .mythemes tableBorder { 
  border: 1px solid #b5bcc7; 
 }

从上面的代码中我们可以看出,变量是 VALUE(值)级别的复用,可以将相同的值定义成变量统一管理起来。

该特性适用于定义主题,我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义,这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET(重置样式表),在 Web 开发中,我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为,这里可以使用 LESS 的变量特性,这样就可以在不同的项目间重用样式表,我们仅需要在不同的项目样式表中,根据需求重新给变量赋值即可。

LESS 中的变量和其他编程语言一样,可以实现值的复用,同样它也有生命周期,也就是 Scope(变量范围,开发人员惯称之为作用域),简单的讲就是局部变量还是全局变量的概念,查找变量的顺序是先在局部定义中找,如果找不到,则查找上级定义,直至全局。下面我们通过一个简单的例子来解释 Scope。

清单 5. LESS 文件
 @width : 20px; 
 #homeDiv { 
   @width : 30px; 
   #centerDiv{ 
       width : @width;// 此处应该取最近定义的变量 width 的值 30px 
              } 
 } 
 #leftDiv { 
     width : @width; // 此处应该取最上面定义的变量 width 的值 20px 

 }

经过编译生成的 CSS 文件如下:

清单 6. CSS 文件
 #homeDiv #centerDiv { 
  width: 30px; 
 } 
 #leftDiv { 
  width: 20px; 
 }

Mixins(混入)

Mixins(混入)功能对用开发者来说并不陌生,很多动态语言都支持 Mixins(混入)特性,它是多重继承的一种实现,在 LESS 中,混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS,就像在当前 CLASS 中增加一个属性一样。

我们先简单看一下 Mixins 在 LESS 中的使用:

清单 7. LESS 文件
// 定义一个样式选择器
 .roundedCorners(@radius:5px) { 
 -moz-border-radius: @radius; 
 -webkit-border-radius: @radius; 
 border-radius: @radius; 
 } 
 // 在另外的样式选择器中使用
 #header { 
 .roundedCorners; 
 } 
 #footer { 
 .roundedCorners(10px); 
 }

经过编译生成的 CSS 文件如下:

清单 8. CSS 文件
 #header { 
 -moz-border-radius:5px; 
 -webkit-border-radius:5px; 
 border-radius:5px; 
 } 
 #footer { 
 -moz-border-radius:10px; 
 -webkit-border-radius:10px; 
 border-radius:10px; 
 }

从上面的代码我们可以看出:Mixins 其实是一种嵌套,它允许将一个类嵌入到另外一个类中使用,被嵌入的类也可以称作变量,简单的讲,Mixins 其实是规则级别的复用。

Mixins 还有一种形式叫做 Parametric Mixins(混入参数),LESS 也支持这一特性:

清单 9. LESS 文件
// 定义一个样式选择器
 .borderRadius(@radius){ 
 -moz-border-radius: @radius; 
 -webkit-border-radius: @radius; 
 border-radius: @radius; 
 } 
 // 使用已定义的样式选择器
 #header { 
 .borderRadius(10px); // 把 10px 作为参数传递给样式选择器
 } 
 .btn { 
 .borderRadius(3px);// // 把 3px 作为参数传递给样式选择器

 }

经过编译生成的 CSS 文件如下:

清单 10. CSS 文件
 #header { 
 -moz-border-radius: 10px; 
 -webkit-border-radius: 10px; 
 border-radius: 10px; 
 } 
 .btn { 
 -moz-border-radius: 3px; 
 -webkit-border-radius: 3px; 
 border-radius: 3px; 
 }

我们还可以给 Mixins 的参数定义一人默认值,如

清单 11. LESS 文件
.borderRadius(@radius:5px){ 
 -moz-border-radius: @radius; 
 -webkit-border-radius: @radius; 
 border-radius: @radius; 
 } 
 .btn { 
 .borderRadius; 
 }

经过编译生成的 CSS 文件如下:

清单 12. CSS 文件
 .btn { 
 -moz-border-radius: 5px; 
 -webkit-border-radius: 5px; 
 border-radius: 5px; 
 }

像 JavaScript 中 arguments一样,Mixins 也有这样一个变量:@arguments。@arguments 在 Mixins 中具是一个很特别的参数,当 Mixins 引用这个参数时,该参数表示所有的变量,很多情况下,这个参数可以省去你很多代码。

清单 13. LESS 文件
 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ 
 -moz-box-shadow: @arguments; 
 -webkit-box-shadow: @arguments; 
 box-shadow: @arguments; 
 } 
 #header { 
 .boxShadow(2px,2px,3px,#f36); 
 }

经过编译生成的 CSS 文件如下:

清单 14. CSS 文件
 #header { 
 -moz-box-shadow: 2px 2px 3px #FF36; 
 -webkit-box-shadow: 2px 2px 3px #FF36; 
 box-shadow: 2px 2px 3px #FF36; 
 }

Mixins 是 LESS 中很重要的特性之一,我们这里也写了很多例子,看到这些例子你是否会有这样的疑问:当我们拥有了大量选择器的时候,特别是团队协同开发时,如何保证选择器之间重名问题?如果你是 java 程序员或 C++ 程序员,我猜你肯定会想到命名空间 Namespaces,LESS 也采用了命名空间的方法来避免重名问题,于是乎 LESS 在 mixins 的基础上扩展了一下,看下面这样一段代码:

清单 15. LESS 文件
 #mynamespace { 
 .home {...} 
 .user {...} 
 }

这样我们就定义了一个名为 mynamespace 的命名空间,如果我们要复用 user 这个选择器的时候,我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user。

嵌套的规则

在我们书写标准 CSS 的时候,遇到多层的元素嵌套这种情况时,我们要么采用从外到内的选择器嵌套定义,要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写:

清单 16. HTML 片段
 <div id="home"> 
 <div id="top">top</div> 
 <div id="center"> 
 <div id="left">left</div> 
 <div id="right">right</div> 
 </div> 
 </div>
清单 17. LESS 文件
 #home{ 
   color : blue; 
   width : 600px; 
   height : 500px; 
   border:outset; 
   #top{ 
        border:outset; 
        width : 90%; 
   } 
   #center{ 
        border:outset; 
        height : 300px; 
        width : 90%; 
        #left{ 
          border:outset; 
          float : left; 
  width : 40%; 
        } 
        #right{ 
          border:outset; 
          float : left; 
  width : 40%; 
        } 
    } 
 }

经过编译生成的 CSS 文件如下:

清单 18. CSS 文件
 #home { 
  color: blue; 
  width: 600px; 
  height: 500px; 
  border: outset; 
 } 
 #home #top { 
  border: outset; 
  width: 90%; 
 } 
 #home #center { 
  border: outset; 
  height: 300px; 
  width: 90%; 
 } 
 #home #center #left { 
  border: outset; 
  float: left; 
  width: 40%; 
 } 
 #home #center #right { 
  border: outset; 
  float: left; 
  width: 40%; 
 }

从上面的代码中我们可以看出,LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的,这样使我们的样式表书写更加简洁和更好的可读性。同时,嵌套规则使得对伪元素的操作更为方便。

清单 19. LESS 文件
a { 
 color: red; 
 text-decoration: none; 
 &:hover {// 有 & 时解析的是同一个元素或此元素的伪类,没有 & 解析是后代元素
  color: black; 
  text-decoration: underline; 
 } 
 }

经过编译生成的 CSS 文件如下:

清单 20. CSS 文件
 a { 
 color: red; 
 text-decoration: none; 
 } 
 a:hover { 
 color: black; 
 text-decoration: underline; 
 }

运算及函数

在我们的 CSS 中充斥着大量的数值型的 value,比如 color、padding、margin 等,这些数值之间在某些情况下是有着一定关系的,那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢?我们来看这段代码:

清单 21 . LESS 文件
 @init: #111111; 
 @transition: @init*2; 
 .switchColor { 
 color: @transition; 
 }

经过编译生成的 CSS 文件如下:

清单 22. CSS 文件
 .switchColor { 
  color: #222222; 
 }

上面的例子中使用 LESS 的 operation 是 特性,其实简单的讲,就是对数值型的 value(数字、颜色、变量等)进行加减乘除四则运算。同时 LESS 还有一个专门针对 color 的操作提供一组函数。下面是 LESS 提供的针对颜色操作的函数列表:

 lighten(@color, 10%); // return a color which is 10% *lighter* than @color 
 darken(@color, 10%); // return a color which is 10% *darker* than @color 
 saturate(@color, 10%); // return a color 10% *more* saturated than @color 
 desaturate(@color, 10%);// return a color 10% *less* saturated than @color 
 fadein(@color, 10%); // return a color 10% *less* transparent than @color 
 fadeout(@color, 10%); // return a color 10% *more* transparent than @color 
 spin(@color, 10); // return a color with a 10 degree larger in hue than @color 
 spin(@color, -10); // return a color with a 10 degree smaller hue than @color

PS: 上述代码引自 LESS CSS 官方网站,详情请见 http://lesscss.org/#-color-functions

使用这些函数和 JavaScript 中使用函数一样。

清单 23 LESS 文件
init: #f04615; 
 #body { 
  background-color: fadein(@init, 10%); 
 }

经过编译生成的 CSS 文件如下:

清单 24. CSS 文件
 #body { 
  background-color: #f04615; 
 }

从上面的例子我们可以发现,这组函数像极了 JavaScript 中的函数,它可以被调用和传递参数。这些函数的主要作用是提供颜色变换的功能,先把颜色转换成 HSL 色,然后在此基础上进行操作,LESS 还提供了获取颜色值的方法,在这里就不举例说明了。

LESS 提供的运算及函数特性适用于实现页面组件特性,比如组件切换时的渐入渐出。

Comments(注释)

适当的注释是保证代码可读性的必要手段,LESS 对注释也提供了支持,主要有两种方式:单行注释和多行注释,这与 JavaScript 中的注释方法一样,我们这里不做详细的说明,只强调一点:LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中,所以如果你的注释是针对样式说明的请使用多行注释。

LESS VS SASS

同类框架还有 SASS : http://sass-lang.com/, 与 LESS 相比,两者都属于 CSS 预处理器,功能上大同小异,都是使用类似程序式语言的方式书写 CSS, 都具有变量、混入、嵌套、继承等特性,最终目的都是方便 CSS 的书写及维护。

LESS 和 SASS 互相促进互相影响,相比之下 LESS 更接近 CSS 语法,更多两者之间的比较,请参考这篇帖子:https://gist.github.com/674726

结束语

本文提到的只是 LESS 的基本功能,更高级的功能如:字符串插值,服务器端使用配置,JavaScript 表达式,避免编译等可以参看 LESS 的官方网站。

LESS 以 CSS 语法为基础,又借用了很多我们熟知编程式语言的特性,这对于我们开发人员来讲学习成本几乎可以忽略,它在保留 CSS 语法的基础上扩展了更多实用的功能,LESS 为我们提供了一种新的编写样式表的方法,我们可以根据我们的项目特性选择使用 LESS 的部分特性,我们只需用很少的成本就可以换了很大的回报,一句话,Less is more,借助 LESS 可以更便捷的进行 Web 开发。

转自:http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/

CSS从大图中抠取小图完整教程(background-position应用)

 css, javascript  CSS从大图中抠取小图完整教程(background-position应用)已关闭评论
11月 162015
 

学习下使用css从大图中抠小图(display:positon使用),来自:http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111704.html

      相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象:网页中很多图片素材被合成在一张图片上。

       起初小菜模仿网站的时候,经常遇到这个现象,那时候也不知道这时什么技术,人家的整张图片素材不会利用,只能用ps切图,切成单个的再用。。。

       其实,这是一个非常简单的技术,就是因为想象的太难了,才一直找不到问题的关键。

       要想实现CSS抠图,只需要用到一个属性:background-position。

       按照字面理解,这个属性就是背景定位,先看看google网站的素材图,如下:

       假如小菜现在想做一个+1按钮,利用上边的素材图,普通状态显示A图,鼠标移上去显示后显示B图,实现这么一个动态效果。

       按钮是用来实现功能的,一般是用超链接响应单击事件,但是不能把背景图直接加在超链接上,那样就不叫样式啦,因为超链接的文本长度变化时,样式也变了。

       地球人一般的做法是,div里边套一个超链接,超链接负责实现功能,div负责装载背景图。html结构如下:

1 <div class="btn"> 2 <a href="http://www.kpdown.com">+1</a> 3 </div>

 

       有了html骨架,接下来就要写css样式啦。

       假如我们什么都不考虑,直接把整张图片设为背景,样式如下:

1 .btn{ 2  background:url(bg.png); 3 }

 

       效果如图:

       div是块级元素,默认是占一行的,这个先不用关心,但看到背景图重复了,这显然不是我们想要的,加上background-repeat:no-repeat;属性,改进样式如下:

1 .btn{ 2  background:url(bg.png); 3  background-repeat:no-repeat; 4 }

 

       这样就不重复了。

       div可以理解成一个矩形框,它的左上角是顶点,背景图片的顶点也是左上角,div加载背景图时,会把两个顶点重合,顶点的坐标是(0,0)。不理解的看图,很简单的。。。

 

       +1的小图片混杂在大图中,想提取出来,需要用background-position属性,这个属性相当于大图片不动,把div的顶点进行移动,移动到目标小图的顶点位置,如下图:

       这样一来,div中显示的就是小图了,但是,显示的还不仅仅是小图,而是图中阴影部分,怎么办呢?设置一下div的宽、高,让它和小图的宽、高一样就可以了呗!!

       再来看看background-position属性,它有两个参数,分别是水平方向移动的像素、竖直方向移动的像素,都用负数表示。大图不动,div移动,也只能是向右、向下移动,只要记住这两个方向移动的像素都用负数表示就行了!

       因此,只要找到小图相对于大图左上角顶点的水平移动像素、竖直移动像素就可以了。小菜也不用什么专业工具,用截图就很方便,从大图左上角顶点开始截,到小图顶点那停下来,一看像素就差不多了,然后再调试调试,基本就搞定。

       在本例中,A小图的位移是:-25px -374px,A小图尺寸是:24px 16px。因此,css样式如下:

复制代码
1 .btn{ 2  background:url(bg.png); 3  background-repeat:no-repeat; 4  background-position:-25px -374px; 5  height:16px; 6  width:24px; 7 }
复制代码

 

        效果如下:

        这样就算是把小图抠出来啦!简单吧!!

        先解释个问题,图片上有+1,而我又在超链上写了一个+1,这是因为很多时候文本内容不是写在图片上的,那样灵活性太差,文本就是文本,小菜为了给大家一个完整的演示,因此又写了一个+1,接下来就处理它!

        先把+1居中,居中分为水平居中和垂直居中,水平居中超链接,需要在div上设置text-align:center;,这个属性是对子节点而言的;垂直居中div中的超链接,只需要把a标签的line-height属性设成和div的高度一样即可。样式如下:

复制代码
 1 .btn{  2  background:url(bg.png);  3  background-repeat:no-repeat;  4  background-position:-25px -374px;  5  height:16px;  6  width:24px;  7  text-align:center;  8 }  9 .btn a{ 10  line-height:16px; 11 }
复制代码

 

        效果如下:

 

       接下来呢,还有问题,我们可以发现,只有当鼠标移到+1文本上时,鼠标才会变成手型,才能响应事件。

       这显然不是我们想要的,应该是鼠标移入图片时,确切的说是鼠标移入div时,就可以变成手型,也能响应事件。

       这也简单,只需要在a标签(超链接)上加display:block;属性即可。

       另外这个下划线比较碍眼,用text-decoration:none;属性去掉,很常见,就不多说了。

       样式如下:

复制代码
 1 .btn{  2  background:url(bg.png);  3  background-repeat:no-repeat;  4  background-position:-25px -374px;  5  height:16px;  6  width:24px;  7  text-align:center;  8 }  9 .btn a{ 10  line-height:16px; 11  display:block; 12  text-decoration:none; 13 }
复制代码

 

       接下来就剩最后一件事了,那就是鼠标移入的时候切换背景。

       本例是div里边套a标签,鼠标移入换背景,当然是指鼠标移入div,而且换背景也是换div的背景,可不是a标签的哦!!

       因此要在div标签上调用hover,div的样式是btn,因此写成.btn:hover{}。

       换背景还需要找到背景图片,这又需要抠小图了,也就是抠上边指出的B图。

       刚刚显示的是A小图,B小图和A小图在同一水平线上,因此竖直方向的移动像素是相同的,水平方向差不就是A小图的水平像素加上A小图的宽度。

       经过测试,B小图的位移是:-50px -374px,尺寸大小就不用关心了,肯定和A小图一样,不一样就没法做了。

       把B小图的定位background-position:-50px -374px;放在.btn:hover{}里即可。

       样式如下:

复制代码
 1 .btn{  2  background:url(bg.png);  3  background-repeat:no-repeat;  4  background-position:-25px -374px;  5  height:16px;  6  width:24px;  7  text-align:center;  8 }  9 .btn a{ 10  line-height:16px; 11  display:block; 12  text-decoration:none; 13 } 14 .btn:hover{ 15  background-position:-50px -374px; 16 }
复制代码

 

        最终效果-鼠标移入之前:

   

        最终效果-鼠标移入之后:

  

       好啦,教程到这就结束了,小菜只是简单的演示了一个完整的制作流程,中间还有很多细节问题,比如浏览器兼容、CSS优化等等,这就需要读者自己探索了。

       其实小菜一直在说的CSS抠图,真正的技术名叫CSS Sprite技术,国人习惯叫CSS精灵。

       这种技术有好处也有坏处,好处是由于图片都放在一起,请求时只需请求一张图片,减少了与服务器的交互次数,还可以解决hover延迟加载的问题。坏处就是不好控制,扩展性不太好,以后有改动,可谓是牵一发而动全身,而且有时会因为屏幕分辨率不同出现背景断裂现象。

20分钟打造你的Bootstrap站点

 javascript  20分钟打造你的Bootstrap站点已关闭评论
8月 062015
 

一篇介绍bootstrap的入门文章,强烈推荐

这篇教程旨在让你在20分钟内学会使用twitter bootstrap创建一个站点。看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面,了解栅格系统,并且能够使用bootstrap导航、导航条和了解响应式设计的基础。这些全部都是使用twitter bootstrap所需要具备的知识。

在线查看DEMO

首先我们需要说的是twitter bootstrap是非常优秀的一个前端开源框架,它为所有的组键都提供了详细的用例,让你能够轻易地通过复制黏贴而附加到你的设计中。查阅官方文档可以点击这里

如果您对英文有恐惧感,你可以点击这里阅读中文版本。

——大漠

基本的HTML模板

我们需要以一个基本的HTML模板,这样我们能够把所需要的bootstrap文件包含进来。下面就是我们twitter bootstrap项目的开头,复制这些代码到一个文件中并将其命名为index.html。

<!DOCTYPE html> <head> <title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title> <style type='text/css'> body { background-color: #CCC; } </style> </head> <body> </body> </html> 

这段代码中我们已经添加了一些CSS使页面的背景呈亮灰色,因为这样我们能够轻易地在我们的设计中看见不同的列,使它更加容易理解。

引入twitter bootstrap文件

为了使用twitter bootstrap我们仅仅需要把一个文件引入到我们的模板当中来,引入文件有很多种方法,如果你想了解这些方法请查阅相关文档。

基于本教程的出发点,我们将会通过CDN来引入bootstrap-combined.min.css文件而不需要下载任何的文件。

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> 

它能够使所有的twitter bootstrap CSS在我们的模板中生效。

Twitter Bootstrap的容器

bootstrap的container类是非常有用的,它能在页面中创建一个居中的区域,然后我们能够把其他位置的内容放到里面。container类等价于创建了一个具有静态宽度并且magin值为auto的一个居中的div框。twitter bootstrap的 container类的优点在于它是响应式的,它会以当前屏幕的宽度为基础计算出最佳的宽度予以实用。

在body标签中,使用container类创建一个div。它会作为页面主要的放置其他代码的外层包裹。

如果你调整这个DIV的高度并将其背景颜色设置为白色,你所看到的效果会是这样:

Bootstrap

标题和导航

现在我们已经有一个地方可以添加额外的HTML代码,我们可以添加标题文本然后再创建站点的主要导航条。

加入如下的文本或者你选择的文字到container类的div标签当中。

<h1>TWITTER BOOTSTRAP TUTORIAL</h1> 

现在并没有多少新的东西,这仅仅是一个标题,让我们转移到更有趣的方面,twitter bootstrap导航。

Bootstrap 有一个nav类让我们能够创建各种各样的导航元素,你可以在h1标签之后加入如下的代码。

<div class='navbar navbar-inverse'> <div class='nav-collapse' style="height: auto;"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page One</a></li> <li><a href="#">Page Two</a></li> </ul> </div> </div> 

navbar相关的类拥有导航条所有的样式,添加navbar-inverse类将会应用一个很酷的黑色风格,这是一个twitter bootstrap的常见搭配。我建议在这个样式的基础上进行拓展从而创造你的独一无二的导航。但在这个教程中我们仍然会使用基础的bootstrap样式。

在类为navbar的DIV当中,我们添加另一个类为nav-collapse的DIV并为其添加行内样式height:auto;这是告诉bootstrap当这个页面在小于970px宽度的浏览器窗口当中时,它会提供一个压缩的切换视图。

如果你保存了index.html文件然后在浏览器中打开,当你调整浏览器窗口的宽度时你就能够看到这个变化,如图所示。

大于979px

Bootstrap

小于979px

Bootstrap

另外,我们可以添加nav类到一个HTML无序列表元素中以便从bootstrap CSS文件中应用更多的样式,也可以添加一个active类到“HOME”列表项中。

主内容和侧边栏

我们已经完成了站点的主导航,现在我们需要添加主要内容区和一个侧边栏来支持更多的链接或导航路径。请把下面的代码添加到导航条之后。

<div id='content' class='row-fluid'> <div class='span9 main'> <h2>Main Content Section</h2> </div> <div class='span3 sidebar'> <h2>Sidebar</h2> </div> </div> 

这正是我们需要弄懂的bootstrap的栅格系统,当然,bootstrap的官方文档中涵盖了更多的细节,但我们将会以基础开始,让你更好地理解它。

栅格系统利用了12列的布局,这意味着一个页面可以被分割成12个相同的列。下面这张从bootstrap官方文档中拿到的图片给出了一个很好的展示。

Bootstrap

在我们刚刚黏贴在导航条下面的代码中你可以看到名为span9和span3的类。它们会把页面分割成左边9列宽度和右边3列宽度的两部分,形成我们的内容区域和侧边栏。使用栅格系统的其中一个好处就是它会根据视窗宽度动态计算出列的宽度,因此你不需要写任何的媒体查询也能使你的站点工作在任何的屏幕分辨率下。

你可以通过改变span的数量和调整浏览器的大小来观察它们的效果。你会注意到当内容区小于724px的时候,这些列会垂直地堆放。

现在我们在主内容区域把下列文本或者任何其他的文本放在在h2标签之后,这只是为了把页面拉长一点。

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> 

现在站点会像如下显示:

Bootstrap

侧边栏导航

你可以在这里看到所有的Twitter bootstrap为我们提供的导航元素。

我们将要使用垂直选项卡来创建一个额外的导航区。复制和黏贴下面的代码到sidebar的h2标签之后。

<ul class="nav nav-tabs nav-stacked"> <li><a href='#'>Another Link 1</a></li> <li><a href='#'>Another Link 2</a></li> <li><a href='#'>Another Link 3</a></li> </ul> 

这是一个简单的展示!上面的代码照字面理解仅仅是一个具有类为nav-tabs和nav-stacked的无序列表,但它却为我们创造了一个导航面板。

看看最后的效果,一个基于twitter bootstrap的响应式设计的页面完成了。

Bootstrap

结论

通过twitter bootstrap所提供的特性,我们给出了这个非常快速的bootstrap基础教程,但花点时间练习并多多查阅官方的文档,不久之后你就可以成为一个bootstrap的专家了。

转自:http://www.w3cplus.com/css/twitter-bootstrap-tutorial.html