实现效果图:

Html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="购物;Shopping"/>
    <meta name="discription" content="购物商城"/>
    <title>夜上海</title>
    <link rel="stylesheet" href="CSS/commons.css"/>
    <link rel="shortcut icon" href="11.jpg"/>
</head>
<body class="b0">
    <div class="pg-header-top">
        <div class="pg-commons">
            <div class="pg-header-left">
                <a href="http://www.chouti.com" target="_blank" class="a0">收藏本站</a>
            </div>
            <div class="pg-header-right">
                <a href="http://www.chouti.com" target="_blank" class="a0">登录</a>
                <a href="http://www.chouti.com" target="_blank" class="a0">注册</a>
                <a href="http://www.chouti.com" target="_blank" class="a0">我的订单</a>
                <a href="http://www.chouti.com" target="_blank" class="a0">我的收藏</a>
                <a href="http://www.chouti.com" target="_blank" class="a0">VIP会员俱乐部</a>
                <span>
                    <select name="custom" class="s0">
                        <option selected="selected">客户服务</option>
                        <option >投诉建议</option>
                    </select>
                </span>
                <a href="http://www.chouti.com" target="_blank" class="a0">关注</a>
                <a href="http://www.chouti.com" target="_blank" class="a0">手机版</a>
            </div>
        </div>
    </div>
    <div class="pg-header-middle">
        <div class="pg-commons">
            <div class="pg-header-middle-left">
                <a href="http://www.chouti.com" target="_blank">
                    <img src="CSS/4.gif"/>
                </a>
            </div>
            <div class="pg-header-middle-right">
                <div class="pg-header-middle-right1">
                    <div class="pg-header-middle-right11">
                        <form class="f0" action="https://www.sogou.com/web" method="get">
                            <input type="text" name="query" class="i0"/>
                            <input type="submit" value="搜索" class="i1"/>
                        </form>
                    </div>
                    <div class="pg-header-middle-right12">
                        <span>热门搜索:</span>
                        <a href="http://www.chouti.com" target="_blank" class="a0">火龙果</a>
                        <a href="http://www.chouti.com" target="_blank" class="a0">瓜子</a>
                    </div>
                </div>
                <div class="pg-header-middle-right2">
                    <select name="shopping-cart" class="s1">
                        <option selected="selected">购物车2件</option>
                        <option>清空购物车</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="pg-body">
        <div class="pg-commons">
            <div class="pg-body-left">
                <div class="pg-body-left-content">
                    <a href="http://www.chouti.com" target="_blank" class="a0 a1">全部商品分类</a>
                </div>
            </div>
            <div class="pg-body-middle">
                <a href="http://www.chouti.com" target="_blank" class="a0 a1">首页</a>
                <a href="http://www.chouti.com" target="_blank" class="a0 a1">网上超市</a>
                <a href="http://www.chouti.com" target="_blank" class="a0 a1">水果超市</a>
                <a href="http://www.chouti.com" target="_blank" class="a0 a1">超级订餐</a>
                <a href="http://www.chouti.com" target="_blank" class="a0 a1">生活娱乐</a>
                <a href="http://www.chouti.com" target="_blank" class="a0 a1">研究院</a>
            </div>
            <div class="pg-body-right">
                <a href="http://www.chouti.com" target="_blank" class="a0 a1">研究院</a>
                <a href="http://www.chouti.com" target="_blank" class="a0 a1">研究院</a>
                <a href="http://www.chouti.com" target="_blank" class="a0 a1">论坛</a>
            </div>
        </div>
    </div>
    <div class="pg-footer">
        <div class="pg-commons">
            <div class="pg-footer-left">
                <div class="pg-footer-left1">
                    <div class="pg-footer-left11">
                        <h3 style="color:black">南方水果</h3>
                        <a href="http://www.chouti.com" target="_blank" class="a0">火龙果</a>
                        <a href="http://www.chouti.com" target="_blank" class="a0">火龙果</a>
                        <a href="http://www.chouti.com" target="_blank" class="a0">火龙果</a>
                    </div>
                    <div class="pg-footer-left11">
                        <h3 style="color:black">南方水果</h3>
                    </div>
                    <div class="pg-footer-left11">
                        <h3 style="color:black">南方水果</h3>
                        <a href="http://www.chouti.com" target="_blank" class="a0">火龙果</a>
                        <a href="http://www.chouti.com" target="_blank" class="a0">火龙果</a>
                        <a href="http://www.chouti.com" target="_blank" class="a0">火龙果</a>
                    </div>
                    <div class="pg-footer-left11">
                        <h3 style="color:black">南方水果</h3>
                        <a href="http://www.chouti.com" target="_blank" class="a0">火龙果</a>
                        <a href="http://www.chouti.com" target="_blank" class="a0">火龙果</a>
                        <a href="http://www.chouti.com" target="_blank" class="a0">火龙果</a>
                    </div>
                    <div class="pg-footer-left11">
                        <h3 style="color:black">南方水果</h3>
                        <a href="http://www.chouti.com" target="_blank" class="a0">火龙果</a>
                        <a href="http://www.chouti.com" target="_blank" class="a0">火龙果</a>
                        <a href="http://www.chouti.com" target="_blank" class="a0">火龙果</a>
                    </div>
                    <div class="pg-footer-left11" style="border-bottom:none">
                        <h3 style="color:black">南方水果</h3>
                        <a href="http://www.chouti.com" target="_blank" class="a0">火龙果</a>
                        <a href="http://www.chouti.com" target="_blank" class="a0">火龙果</a>
                        <a href="http://www.chouti.com" target="_blank" class="a0">火龙果</a>
                    </div>
                </div>
                <div class="pg-footer-left2">
                    <div class="pg-footer-left21">
                        <a href="http://www.chouti.com" target="_blank" class="a0 a2">热销排行榜</a>
                    </div>
                    <div class="pg-footer-left22">
                        <a href="http://www.chouti.com" target="_blank" class="a0 a2">Content</a>
                    </div>
                </div>
            </div>

            <div class="pg-footer-right">
                <div class="pg-footer-right1">
                    <a href="http://www.chouti.com" target="_blank" class="a0">福特 &gt;蒙迪欧 &gt; 2.0T</a>
                </div>
                <div class="pg-footer-right2">
                    <div class="pg-footer-right21">
                        <span class="sp1">您已选择:</span>
                        <a href="http://www.chouti.com" target="_blank" class="a0">苹果</a>
                    </div>
                    <div class="pg-footer-right21">
                        <span class="sp2">材质:</span>
                        <a href="http://www.chouti.com" target="_blank" class="a0">苹果</a>
                        <a href="http://www.chouti.com" target="_blank" class="a0">苹果</a>
                        <a href="http://www.chouti.com" target="_blank" class="a0">苹果</a>
                    </div>
                    <div class="pg-footer-right21">
                        <span class="sp2">材质:</span>
                        <a href="http://www.chouti.com" target="_blank" class="a0">苹果</a>
                        <a href="http://www.chouti.com" target="_blank" class="a0">苹果</a>
                        <a href="http://www.chouti.com" target="_blank" class="a0">苹果</a>
                    </div>
                    <div class="pg-footer-right21" style="border-bottom:none">
                        <span class="sp2">材质:</span>
                        <a href="http://www.chouti.com" target="_blank" class="a0">苹果</a>
                        <a href="http://www.chouti.com" target="_blank" class="a0">苹果</a>
                        <a href="http://www.chouti.com" target="_blank" class="a0">苹果</a>
                    </div>
                </div>
                <div class="pg-footer-right3">
                    <div class="pg-footer-right31">
                        <a href="http://www.chouti.com" target="_blank" class="a0">更多选项&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!</a>
                    </div>
                </div>
                <div class="pg-footer-right4">
                    <div class="pg-footer-right41">
                        <span>排序:&nbsp;</span>
                        <a href="http://www.chouti.com" target="_blank" class="a0">价格&dArr;</a>
                        <a href="http://www.chouti.com" target="_blank" class="a0">销量&dArr;</a>
                        <a href="http://www.chouti.com" target="_blank" class="a0">最新&uArr;</a>
                        <span style="color:red;padding-left:280px">共xx件产品</span>
                    </div>
                    <div class="pg-footer-right42">
                        <span>1/675&nbsp;&gt;&nbsp;&lt;</span>
                    </div>
                    <div class="pg-footer-right5">
                        <div class="pg-footer-right51">
                            <div class="pg-footer-right511">
                                <a href="http://www.chouti.com" target="_blank" class="a0">
                                  <img src="11.jpg" class="im1"/>
                                </a>
                            </div>
                            <div class="pg-footer-right512">
                                <span>*大美女</span>
                            </div>
                            <div class="pg-footer-right513">
                                <div class="pg-footer-right5131">
                                    <span style="color: #D40101">&yen;998</span>
                                </div>
                                <div class="pg-footer-right5132">
                                    <div class="pg-footer-right51321">
                                        <span>&minus;</span>
                                    </div>
                                    <div class="pg-footer-right51322">
                                        <span>1</span>
                                    </div>
                                    <div class="pg-footer-right51323">
                                        <span>+</span>
                                    </div>
                                </div>
                                <div class="pg-footer-right5133">
                                    <span>买</span>
                                </div>
                            </div>
                        </div>
                        <div class="pg-footer-right51">
                            <div class="pg-footer-right511">
                                <a href="http://www.chouti.com" target="_blank" class="a0">
                                  <img src="11.jpg" class="im1"/>
                                </a>
                            </div>
                            <div class="pg-footer-right512">
                                <span>*大美女</span>
                            </div>
                            <div class="pg-footer-right513">
                                <div class="pg-footer-right5131">
                                    <span style="color: #D40101">&yen;998</span>
                                </div>
                                <div class="pg-footer-right5132">
                                    <div class="pg-footer-right51321">
                                        <span>&minus;</span>
                                    </div>
                                    <div class="pg-footer-right51322">
                                        <span>1</span>
                                    </div>
                                    <div class="pg-footer-right51323">
                                        <span>+</span>
                                    </div>
                                </div>
                                <div class="pg-footer-right5133">
                                    <span>买</span>
                                </div>
                            </div>
                        </div>
                        <div class="pg-footer-right51">
                            <div class="pg-footer-right511">
                                <a href="http://www.chouti.com" target="_blank" class="a0">
                                  <img src="11.jpg" class="im1"/>
                                </a>
                            </div>
                            <div class="pg-footer-right512">
                                <span>*大美女</span>
                            </div>
                            <div class="pg-footer-right513">
                                <div class="pg-footer-right5131">
                                    <span style="color: #D40101">&yen;998</span>
                                </div>
                                <div class="pg-footer-right5132">
                                    <div class="pg-footer-right51321">
                                        <span>&minus;</span>
                                    </div>
                                    <div class="pg-footer-right51322">
                                        <span>1</span>
                                    </div>
                                    <div class="pg-footer-right51323">
                                        <span>+</span>
                                    </div>
                                </div>
                                <div class="pg-footer-right5133">
                                    <span>买</span>
                                </div>
                            </div>
                        </div>
                        <div class="pg-footer-right51">
                            <div class="pg-footer-right511">
                                <a href="http://www.chouti.com" target="_blank" class="a0">
                                  <img src="11.jpg" class="im1"/>
                                </a>
                            </div>
                            <div class="pg-footer-right512">
                                <span>*大美女</span>
                            </div>
                            <div class="pg-footer-right513">
                                <div class="pg-footer-right5131">
                                    <span style="color: #D40101">&yen;998</span>
                                </div>
                                <div class="pg-footer-right5132">
                                    <div class="pg-footer-right51321">
                                        <span>&minus;</span>
                                    </div>
                                    <div class="pg-footer-right51322">
                                        <span>1</span>
                                    </div>
                                    <div class="pg-footer-right51323">
                                        <span>+</span>
                                    </div>
                                </div>
                                <div class="pg-footer-right5133">
                                    <span>买</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</body>
</html>CSS代码:
.b0{
    margin: 0 auto;
}
.pg-header-top{
    background-color:#dddddd;
    color:black;
    height:40px;
    line-height:40px;
    font-family:\'楷体\';
    font-weight:bold;
    font-size:15px;
    width:1800px; /*网页最外层宽度需要设置绝对宽度,要不网页就会变形.*/
}
.pg-commons{
    width:1200px;
    margin:0 auto;
}
.pg-header-left{
    float:left;
    width:100px;
}
.pg-header-right{
    float:left;
    width:800px;
    padding-left:300px;
}
.a0{
    padding-right:10px;
    text-decoration:none; /*text-decoration:none去掉下划线*/
    color:black;
}
.s0{
    height:40px;
    background-color:#dddddd;
    line-height:40px;
    font-family:\'楷体\';
    font-size:15px;
    font-weight:bold;
    border:none;
}
.pg-header-middle{
    width:1800px;
    height:100px;
    margin-top:20px;
    font-family:\'楷体\';
    font-size:15px;
    font-weight:bold;
}
.pg-header-middle-left{
    float:left;
    width:120px;
    padding-left:150px;
    height:80px;
}
.pg-header-middle-right{
    float:left;
    width:700px;
    padding-left:100px;
    height:80px;
}
.pg-header-middle-right1{
    float:left;
    width:400px;
    height:38px;
    margin-top:20px;
}
.pg-header-middle-right11{
    float:left;
    width:300px;
    height:38px;
}
.pg-header-middle-right12{
    float:left;
    width:190px;
    padding-top:10px;
}
.pg-header-middle-right2 {
    float:left;
    width:100px;
    height:38px;
    padding-left:10px;

}
.i0{
    float:left;
    width:78%;
    height:38px;
}
.i1{
    float:left;
    width:20%;
    height:44px;
}
.s1{
    margin-top:23px;
    background-color: #dddddd;
    font-size:15px;
    font-family:\'楷体\';
    height:40px;
}
.pg-body{
    width:1800px;
    background-color: #D40101;
    margin-top:10px;
    height:42px;
    line-height:42px;
    color:white;
    font-family:\'楷体\';
    font-weight:bolder;
    font-size:18px;
}
.pg-body-left{
    width:200px;
    float:left;
}
.pg-body-left-content{
    text-align: center;
}
.pg-body-middle{
    float:left;
    width:500px;
}
.a1{
    color:white;
}
.pg-body-right{
    float:left;
    padding-left:80px;
    width:200px;
}
.pg-footer{
    width:1800px;
    height:900px;
    color:black;
    font-size:12px;
    margin:0;
}
.pg-footer-left{
    float:left;
    width:200px;
    height:900px;
}
.pg-footer-left1{
    float:left;
    width:200px;
    height:480px;
    border:1px solid;
    color:#dddddd;
}
.pg-footer-left11{
    float:left;
    width:200px;
    height:78px;
    border-bottom: 1px dotted;
    color:#dddddd;
    font-size:15px;
}
.pg-footer-left2{
    float:left;
    width:200px;
    height:50px;
    border:1px solid black;
    margin-top:15px;
}
.pg-footer-left21{
    float:left;
    width:200px;
    height:30px;
    border-bottom:1px solid black;
    background-color:#dddddd;
}
.a2{
    font-size:15px;
    font-family:\'楷体\';
    font-weight:bolder;
}
.pg-footer-right{
    float:left;
    width:750px;
    padding-left:30px;
    height:900px;
    margin-top:30px;
    color:black;
    font-size:15px;
    font-family:\'楷体\';
    font-weight:bolder;
}
.pg-footer-right1{
    width:750px;
    height:38px;
}
.pg-footer-right2{
    width:750px;
    height:200px;
    border-top:2px solid #ce3c3c;
    border-left:1px solid #dddddd;
    border-bottom:1px solid #dddddd;
    border-right:1px solid #dddddd;
}
.pg-footer-right21{
    float:left;
    width:700px;
    margin-left:20px;
    margin-right:20px;
    border-bottom:1px dotted #dddddd;
    height:50px;
    line-height:50px;
}

.sp1{
    font-family:\'楷体\';
    font-size:15px;
    font-weight:bolder;
}
.sp2{
    font-family:\'楷体\';
    font-size:15px;
    font-weight:bolder;
    padding-left:20px;
}
.pg-footer-right3{
    float:left;
    width:750px;
    height:30px;
    line-height:25px;
    margin:0;
}
.pg-footer-right31{
    width:120px;
    margin: -3px auto;
    border-top:1px solid snow;
    border-bottom:1px solid #dddddd;
    border-left:1px solid #dddddd;
    border-right:1px solid #dddddd;
    height:28px;
}
.pg-footer-right4{
    margin-top:45px;
    width:750px;
    height:38px;
    font-family:\'楷体\';
    font-size:15px;
    line-height:38px;
    font-weight:bolder;
    border: 1px solid #dddddd;
    background-color:darkgray;
}
.pg-footer-right41{
    float:left;
    width:80%;
}
.pg-footer-right42{
    float:right;
    width:18%;
    border-left:1px solid #dddddd;
    height:38px;
}
.pg-footer-right5{
    width:750px;
    margin-top:10px;
    height:600px;
    float:left;

}
.pg-footer-right51{
    float:left;
    width:300px;
    height:250px;
    border:1px solid red;
    margin-left:5px;
    margin-top:5px;
}
.pg-footer-right511{
    float:left;
    width:298px;
    height:180px;

}
.pg-footer-right512{
    margin-top:5px;
    width:298px;
    text-align:center;
    height:20px;
    line-height:20px;
    float:left;

}
.pg-footer-right513{
    height:20px;
    width:298px;
    float:left;
    padding-left:10px;
    margin-top:10px;
}
.pg-footer-right5131{
    height:20px;
    width:32%;
    line-height:20px;
    float:left;
}
.pg-footer-right5132{
    height:20px;
    width:32%;
    border:1px solid #dddddd;
    line-height:20px;
    float:left;
}
.pg-footer-right51321{
    float:left;
    height:20px;
    width:30%;
    border-right:1px solid #dddddd;
}
.pg-footer-right51322{
    float:left;
    height:20px;
    width:30%;
    border-right:1px solid #dddddd;
}
.pg-footer-right51323{
    float:left;
    height:20px;
    width:30%;
}
.pg-footer-right5133{
    height:20px;
    width:18%;
    line-height:20px;
    float:left;
    border:1px solid red;
    background-color:darkred;
    margin-left:20px;
    color:black;
    text-align: center;
}
.im1{
    width:298px;
    height:180px;
}