HTML/CSS小技巧揭秘：图片加载慢怎么办？

双列图文列表的制作方法

上回我们聊过，设计手机列表有很多小窍门，比如说怎样弄纯文字的，图文并茂的，全是文字的，或者大图的列表等等。今天我来说说，如果你想要两部分都放图片的列表，但图片还没有加载出来怎么办？

HTML代码结构

关于这两行图文例子这类简单事儿，你得留意几点。首先，用HTML把img跟p放在同个地方，就像给图片安个“小窝”似的，这样调CSS时就方便多了！

CSS样式设置

今儿说的CSS这块儿，简单说一下怎么把商品图片加点特色，比如说设定宽度为百分百，底部填充也为百分百，还有相对位置这些术语。这么做就可以做出一个跟手机尺寸匹配的正方形图片框，看起来就养眼多了！想研究更深的，看我以前发的博文《怎样用CSS打造手机版惊讶布局》，那上面讲得更清楚。

知识点总结

通过本章节的学习，我们进一步强化了以下知识点：

    

        

            
                

                    
                
                
这里是商品标题1
                ￥4999.00
            
        
        

            
                

                    
                
                
这里是商品标题2
                ￥4999.00
            
        
        

            
                

                    
                
                
这里是商品标题3
                ￥4999.00
            
        
        

            
                

                    
                
                
这里是商品标题4
                ￥4999.00
            
        
    

如何用CSS让元素的高宽联系起来，达到自适应排布？

2. CSS如何保持图片等比例缩小，避免变形问题的发生；

遇到页面中不知道什么大、大小不均的块级元素怎么办？把它们往中间挪动一下！这样不仅美观而且方便操作。

.list_3 {    ul {        @extend .cf; // 引用清理浮动代码片,看不懂请看本人scss相关教程
        li {            width: 50%;float: left;padding: 1rem 0;
            outline: 1px solid #ddd;  // 使用 outline 模拟边框 (outline不占据盒子模型)
            background: #fff;  // 使用白色背景颜色,防止 outline 重叠造成 2px 线条
            a {                
            display: block;
                text-decoration: none; // 去除默认下划线
            }            
            .goods_title,.goods_price {                
            padding: 0 1rem; // 加上左右内填充,防止文字和边框粘结
                text-align: center;
            }            
            // 和上一章最大的差异在这里.
            .goods_photo {                
            width: 100%;padding-bottom: 100%;position: relative;
                img {                    
                // 限制图片最大宽高,保持不变形
                    max-width: 80%;max-height: 80%;display: block;
                    // 未知宽高块级元素水平且垂直局中代码
                    position: absolute;top: 50%;left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
}// 全站范围内用到的图文基本样式.goods_title,.goods_price {    
display: block;position: relative;
    @include ts(); // 引用文字描白边代码片
    @include online(1.8rem); // 引用文字超出一行省略号代码片}
    .goods_title {color:#000;font-size: 1.2rem;}
    .goods_price {color:#f60;font-size: 1.5rem;font-weight: bold;}

值得注意的是：

部分安卓手机版本低于4.4的话，可能就用不了新型的CSS属性，像clac、vw、vh之类，记得用以前的办法搞定。然后咱们国内一些手机浏览器也可能跟不上这些新款web标准，这种情况下最好换个老牌浏览器或者升级一下手机操作系统。

这篇文章，教你怎么做移动开发这种事。别急开始都难，慢慢适应！

掌握了这几个小技巧，手机列表就不再麻烦！而且对于网络编程技术也有帮助！试试看呗，掌握得多才记得牢！