CSS3 Media Queries案例——Tee Gallery

今天继续讲有关于CSS3 Media Queries案例,前面介绍的《CSS3 Media Queries案例——Hicksdesign和《CSS3 Media Queries案例——A List Apart》都是有关于页面的应用,而今天的我要说的案例Tee Gallery是涉及产品列表布局的应用。换句话说就是让产品列表页面如何应用流体布局结合CSS3的Media Queries,制作出在不同媒体条件和媒体介质下的页面风格。别的先不说,和大家一起目睹一下Tee Gallery网站在不同屏幕下的显示风格,如下图所示:

CSS3 Media Queries案例——A List Apart

有关于CSS3 Media Queries的介绍,现在在网络上铺天盖地了,在《CSS3 Media Queries》中主要介绍了一些关于CSS3 Media Queries的理论知识,而在《CSS3 Media Queries案例——Hicksdesign》中介绍关于CSS3 Media Queries应用的第一个案例,今天和大家一起来看有关于CSS3 Media Queries实战中的第二个实例A List Apart网站。看看这个网站是如何应用CSS3 Media Queries的。

CSS3 Media Queries案例——Hicksdesign

前面在《CSS3 Media Queries》介绍了一些CSS3的Media Query的理论知识,今天开始主要针对CSS3 Media Query进行一些实际案例的分析,从实际案例中来进一步学习和运用CSS3的Media Query,从而好让大家在自己的项目中更好的应用Media Query。

jQuery中.addClass()和.removeClass()

jQuery.addClass()主要用来给匹配的元素增加一个类或多个类名(class名),需要注意的是这种方法只是给匹配的元素增加了类名,这里所说的增加就是在以前的基础上追加类名,新增加的类名并不会代替元素原有的类名。可以使用.addClass()给元素一次添加一个或多个类,如果添加多个类名时,需要在类名之间用空格隔开。如:

jQuery.add()

jQuery中的.add()是用来追加元素的一种方法,.add(expr,[context])把与表达式匹配的元素添加到jQuery对象中。他可以用于连接分别与两个表达式匹配的元素结果集。jQuery API中是这样描述.add()方法:

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 之跨列

页面

返回顶部