# 具体遇到的问题

# 报错信息的截图
​# 相关课程内容截图

# 尝试过的解决思路和结果
center-wrap是版心的意思

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入代码，可通过选择【代码语言】突出显示

html代码

 <section class="spq common">

        <div class="center-wrap clearfix">

            <a href="">

                <em class="left btn">

                    <b></b>

                    <i></i>

                </em>

            </a>

            <a href="">

                <em class="right btn">

                    <b></b>

                    <i></i>

                </em>

            </a>

            <div class="nav">

                <ul>

                    <li>

                        <a href="">

                            <div class="pic-box">

                                <img src="images/product01.png" alt="">

                            </div>

                            <div class="word-box">

                                时尚卫生间墙面颜色 2029装饰设计

                            </div>

                        </a>

                    </li>

                    <li>

                        <a href="">

                            <div class="pic-box">

                                <img src="images/product02.png" alt="">

                            </div>

                            <div class="word-box">

                                现代北欧风格厨房装 2029饰效果图

                            </div>

                        </a>

                    </li>

                    <li>

                        <a href="">

                            <div class="pic-box">

                                <img src="images/product03.png" alt="">

                            </div>

                            <div class="word-box">

                                现代时尚北欧风格卧 2029室装饰画

                            </div>

                        </a>

                    </li>

                    <li>

                        <a href="">

                            <div class="pic-box">

                                <img src="images/product04.png" alt="">

                            </div>

                            <div class="word-box">

                                130平简约现代北欧 2029风格装修

                            </div>

                        </a>

                    </li>

                    <li>

                        <a href="">

                            <div class="pic-box">

                                <img src="images/product05.png" alt="">

                            </div>

                            <div class="word-box">

                                现代北欧风格小客厅 2029装修设计

                            </div>

                        </a>

                    </li>

                </ul>

            </div>

        </div>

    </section>

    <!-- 了解我们 -->

    <section class="ljwm">

        <div class="center-wrap common-style">

            <div class="hd">

                <p class="l">了解我们</p>

                <p class="a ">about us</p>

                <div class="line"></div>

            </div>

            <div class="bd">

                <div class="left">

                    <h2>关于我们</h2>

                    <p class="title">慕家居装饰材料有限公司</p>

                    <p class="content">慕家居家居装修网北欧风格家<br>具图片专区,是国内海量全面的<br>高质量北欧风格家具图片库…

                    </p>

                    <div class="more">

                        <a href="">了解更多</a>

                    </div>

                </div>

                <div class="pic-box">

                    <img src="images/aboutus.png" alt="">

                </div>

                <div class="menu">

                    <a href="">

                        <dl class="zx">

                            <dt>在线留言</dt>

                            <dd>on-line message</dd>

                        </dl>

                    </a>

                    <a href="">

                        <dl class="gg">

                            <dt>广告经营</dt>

                            <dd>Advertising management</dd>

                        </dl>

                    </a>

                    <a href="">

                        <dl class="wl">

                            <dt>网络咨询</dt>

                            <dd>Network consultation</dd>

                        </dl>

                    </a>

                </div>

            </div>

        </div>

    </section>

css代码

.spq {

    margin-bottom: 32px;

}

.spq .center-wrap {

    height: 233.5px;

    position: relative;

}

.spq .nav ul {}

.spq .nav ul li {

    float: left;

    margin-right: 50px;

}

.spq .nav ul li:last-child {

    margin-right: 0;

}

.spq .nav ul li:first-child {

    padding-left: 73px;

}

.spq .nav ul li .pic-box {

    width: 171px;

    height: 171px;

    overflow: hidden;

}

.spq .nav ul li .pic-box img {

    transition: transform .5s ease 0s;

}

.spq .nav ul li .pic-box img:hover {

    transform: scale(1.2);

}

.spq .nav ul li .word-box {

    width: 162px;

    height: 48px;

    font-size: 18px;

    color: #838383;

    margin-top: 10px;

}

/* 按钮 */

.common .btn {

    position: absolute;

    width: 48px;

    height: 48px;

    top: 50%;

    margin-top: -24px;

}

.common .btn b {

    width: 40px;

    height: 40px;

    background-color: rgba(1, 1, 0, 0.5);

    position: absolute;

    transform: rotate(-45deg);

}

.common .btn i {

    width: 40px;

    height: 40px;

    background-color: white;

    position: absolute;

    transform: rotate(-45deg);

}

.spq .btn:hover b {

    background-color: #0058AA;

}

/* 左按钮 */

.spq .center-wrap .left {

    left: 0;

}

.spq .left i {

    left: 5px;

}

/* 右按钮 */

.spq .right {

    right: 0px;

}

.spq .right i {

    left: -5px;

}