使用padding-top:(percentage)实现响应式背景图片

我门都知道,处理在响应性布局的时候,背景图片都是等比例缩放,比如上面的使用图片的情况,使用<img /> 引入的图片的话,那么设置她们的width属性为100%;<img src=”” width=”100%”/> 的话,高度就会等比例缩放,这是图片,但是如果是背景图片呢?我门之前的项目中的常见的做法是根据css3媒体查询的方法来做的,根据不同手机的分辨率等不同,来等比例缩放背景图的高度,虽然这种方式是可以解决问题的,但是这种通过人肉的方式来进行设置并不好,也很繁琐,今天我门来学习使用padding-top这么一个属性来设置了;

实现的基本原理:将使用到保持元素的宽高比的技巧,为元素添加垂直方向的padding-top的值,使用百分比的形式,这个值是相对于元素的宽而定的,比如我上面的一张图片的宽度是1024px,高度为316px;那么现在的

padding-top = (高度 / 宽度 )* 100% = (316 / 1024)* 100% =  30.85%;

但是仅仅对图片高度和宽度缩放的放还不够,我门还必须添加 background-size:cover, 使这个属性让背景铺满元素的,但是IE8及以下不支持该属性,因此为了兼容IE下面的浏览器,我门还需要再加一个属性 background-position: center ; 同时我门也要保证 图片的宽度最大等于父容器的宽度;因此下面的HTML代码如下:

<h3>使用padding-top实现响应性图片(图片的宽度是1024px,高度是316px)</h3>
 <div class="column">
       <div class="figure"></div>
  </div>

css代码如下:

复制代码
.column{
        max-width: 1024px;
 }
 .figure {
         padding-top:30.85%; /* 316 / 1024 */
         background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat;
          background-size:cover;
          background-position:center;
    }
复制代码

效果如下:

 

first-child是css3中的控制器,意味着选择统计元素的第一个元素,但是今天在做网站的时候遇到first-child不起作用,于是就搜索了一下,找到了问题所在。
我们先看一个例子:
css代码:

1
2
3
4
<style>
.dm p:first-child { background:#09C;color:#fff}
.dm p:last-child { background:#09C;color:#fff}
</style>

html代码:

1
2
3
4
5
6
7
8
<div class="dm">
<span>第一行</span>
<p>第二行</p>
<p>第三行</p>
<p>第四行</p>
<p>第五行</p>
<span>最后一行</span>
</div>

如上代码运行之后,这里面的first-child与last-child没有起到任何的作用。
先不说原因,我们把html代码改一下:

1
2
3
4
5
6
7
8
<div class="dm">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
<p>第四行</p>
<p>第五行</p>
<p>最后一行</p>
</div>

怎么样,这次起作用了吧。
看到这两个的区别了吗?
第一个例子里的第一个标签和最后一个标签都是span,而我们寻找的first-child和last-child都是P,[如果父元素的第一个元素或者最后一个元素不是寻找的标签的话,会不起作用],这样说着有点拗口,按上面的例子来说如果父元素.dm寻找的first-child与last-child是P,如果不是P的话会不起作用,大家需要注意这一点。

 

一个超级实用的国外jQuery效果网站,而且里面不止只有js特效的下载(免费的哦),还提供了一些国外绚丽的网站的欣赏。

国外js特效网站

国外js特效网站

网址   http://tympanus.net/codrops/

 

今天写一下css3 针对不同浏览器的一些私有写法,那首先先讲下各大主流浏览器引擎的种类。

css3基础,主流浏览器

Trident 包含(IE)。

Gecko包含(Firefox/Netscape)。

Webkit包含(Google Chrome/Safari)。

Presto包含(Opera)。

如果是处在“实验性质”状态,则各浏览器的私有写法为:IE加 -ms-;Firefox加 -moz-;Safari和Chrome加 -webkit-;Opera加 -o-      。

                                                                                                                                                                                                                      by  —-  麻瓜程序员。

 

CSS3提供了强大的伪类(pseudo-class)选择器,而 nth-child 就是其中的一个。只可惜ie对nth-child的支持(其实更应该是说是对css3的支持)还是那么的令人纠结。今天刚好接触了一下css3其中的一个伪类 nth-child, 下面就来讲下nth-child的作用。

语法:

:nth-child(an+b)

nth-child伪类在W3C里定义是选择选择父元素里的第n个子元素,可以使用an+b的形式选择子元素,举例用法如下:

1
2
3
4
tr:nth-child(2n+1) /* 选择表格里的单数行 */
tr:nth-child(odd)  /* 同上 */
tr:nth-child(2n)   /* 选择表格里的双数行 */
tr:nth-child(even) /* 同上*/
<ul> 
<li> 球一 </li>
<li> 球二 </li>
<li> 球三 </li> 
<li> 球四 </li> 
<li> 球五 </li> 
<li> 球六 </li>
<li> 球七 </li> 
</ul>
例如上面是分别是7个没有颜色的球, 如果我想给第5个球加上红色,那css的写法就是:
ul li:nth-child(5){color:red;}
这样在谷歌或火狐浏览器就可以看到,第五个球变成了红色了。
如果要要选择第一个元素,还可以使用:first-child。
那如果要除了之前的5个球以为的那些球是变成红色的话(6跟7),那css的写法如下:
li:nth-child(n+6){ color:red;}
css3 nth-child

css3 nth-child

这样第六跟第七球就会以红色显示了。
那只选择前面的前五个呢? css的写法: li:nth-child(-n+5){color:red;}
从开始的那个开始,选择第四个:
li:nth-child(4n+1){color:red;}
或者  li:nth-child(4n-7){color:red;}
选择基数或偶数
li:nth-child(odd){color:red;}
li:nth-child(even){color:red;}

nth-child伪类的衍生

除了nth-child以外,W3C还为我们提供了几个基于nth-child定义的衍生伪类,这里简单地说说他们的用途。

  • E:nth-last-child(n): 选择某个子元素,从最后一个数起
  • E:nth-of-type(n): 选择某个某种类型的子元素
  • E:nth-last-of-type(n): 选择某个某种类型的子元素,从最后一个符合条件的元素数起
  • E:first-child: 选择第一个子元素(这个伪类在CSS2里就有)
  • E:last-child: 选择最后一个子元素

nth-child伪类的家族里,除了E:first-child外,其他的伪类都只能在支持CSS3的浏览器里起作用,也就是说在目前的IE里是看不到效果的。

© 2012 Ai-WEB的博客 Suffusion theme by Sayontan Sinha