这篇文章继续分享web页面的代码，上一章是页眉区的设计，这一章是商品购物区和页脚的设计。超市购物平台教程上

一、banner区的设计

<div class="banner">
        <img src="image/banner.png" alt="" id="banner-img">
    </div>

（一）要点：

1、和页眉保持一致宽度，并且居中
2、图片长度的设置

（二）代码

1、保持宽度一致，需要设置对应的margin
margin后面只有两个值时，默认第一个值设置的是上下的间距，而第二个值设置的是左右的间距。
而为了让左右间距随着网页的变化而变化，设置为自动。
css代码为：

.content .banner{
    margin:25px auto;
    width:1200px;

}

2、图片长度的设置

#banner-img{
    width:1200px;
    height:210px;
}

二、商品购买的设计

（一）要点

1、3排2列的设置
2、里面包含图片、标题、介绍、价格和购物车图标着5个内容。
并且都需要分别设置css，因此需要区分开。
比如img，h,p,div等，对于有重复的标签，比如价格和介绍都用p的话，则需要分别取上class名字。

（二）代码

1、3排2列采用ul和li的设计，li里中可以直接包含商品的这5个信息。

 <ul class="goods">
            <li>
                <img src="image/土豆.jpg" alt="" class="tudou">
                <div class="con1">
                <h3>土豆</h3>

                <p class="instro1">新鲜的土豆，可以炒、炸，小孩老人都爱吃。茄科茄属植物，俗名地豆子，多年生草本，但作一年生或一年两季栽培</p>
                    <p class="price">价格：￥2.3/斤</p>
                </div>
                <div class="buy-img">
                    <img src="image/buy.jpg" alt="" class="buy1">
                </div>
            </li>

而要将6个li排列成3排2列
2、则需要设置每个列的长度，和浮动方式（通常是向左浮动）

.content .instro{
    margin:25px auto;
    width:1215px;
}

.content .instro ul li .con1 .price{
    float:left;
    margin-left:30px;
    color: brown;
    font-size: 20px;
}
.con1 .instro1{
    line-height: 30px;
    margin:10px 10px 20px 20px;

}

.content .instro ul li .tudou{
    width:390px;
    height:210px;
}

.content{
    margin:25px auto;
}


.content .instro ul li .buy-img .buy1{
    width:50px;
    height: 50px;
    float:right;
    margin-right:20px;

}

三、页码区的设计

（一）要点

1、居中排列
2、1页码上的灰色小圆圈

（二）代码

1、HTML

<div class="page-nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li><span class="first-page">1</span></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">98</a></li>
        <li><a href="#">99</a></li>
        <li><a href="#">100</a></li>
        <li><a href="#">下一页</a></li>
        <li><a href="#">尾页</a></li>
    </ul>
</div>

2、css

/*分页的设置*/
.content .page-nav{


    width:100%;
    height:60px;
    float:left;
    margin:25px auto;

    line-height: 60px;
    /*使用行高来使其垂直居中*/
}

.content .page-nav ul{
    width:600px;
    /*text-align: center;*/
    /*这是文字的居中，如果要实现列表的居中，则使用margin的auto*/
    margin:auto;
    overflow: hidden;


}

.content .page-nav ul li{
    float:left;
    margin-left:25px;
    list-style: none;
    text-align: center;
}

.content .page-nav ul .first-page{
    border-radius: 50%;
    background-color: #c5c5c5;
    padding: 10px 15px;
}

四、页脚备案号的设置

（一）要点

两种颜色，
需要将前面的字体放入span标签或者div标签中

（二）代码

<div class="fonter">

    <p><span class="version">顾七超市©2022 Baidu</span>京ICP证030175号</p>
</div>
.fonter{


    width:1200px;
    height:100px;

    /*border-top: 1px solid #ccc;*/

    margin:25px auto;
}
.fonter .fonter1{
    border-top: 1px solid #ccc;
}
.fonter p{
    text-align: center;
    line-height: 75px;
}

.fonter p .version{
    color:darkred;
}

温馨提示💓

如果在运用时遇到问题，可以直接关注并私信我，发送报错问题，我看到后会第一时间回复~