Clear Float

众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开。换句简单好理解的话来说,假如你在写CODE时,其中div.A(这个就是说页面中有一个div,并且把其命名为class="A")中包含了两个或多个子元素div.B,div.C,div.D(这里我以三个为例),并且此时div.B和div.C进行浮动,而div.D不进行任何浮动,此时你可以看到父元素div.A高度仅靠div.D来撑开其高度,如果您将div.A所有子元素进行浮动,当你没有清除内部浮动时,此时会导致浮动的父元素div.A无法自动撑开本身的高度。也就是说:当一个元素是浮动的,如果没有关闭浮动时,其父元素不会包含这个浮动元素,因为此时浮动元素从文档流中脱离。下面我们先来看看这两种现像的实例:

CSS3 Media Queries

Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码:

  <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
  <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

或者这样的形式:

图解WinXP系统下安装Git

简单来说Git是一个免费的、开源的版本控制软件,从功能上讲,跟我们比较熟悉的Subversion(SVN)这类版本控制软件没什么两样。由于工作的需求,需要在WinXP下安装git配合团队完成相应的工作,以前一直在别的系统下使用,今天经Drupal花园龙马指点终于安装成功了,特意贴出来与有需要的童鞋一起分享。

获取Git软件:

大家可以通过两种方式获取Git的软件,一个是在官网上获取,另一个可以点击这里下载。只是有一点需要说明就是需要下载支持WinXp系统的版本。

Git在WinXP安装过程

如何在Drupal中避免重复列末尾的Margin

在页面中创建列表项,大家并不陌生,常见的一种就是产品展示页面,制作过程中大家肯定碰到了每行最后一个列表项的margin不太好处理。当然如果是在静态页面中,这样的问题很轻松解决,在每行的最后一列加上一个class名,比如last,并定义相应的样式就完全搞定了;但是对于一个CMS的动态网站,比如我在工作中常碰到的Drupal,在Drupal中对产品进行展示布局,我就无法在相应的行中最后一列加上class名,从而让我无法去除他的margin值。换句话说,在一个动态网站中,我无法修改行中最后一列的margin值,从而使用最后一列多出了不想要的margin。下面这个例子是我在Drupal最常见的一种如下:

CSS3 Multi-columns 之跨列

CSS3 Multi-columns 之column-gap column-rule

上一节主要介绍了"Multi-column"中多列布局模块(CSS Multi-column Layout Module)的《CSS3 Multi-columns 之列数和列宽》,今天主要来和大家一起继续学习其中的第二部分:column-gap和column-rule

CSS3 Multi-columns 之列数和列宽

Multi-column”译成中文就是“多列”,这个"Multi-column"是W3CCSS3增加的一个多列布局模块(CSS Multi-column Layout Module)。它主要应用在文本的多列布局方面,对于文本的多列布局我想大家并不陌生,因为报纸和杂志上我们随处可见,这种布局在报纸和杂志上都使用了几十年了,但需要在Web页面上实现文本的多列布局,正如下图所示:

CSS ::Selection

前天在一个前端群中碰到一个网友问了一个有关于唐人CSS帝国中关于选择文本,背景是红色,而文本是白色的问题,如下图所示:

或许大家对这样的实现并不陌生,可是有很多童鞋可能跟我一样,并不知道是如何实现,因为在默认情况下,选择网站文本都是深蓝的背景,白色的字体,就如下本站的而言,选择文本后,背景是深蓝色,而选中的文本就是白色,如下图所示:

CSS3 Multiple Backgrounds

前面几节和大家一起学习了CSS3中给Background新追加的属性:《CSS3 Background-size》、《CSS3 Background-clip》和《CSS3 Background-origin》。

CSS Background-origin

Background-origin是CSS3为Background扩展的第三个属性,从Background-origin字面上不难发现是指背景图片的原点,其实background-origin主要就是用来决定背景图片的定位原点,换句话说就是背景图片定位的起点(

页面

返回顶部