CSS滑动门技术以及简单应用 - CSS+DIV -

CSS滑动门技术以及简单应用

时间：2010-01-28 00:02:02   来源：   评论：加载中...   点击：加载中...
"如果你是一个css高手的话,那你就来详细介绍一下css滑动门技术".看了这句话不得不学习一下这个所谓的css滑动门技术.我也想当高手啊.当时在...

具体操作如下：

首先，为了“挂上”两个背景图像，需要两个HTML元素，因此在h3标记中间在嵌套一层span：

1
 
<h3><span>标题文字</span></h3>

然后，分别对h3和span的CSS样式进行设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
h3{
 font-size:13px;
 line-height:21px;
 text-align:center;
 width:200px;  /*修改这个值即可改变宽度，且保持两端的花纹*/
 background-image:url(bg.gif);
 background-repeat:no-repeat;
 padding-left:40px;
}
 
span{
 display:block;
 padding-right:40px;
 background-image:url(bg.gif);
 background-repeat:no-repeat;
 background-position:right;
}

可以看到，实际上二者是用的是同一个背景图像，这个背景图像如下所示。

滑动门背景图像

关键的要点是，由于span元素在h3元素里面，因此span的背景图像在h3的背景图像的上面。h3通过设置左侧的padding露出左端的花纹。

而span通过background-position属性，从右边开始显示背景图像，这样就可以露出背景图像的右端了。

如果对CSS比较熟悉的话，上面的CSS代码可以简写如下：

1
2
3
4
5
6
7
8
9
10
11
12
 
h3{
 font:13px/21px;
 text-align:center;
 width:200px;  /*修改这个值即可改变宽度，且保持两端的花纹*/
 background:url(bg.gif) no-repeat;
 padding-left:40px;
}
span{
 display:block;
 padding-right:40px;
 background:url(bg.gif) no-repeat right;
 2/3   首页 上一页 1 2 3 下一页 尾页

                

                
                

            
            

            


            


        


        


            

            

        


        


            


                

            


            
            


                

                    


                        

                    


                		

            


            
            


                

                    
                    
上一页 1 2 3 下一页


                        


                        相关热词搜索：
                


            


            

            


                

                收藏到网摘：

            


            


                 

            


            


                

                


                  


                    

                        上一篇：DIV CSS兼容性解决IE6/IE7/FF浏览器的通用方法完美兼


                        下一篇：CSS的长度单位(em) 与em标签		

                    

                    

                    	收藏

                    

                    将此文推荐给朋友

                  


                


            


            


            


            


                

                


                分享到：

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                


                

                

                

                

            


        

        


	
	

	
	
    

    

    

    

    

	


  
















    

    
免责声明：本站所有资料均收集自互联网，仅供学习、参考、欣赏之用，版权归原作者所有。如有知识产权问题，请及时发邮件至：admin@itphome.cn，我们将及时删除。


    


        

        

        


        QQ:150093589 Email:admin@itphome.cn 鲁ICP备13002171号-1

         友情链接检查