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>