css学无止境

1、资源的缓冲是需要时间的，但是我们又希望用户能在第一时间知道我们页面中正在缓冲的究竟是什么内容，因此我们在图片加载的时候会用简短的文字描述图片内容以供用户在缓冲这段时间了解。几种添加解释说明的方法：
（1）对图片的直接说明

 <img src="img1.png" alt="开心一笑">

不用说我们应该能想到这张正在缓冲的图片很有可能是一张笑脸。

（2） 若是用背景图来实现这部分的内容的话，也可以添加title属性来实现。

<div id="div1" title="笑脸"></div> <!--此时名为“笑脸”的图片已经作为div1的背景*/-->
<a href="#" title="笑脸">这是一张笑脸</a>

2、navigation中一般会有根竖线的图片来作为每个导航的分割，这个竖线的

设置如不能很好的处理，则会达不到美观的效果。这里分享一下妙招（对于

初学者有用，哈哈！）

下面是一段css代码

#nav li{ background:url(images/nav_break.png) no-repeat; 
background-position:center right;}
#nav ul li{ list-style-image:none; float:left;  }
#nav .clearnline{ background:none;}
#nav a{ text-align:center; line-height:40px; font-size:18px;  
display:block; color:#FFF; padding:0 15px;}
#nav a:hover{ background:#cc0001;}

其中关键是讲li背景位置background-position设置为center right，然后li a中设置为display:block，若不是block,那么padding就不能显示，也就是无用的设置了。而用padding比设置li的固定宽度的好处就是这样比较灵活，就算

<li><a>首页</a></li >

<li><a>学无止境</a></li >这样两者的字数不同，但左右相距的长度是一样的，不至于有宽度差异，这样也就达到了整齐美观的效果。还有就是用了padding设置能让子元素a把父元素li“撑开”的性质。

 

3、锚点

（关于锚点是突然想到的，就记在供以后参考吧。）

 

<a href="#a1">第一个锚点</a>
<p><a href="#a2">第二个锚点</a></p>
<div style=" height:900px;">很长很长</div>
<a name="a1">第一个锚点</a>
<p>。。。其他文字。。。。</p>
<a name="a2">第二个锚点</a>
<p>。。。。这部分在内容</p>

 

然后在目录上点击之后，就能一下子到我们想要的内容详解的地方了。（ 当

为<a href="#">时，链接一个空锚点，默认链接到网页顶部</a>
）