读书笔记《CSS Mastery》

最新推荐文章于 2025-05-20 17:07:07 发布

weixin_34413357

最新推荐文章于 2025-05-20 17:07:07 发布

阅读量94

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/connie1120/archive/2013/05/07/3064264.html

本文介绍了CSS中的float属性使用技巧，包括div元素的显示行为及浮动效果；探讨了如何利用多背景图片实现视差滚动效果；并提供了一种新颖的方法来高亮显示当前导航条中的页面。

1、关于float的那些事儿

　　例子: <div class="img-wrapper"></div>

　　① 当创建一个div时，如果其中不包含任何内容，也不定义div的长宽。这时的div在界面上不占任何空间，类似于隐藏。

　　② 当给div中加入任何内容的时，div会水平伸展，占据所有横向可用空间。

　　③ 当给div设置浮动时（float:left|right），div会出现“收缩包围”其中内容的效果。

2、CSS视差效果

　　利用多个背景图片叠加在一起（可以使用css3多背景图像特性，也可以添加3个元素来应用背景）。

　　除了最底层的图片不是透明的，其他图片都是alpna透明的。

　　设置图片background相关属性，比如background-repeat:repeat-x; background-position:20% 0; 水平偏移百分比越大，改变窗口大小时移动越快。（百分比可以大于100%）

3、突出显示导航条中当前页面

　　以前我常用的方法是给当前页面的导航条单独添加一个class（如：focus），来设置特定的css样式。还要清除其他导航条包含（focus）的class。

　　书中介绍了一种方法：通过在每个页面的主体元素（如：body）中添加一个ID或class，指出用户当前在哪个页面或部分中。然后再导航列表中的每个项中添加一个对应的ID或class。可以使用主体的ID和列表ID/class的唯一组合在站点导航中突出显示当前部分或页面。

　　例子：

<body id="home">
  <ul class="nav">
    <li class="home"><a href="home.html">Home</a></li>
    <li class="news"><a href="news.html">Home</a></li>
    <li class="work"><a href="work.html">Home</a></li>
  </ul>
</body>

<style>
    #home .nav .home a,
    #news.nav .home a,
    #work.nav .worka{
        background-position:right bottom;
        color:#fff;
    }
</style>