CSS3 选择器——基本选择器

CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器。那么从现在开始我们先丢开他们版本的区别,从头一起来看看CSS选择器的运用。

CSS3 制作文字特效

今天主要搜集了一些网页中文字用css3制作的特效,并亲自尝试了一下,现把关键的代码和效果贴出来与同学们一起分享,希望能对大家在平时的制作中有所帮助。废话不说,直接进入效果的制作,感兴趣的同学跟着我的代码制作一次,你肯定会有不少的收获。

Inset Text(内阴影效果)

内阴影的文字效果是利用text-shadow属性根据不同光源制作出来的。需要注意三个颜色的配置问题,背景色,前景色,阴影色需要采用有一定的亮度对比色,这样效果更佳,请看下面的效果。

CSS三栏布局——中间固定两边自适应宽度

今天早上在阿当大侠的编写高质量前端代码群中与几位朋友一起探讨和学习了一种用div+css进行的三列(三栏)布局,而且是中间固定左右两边自适应宽度,听起来蛮有意思的。因为以前只是碰到过,左右两列固定而中间自适应的运用。于是思考一下马上敲起了键盘自己实战了一下,接着与大家一起测试,还是通过了各浏览器的考验,为了方便自己以后好查阅,也想让不知道的朋友一起学习一下这样的布局,特整理了一下代码,贴上来与大家一起分享和学习。

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" />

或者这样的形式:

页面

返回顶部