CSS -- 练习之制作简单商品图

只加深了印象，出错点：未给左侧人物大图宽高，致使第二行图层叠在其上；

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        
        <style type="text/css">
        /*
* @Author: Mingming
* @Date:   2017-03-04 18:44:25
* @Last Modified by:   Mingming
* @Last Modified time: 2017-03-04 22:36:03
*/
body,div,p,a{
    margin: 0;
    height: 0;
    text-decoration: none;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
body{
    background: #AAAAAA;
    font-size: 14px;
}
.big-box{
    width: 1226px;
    margin: 0 auto;
}
.title{
    
    height: 38px;
}
.l-title{

        font:500 18px 微软雅黑;
}
/* 左侧大图 */
.left-pic{
    margin-bottom: 4px;
    width: 234px;
    height: 614px;
}
/* 第一个右侧小图 */
.r-pic{
    background: #ffffff;
    width: 234px;
    height: 300px;
    margin: 0 0 14px 14px;
    text-align: center;
}
.r-pic img{
    margin-top: 21px ;
}
.store-name,.store-explain{
    font:  12px  微软雅黑 ;
    margin-top: 6px;
    margin-bottom: 25px;
}
a{
    color: #000000;
}
.store-money{
    margin-top: 17px;
}

.store-money a{
    color: #FFA500;
    font-weight: 700;
}
/* 包邮 */
.free-post{
    width: 64px;
    height: 20px;
    /* z-index: 100; */
    background: #FFA500;
    color: #FFFFFF;
    margin: 0 auto;
    font-size: 12px;
}




        </style>
    </head>
    <body>
    <div class="big-box">
    <!-- 顶部导航 -->
    <div class="title"> <p class="l-title fl">智能硬件</p> 
                        <p class="r-title fr">查看全部</p></div>
     <!-- 左侧大图 -->
    <div class="left-pic fl"><a href="#"><img src="images/124d82cc-cfce-44ab-b711-28b21be81683.jpg"  alt=""> </a>
    </div>
     <!-- 第一个右侧小图 -->
    <div class="r-pic fl">
        <div class="free-post">免邮费</div>
        <img src="images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
        <p class="store-name"><a href="#">小米路由器3</a></p>
        <p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
        <p class="store-money"><a href="#">149元</a></p>
    </div>
    <!-- 第一个右侧小图结束 --> <!-- 第一个右侧小图 -->
    <div class="r-pic fl">
        <div class="free-post">免邮费</div>
        <img src="images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
        <p class="store-name"><a href="#">小米路由器3</a></p>
        <p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
        <p class="store-money"><a href="#">149元</a></p>
    </div>
    <!-- 第一个右侧小图结束 --> <!-- 第一个右侧小图 -->
    <div class="r-pic fl">
        <div class="free-post">免邮费</div>
        <img src="images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
        <p class="store-name"><a href="#">小米路由器3</a></p>
        <p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
        <p class="store-money"><a href="#">149元</a></p>
    </div>
    <!-- 第一个右侧小图结束 --> <!-- 第一个右侧小图 -->
    <div class="r-pic fl">
        <div class="free-post">免邮费</div>
        <img src="images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
        <p class="store-name"><a href="#">小米路由器3</a></p>
        <p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
        <p class="store-money"><a href="#">149元</a></p>
    </div>
    <!-- 第一个右侧小图结束 --> <!-- 第一个右侧小图 -->
    <div class="r-pic fl">
        <div class="free-post">免邮费</div>
        <img src="images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
        <p class="store-name"><a href="#">小米路由器3</a></p>
        <p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
        <p class="store-money"><a href="#">149元</a></p>
    </div>
    <!-- 第一个右侧小图结束 --> <!-- 第一个右侧小图 -->
    <div class="r-pic fl">
        <div class="free-post">免邮费</div>
        <img src="images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
        <p class="store-name"><a href="#">小米路由器3</a></p>
        <p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
        <p class="store-money"><a href="#">149元</a></p>
    </div>
    <!-- 第一个右侧小图结束 --> <!-- 第一个右侧小图 -->
    <div class="r-pic fl">
        <div class="free-post">免邮费</div>
        <img src="images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
        <p class="store-name"><a href="#">小米路由器3</a></p>
        <p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
        <p class="store-money"><a href="#">149元</a></p>
    </div>
    <!-- 第一个右侧小图结束 -->

</div>
    </body>
</html>

作者:明明
出处: http://www.cnblogs.com/mingm/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意，必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。

相关阅读:
html单引号，双引号转义
 把文章里边的html标签去掉（去掉文字的样式，显示css设置的样式）
java缓存适合使用的情况
 Java内存缓存
 springmvc怎么重定向，从一个controller跳到另一个controller
jquery 获取标签名(tagName)
jQuery判断checkbox是否选中的3种方法
 判断一组checkbox中是否有被选中的
 在O(N)时间内求解正数数组中两个数相加的最大值
 两种方法求解正数数组中两个数相减的最大值
原文地址：https://www.cnblogs.com/mingm/p/6503031.html