my blog my blog

Tag: CSS
通过CSS屏蔽weibo的好友关注推荐

 

weibo没有会员实在是有些恶心了,那些推荐也好烦人,好吧,代码说:

  1. <div node-type="feed_spread" class="WB_cardwrap WB_feed_type S_bg2"> </div> 

这个就是那个微博中穿插好友关注推荐的代码,如果用css选中它我们当然不能用.WB_cardwrap.WB_feed.type S_bg2来做,因为这样子会同样选中其它的推文,那样子就看不到别人的微博了,我们要做的是

  1. [node-type=feed_spread] {visibility:hidden;display:none;} 

好吧,就是如此简单,可以轻松的屏蔽掉微博的页面中穿插的好友推荐。

使用的是CSS [attribute] 选择器,具体教程可以参考:  http://www.w3school.com.cn/cssref/selector_attribute.asp

jQuery实现页面内平滑回到顶部的过程分析及实现方法

 

jQuery可以实现一些很绚丽的网页效果,比如淡入淡出还有滑动效果等,它的动画自定义也很强大,animate()功能很出色,今天奶牛跟大家一起来看看那些网页中的回到顶部或者回到底部如何用jQuery来实现平滑滚动。

首先,我们需要知道,我们的滚动要到达的目的地,比如一个页面内的元素,我们要知道它距离窗口顶部的位置。这样子,比如我们的header的id就是header,footer的id就是footer。那么我们可以通过offset()方法来获得一个top跟left值。

  1. $('#header').offset() 
  2. $('#footer').offset() 

因为我们需要的是页面上下滚动,所以我们只需要offset()方法来获得的top值

  1. $('#header').offset().top 
  2. $('#footer').offset().top 

现在目的地已经有了,那么我们将来实现到达目的地的方法,就是scrollTop()方法,这个方法在没有参数的情况下,返回一个当前滚动距离top顶端的值,如果scrollTop(value)的话,我们将直接滚动到页面的那个位置

  1. $(window).scrollTop($('#header').offset().top) 
  2. $(window).scrollTop($('#footer').offset().top) 

这样子的实现太过僵硬,因为是直接到达目的地,所以我们下一步就是为它添加动画效果

  1. $('html').animate({scrollTop:$('#header').offset().top},800); 
  2. $('html').animate({scrollTop:$('#footer').offset().top},800); 

其中的800是动画持续的时间,在持续时间之后我们还可以增加’swing‘或者’linear’

  1. $('html').animate({scrollTop:$('#header').offset().top},800,'swing');  
  2. $('html').animate({scrollTop:$('#footer').offset().top},800,'linear');  

具体效果可以自己测试下,linear是匀速的运动,默认是swing

这样子,我们需要的功能就已经实现了。比如你可以固定一个元素并未其进行监听,然后当点击的时候执行上面的jquery代码。

  1. $(document).ready(function(){ 
  2.     $('#scroll').hide(); 
  3.     $(window).scroll(function() { 
  4.         if($(window).scrollTop() >= 100){ 
  5.             $('#scroll').fadeIn(400); 
  6.         } 
  7.         else 
  8.         { 
  9.             $('#scroll').fadeOut(200); 
  10.         } 
  11. }); 

下面的一段代码可以实现,当页面的滚动超过100px的时候,就会展现id为scroll的元素,如果不超过的话就隐藏。

参考文章:

http://docs.jquery.com/CSS

http://docs.jquery.com/CSS/scrollTop

http://api.jquery.com/offset/

http://api.jquery.com/scrollTop/

http://api.jquery.com/animate/

CSS之使用clearfix清除浮动

 

好多东西,现用现学现查,然后记录下来,这几年都是这样子。看过很多东西,但是未必都记住了,有点儿印象,然后需要的时候再现学。今天分享下clearfix。

首先,奶牛直接copy下bootstrap里面的写法:

  1. .clearfix { 
  2.   *zoom: 1
  3.  
  4. .clearfix:before, 
  5. .clearfix:after { 
  6.   display: table; 
  7.   line-height0
  8.   content""
  9.  
  10. .clearfix:after { 
  11.   clearboth

在一个有float 属性元素的外层增加一个拥有clearfix属性的div包裹,可以保证外部div的height,即清除"浮动元素脱离了文档流,包围图片和文本的 div 不占据空间"的问题。

看到”闲聊CSS之关于clearfix–清除浮动“ (http://www.indievox.com/e2ghost/post/50238)的文章给了一个比较清晰的分析:

  1. 构成Block Formatting Context的方法有下面几种: 
  2.  
  3.     float的值不为none。 
  4.     overflow的值不为visible。 
  5.     display的值为table-cell, table-caption, inline-block中的任何一个。 
  6.     position的值不为relative和static。 
  7.  
  8. 很明显,float和position不合适我们的需求。那只能从overflow或者display中选取一个。
  9. 因为是应用了.clearfix和.menu的菜单极有可能是多级的,所以overflow: hidden或overflow: auto也不满足需求
  10. (会把下拉的菜单隐藏掉或者出滚动条),那么只能从display下手。 
  11.  
  12. 我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个
  13. 但是display: inline-block会产生多余空白,所以也排除掉。
  14. 剩下的只有table-cell, table-caption,为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context
  15. 因为display: table会产生一些匿名盒子,这些匿名盒子的其中一个(display值为table-cell)会形成Block Formatting Context。
  16. 这样我们新的.clearfix就会闭合内部元素的浮动。 

这就是为什么选择display:table的原因。

Steam For Linux正版游戏大促销【2.5~5折哦,速度抢购咯】

 

好机会,Linux下的正版游戏平台steam for linux今日发布促销活动哦,折扣力度相当大,可见对linux正版游戏推广的用心良苦哇。而50%~75% OFF的促销觉得应该也比较罕见吧,游戏列表还是比较丰富的,并且steam很亲民的支持支付宝付款,相当方便。在游戏方面,很多游戏都是三平台都支持的,windows linux mac都跑起,比如cs source 即cs起源,估计全球攻势cs go也快了,奶牛继续等待,最近玩儿cs go很high哇,朋友们可以先入个cs source感受下,因为引擎差别不是太大,估计cs go到达steam for linux也指日可待啦。而且steam for linux对于ubuntu等系统的支持也是很不错的。

促销活动地址:http://store.steampowered.com/sale/linux_release?snr=1_41_4__42

活动截至时间:至 2 月 21 日太平洋标准时间上午 10 点

具体促销内容看截图:

 

关于锚链接跟页面分页

 

很多东西总是用,总是忘,让人很无奈。锚链接的东西自己至少已经查过三次了,还是老忘,继续记录。

锚链接比较常见的应用就是在页面内上下的切换,比如你的回到顶部/底部功能,页面内链接跳转,都可以用锚链接来做。具体实现方法是:

1.建立锚点

锚点就是你链接想到达的目的地,建立方法是定义一个id给<a></a>,比如回到顶部的话,我们需要在最顶部放置一个锚点。

  1. <a id=top>Homepage</a> 

2.建立锚链接

锚点有了,直接把链接挂过去,就是直接引用锚点的id

  1. <a href="#top">back to top</a> 

搞定。

下面说说页面分页,这里是指打印时候的一个分页,页面上看不出来,实际是一个css的属性。可以在<>中直接引用或者自己定义page-break-before的css。

  1. style="page-break-before:always" 

 

利用CSS+HTML屏蔽IE6浏览器访问教程

 

最近自己做了下新主机站的页面,昨晚所有浏览器的最新版都测试通过木有问题,唯独IE6让人难以割舍啊,div都重叠在一起,纠结的不像样。算了,屏蔽掉吧~~~方法是参考的WayJam 同学的文章,原文在http://wayjam.me/use-css-and-html-to-killie.html 。

因为奶牛的页面在IE7下是正常的,所以只屏蔽IE6的访问,具体方法如下:

1.编辑你想设置屏蔽的页面的html文件,为了方便隐藏页面其他元素,我们先用一个<div>包含住<body></body>之间的所有元素,并且命名其ID为container 。

2.在你的css文件中添加如下代码

#ie{background:#000;border:1px solid #CCC;height:900px;}
#ie-body{color:#ccc;font-family:'Microsoft YaHei',arial,serif,Geneva,sans-serif;font-size:30px;opacity:0.5;text-align:center;}
#ie-body p:hover{color:#fff;opacity:1;}

3.在<body></body>标记之间的任意位置加入如下代码:

<!--[if lt IE 7]>
<style type="text/css">
#container{display:none;} //隐藏页面其他元素
#ie{display:block;}     //对IE显示特定模块
</style>
<div id="ie">
  <div id="ie-body">
      <p><br /><br /><br />欢迎光临VM-IN.NET奶牛主机</p>
      <p>您正在使用一个落后的浏览器浏览网页</p>
      <p>本站无法在 IE 7 以下版本的 IE 系列浏览器中正常访问。</p>
      <p>为了获得更好的浏览体验, 请升级到更高级的浏览器</p>
      <p>如果您升级到 Internet Explorer 8 或转换到另一些浏览器,本站将能为您提供更好的服务。</p>
      <p>本站推荐使用以下浏览器:Firefox, Chrome, Opera, Safari </p>
      <p>您也可以直接移步到奶牛的<a href="http://nenew.taobao.com" target="_blank" title="博客主机">奶牛主机淘宝店</a>或者QQ<a target="_blank" href="https://www.nenew.net" title="联系我们">联系奶牛</a> </p>
      <p><br>Copyright &copy; 2010. VM-IN.NET 奶牛主机 . All Rights Reserved.</p>
  </div>
</div>
<![endif]-->

收工,看看你的页面的屏蔽效果吧,奶牛做的页面IE6访问的效果如下: