css 实现正方形

往往在开发的时候会用到正方形,比如导航啊,图片啊,二维码啊,我就把我经常用到的写法分享出来吧,这个也是之前我的好朋友告诉我的.

宽度呢,使用的是百分比,比如25%.

首先html的结构是:

然后是css:

基本上就ok了.当然咯,如果你要在图片上加文字.同样的方法:

//css
        .header p{
            position:absolute;
            left:0;
            right:0;
            bottom: 0;
            text-align: center;
            z-index: 102;
            height: 60px;
            line-height: 60px ;
            font-size: 36px;
            color: #fff;
        }

//html
    

        

        
        
行走的CD
    

效果:

当然咯,如果您看到这一篇博客后有更好的写法可以留言,欢迎探讨......