体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

请老师检查一下作业

来源：4-6 商品展示、返回顶部、帮助、底部footer区

粉墨登场

2021-02-27 16:44:22

问题描述：

请老师检查一下作业。


相关代码：

HTML结构
​<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局练习题</title>

    <!-- 引入重置样式及常用class类名的文件 -->
    <link rel="stylesheet" href="base.css">

    <!-- 引入栅格系统的css样式文件 -->
    <link rel="stylesheet" href="grid.css">

    <!-- 引入css样式文件 -->
    <link rel="stylesheet" href="index.css">

</head>

<body>

    <!-- 这是顶部logo和导航栏的结构内容 -->
    <header class="header-container">
        <div class="container">

            <div class="row">

                <!-- 左侧logo图片的容器 -->
                <div class="header-logo-container col-8 col-md-3">

                    <a href="响应式布局练习题.html" class="header-log">
                        <img src="img/logo.svg" alt="cellphone">
                    </a>

                </div>


                <!-- 这是小屏时才会出现的导航项按钮，超小屏和小屏显示，中屏及以上尺寸消失 -->
                <div class="header-btn-container col-4 md-display-none">


                    <!-- button标签最好将type指定，不然在不同浏览器下解析的类型不一样，可能是button，也可能是submit -->
                    <button type="button" class="btn-toggle" id="btn-toggle">


                        <!-- 这是按钮里面的三条横杠的结构 -->
                        <span class="btn-toggle-bar"></span>
                        <span class="btn-toggle-bar"></span>
                        <span class="btn-toggle-bar"></span>

                    </button>
                </div>


                <!-- 这是中屏及以上才会出现的导航项,超小屏及小屏消失,中屏及以上显示 -->
                <div class="header-nav-container col-md-9 display-none md-display-block">


                    <ul class="header-nav">
                        <li class="header-nav-item">
                            <a href="##" class="header-nav-link">
                                手机&amp;平板

                            </a>
                        </li>

                        <li class="header-nav-item">
                            <a href="##" class="header-nav-link">
                                电视&amp;影音

                            </a>
                        </li>

                        <li class="header-nav-item">
                            <a href="##" class="header-nav-link">
                                生活家电

                            </a>
                        </li>

                        <li class="header-nav-item">
                            <a href="##" class="header-nav-link">
                                电脑/办公/存储
                            </a>
                        </li>

                        <li class="header-nav-item">
                            <a href="##" class="header-nav-link">
                                网上商城
                            </a>
                        </li>
                    </ul>

                </div>

            </div>

        </div>
    </header>




    <!-- 在超小屏及小屏时导航区域结构内容 -->
    <nav class="nav-container md-display-none" id="nav">

        <ul class="container">
            <li>
                <a href="##" class="nav-link">
                    手机&amp;平板
                </a>
            </li>
            <li>
                <a href="##" class="nav-link">
                    电视&amp;影音
                </a>
            </li>
            <li>
                <a href="##" class="nav-link">
                    生活家电
                </a>
            </li>
            <li>
                <a href="##" class="nav-link">
                    电脑/办公/存储
                </a>
            </li>
            <li>
                <a href="##" class="nav-link">
                    网上商城
                </a>
            </li>
        </ul>
    </nav>




    <!-- 幻灯片区域的结构内容 -->
    <section class="slider-container">
        <div class="container">
            <div class="row">

                <!-- 幻灯片区域的文字容器 -->
                <div class="slider-text col-md-5 col-md-push-7">
                    <h3 class="slider-title">Galaxy S9 | S9+</h3>
                    <h4 class="slider-subtitle">冰蓝 焕新上市</h4>

                    <div class="slider-btn-box">
                        <a href="##" class="btn-rounded">了解更多</a>
                        <a href="##" class="btn-rounded">立即购买</a>
                    </div>
                </div>


                <!-- 幻灯片区域的幻灯片容器 -->
                <div class="slider-img col-md-7 col-md-pull-5">
                    <img src="img/1.png" alt="samsunPhone">
                </div>

            </div>
        </div>
    </section>




    <!-- 商品展示区域的结构内容 -->
    <section class="showImg-container">
        <div class="container">
            <div class="row">

                <div class="img-box col-md-4">
                    <a href="##" class="img-link">
                        <img src="img/2-1.jpg">
                    </a>

                </div>

                <div class="img-box col-md-4">
                    <a href="##" class="img-link">
                        <img src="img/2-2.jpg">
                    </a>

                </div>

                <div class="img-box col-md-4">
                    <a href="##" class="img-link">
                        <img src="img/2-3.jpg">
                    </a>

                </div>

            </div>
        </div>
    </section>


    <!-- 超小屏及小屏显示的回到顶部的结构内容 -->
    <section class="back-to-top container">
        <div class="row">
            <div class="md-display-none col-md-12">
                <a href="##" class="back-to-top-link back">
                    &gt;&gt; 回到顶部 &lt;&lt;
                </a>
            </div>
        </div>
    </section>




    <!-- 商品介绍区域的结构内容 -->
    <section class="phone-introduce">

        <div class="container">
            <p class="phone-text">
                * Galaxy A9s具备后置四摄功能，Galaxy A6s为后置双摄功能
            </p>

            <p class="phone-text">
                * Galaxy S9 | S9+广告中手机背面图是Galaxy S9+，Galaxy S9为背面单摄像头产品。
            </p>

            <p class="phone-text">
                * 本网站的产品图片以及型号、数据、功能、性能、规格参数等仅供参考，三星可能对上述内容进行修改，具体信息请参照产品实物、产品说明书。
            </p>

            <p class="phone-text">
                * 除非经特殊说明，本网站中所涉及的数据均为三星内部测试结果，涉及的对比均为与三星产品相比较。
            </p>
        </div>

    </section>





    <!-- 中屏及以上屏幕才显示出来的回到顶部顶部结构内容 -->
    <section class="md-back-to-top container">
        <div class="row">
            <div class="col-md-12 display-none md-display-block">
                <a href="##" class="md-back-to-top-link back">
                    &gt;&gt; 回到顶部 &lt;&lt;
                </a>
            </div>
        </div>
    </section>




    <!-- 帮助区域结构内容 -->
    <section class="help-container">

        <div class="container">
            <div class="row">

                <div class="col-6 col-md-3">
                    <div class="help-box">
                        <p class="help-title">
                            <a href="##">
                                网站地图
                            </a>

                        </p>
                        <p class="help-text">
                            <a href="##">
                                关于三星
                            </a>

                        </p>
                        <p class="help-text">
                            <a href="##">
                                投资者关系
                            </a>

                        </p>
                        <p class="help-text">
                            <a href="##">
                                新闻中心
                            </a>

                        </p>
                        <p class="help-text">
                            <a href="##">
                                人才招聘
                            </a>

                        </p>
                        <p class="help-text">
                            <a href="##">
                                三星开发者网站
                            </a>

                        </p>
                    </div>
                </div>


                <div class="col-6 col-md-3">
                    <div class="help-box">
                        <p class="help-title">
                            <a href="##">
                                三星商店
                            </a>

                        </p>
                        <p class="help-text">
                            <a href="##">
                                网上商城
                            </a>

                        </p>
                        <p class="help-text">
                            <a href="##">
                                最新活动
                            </a>

                        </p>
                        <p class="help-text">
                            <a href="##">
                                授权体验店
                            </a>

                        </p>
                        <p class="help-text">
                            <a href="##">
                                全产品专卖店
                            </a>

                        </p>
                        <p class="help-text">
                            <a href="##">
                                三星视频空间
                            </a>

                        </p>
                    </div>
                </div>


                <div class="col-6 col-md-3">
                    <div class="help-box">
                        <p class="help-title">
                            <a href="##">
                                服务支持
                            </a>

                        </p>
                        <p class="help-text">
                            <a href="##">
                                在线服务
                            </a>

                        </p>
                        <p class="help-text">
                            <a href="##">
                                邮件咨询
                            </a>

                        </p>
                        <p class="help-text">
                            <a href="##">
                                联系我们
                            </a>

                        </p>
                        <p class="help-text">
                            <a href="##">
                                服务中心查询
                            </a>

                        </p>
                        <p class="help-text">
                            <a href="##">
                                三星专卖店招募
                            </a>

                        </p>
                    </div>
                </div>


                <div class="col-6 col-md-3">
                    <div class="help-box">
                        <p class="help-title">
                            <a href="##">
                                官方分享
                            </a>

                        </p>

                        <a href="##" class="icon-link">
                            <img src="img/weibo.svg">
                        </a>

                        <a href="##" class="icon-link">
                            <img src="img/weixin.svg">
                        </a>

                    </div>
                </div>
            </div>

        </div>
    </section>




    <!-- 页脚区域内容结构 -->
    <footer class="footer-container">
        <div class="container">
            <div class="row">
                <div class="col-md-10">
                    <a href="##" class="footer-link">
                        服务条款
                    </a>

                    <a href="##" class="footer-link">
                        重要声明
                    </a>

                    <a href="##" class="footer-link">
                        隐私政策
                    </a>

                </div>

                <div class="col-md-2">
                    <a href="##" class="footer-link">
                        中国/中文&gt;
                    </a>
                </div>

            </div>


            <p class="footer-text">
                此网页推荐使用IE Edge浏览器、Chrome浏览器、Safari浏览器或其它新式浏览器进行浏览
            </p>

            <p class="footer-text">
                京ICP备05068163号 京公网安备110105011756号
            </p>

        </div>
    </footer>







<!-- JS代码开始 -->
<script>
    // 获取导航项外部容器的DOM元素
    var navBox = document.getElementById('nav'),

        navExtendedClass = 'nav-container-extended';



    document.getElementById('btn-toggle').onclick = function () {

        // DOM元素.classList 可以返回该DOM元素的所有class类名，其中有一个方法contains()，可以判断传入的类名是否存在

        // 如果DOM元素中的class类名包含nav-container-extended类名，表示现在是展开的状态，将类名nav-container-extended去除，达到隐藏的效果
        if (navBox.classList.contains(navExtendedClass)) {

            navBox.classList.remove(navExtendedClass);


            // 相反如果没有nav-container-extended类名，表示是隐藏的，添加nav-container-extended类名，使其达到展开的效果
        } else {

            navBox.classList.add(navExtendedClass);
        };
    };



    // 回到顶部的功能
    var backToTop = document.getElementsByClassName('back');

    for(var x = 0; x < backToTop.length; x++) {
        backToTop[x].onclick = function () {
            document.documentElement.scrollTop = 0;
        };
    };
</script>







</body>

</html>


相关代码：

CSS样式


/* -- 1. 布局的样式开始 -- */

/* 1.1 header顶部区域的布局样式 */

.header-container {
    background-color: #fff;
    border-bottom: 1px solid #dadada;
}

.header-logo-container,
.header-btn-container,
.header-nav-container {
    height: 64px;
}



.header-btn-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


/* 1.2 超小屏及小屏时nav导航项的布局样式 */
.nav-container {
    border-bottom: 1px solid #dadada;
    transition: height 0.6s;
    height: 0;
    overflow: hidden;
    position: relative;
    top: -1px;
}

/* 1.3 这是点击导航按钮时才会给导航容器添加的class类名，通过JS添加 */
.nav-container-extended {
    top: 0;
    height: 201px;
}


/* 1.4 幻灯片最外层容器的布局样式 */
.slider-container {
    margin: 20px 0;
}

.slider-container .row {
    background: #f5f5f5;
    margin-left: 0;
    margin-right: 0;
}


/* 

中屏及以上尺寸的屏幕时，row容器变成弹性盒模型，使得里面的子元素（文字内容）垂直居中 

*/
@media (min-width: 768px) {
    .slider-container .row {
        display: flex;
        align-items: center;
    }
}


.slider-text {
    padding: 20px 0;
}


/* -- 1. 布局的样式结束 -- */




/* -- 2. 组件的样式开始 -- */

/* 2.1 btn-toggle组件的样式 */
.btn-toggle {
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background: transparent;
}

.btn-toggle:hover {
    background: #f9f9f9;
}

.btn-toggle-bar {
    display: block;
    width: 24px;
    height: 4px;
    border-radius: 2px;
    background: #363636;
}

.btn-toggle-bar + .btn-toggle-bar {
    margin-top: 4px;
}

.btn-toggle:hover>.btn-toggle-bar {
    background: #1428a0;
}


/* 2.2 幻灯片区域组件按钮的样式 */
.btn-rounded {
    display: inline-block;
    padding: 10px 30px;
    background: transparent;
    border: 1px solid #000;
    border-radius: 30px;
    color: #000;
    font: bold 16px '微软雅黑';
    transition: 0.3s;
}

.btn-rounded:hover {
    background: #000;
    color: #fff;
}


/* -- 2. 组件的样式结束 -- */




/* -- 3. 内容的样式开始 -- */

/* 3.1 header顶部中左侧logo区域内容的样式开始 */
.header-log {
    width: 136px;
    height: 100%;
    display: flex;
    align-items: center;
}



/* 3.2 header顶部右侧导航项内容的样式开始 */
.header-nav,
.header-nav-item,
.header-nav-link {
    height: 100%;
}

.header-nav {
    display: flex;
    justify-content: flex-end;
    font-size: 14px;
}

.header-nav-item + .header-nav-item {
    margin-left: 24px;
}

.header-nav-link {
    line-height: 64px;
    font-weight: bold;
    height: 100%;
    display: inline-block;
}



/* 3.3 每一个导航项的内容的样式 */
.nav-link {
    display: block;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
}


/* 3.4 幻灯片区域文字内容样式 */

.slider-title,
.slider-subtitle,
.slider-btn-box {
    margin-bottom: 20px;
    text-align: center;
}

.slider-title {
    font-size: 30px;
}

.slider-subtitle {
    font: normal 20px '微软雅黑';
}


/* 3.5 幻灯片区域按钮独有的内容样式 */

.slider-btn-box>.btn-rounded {
    margin-right: 10px;
    margin-bottom: 10px;
}

.slider-btn-box>.btn-rounded:last-child {
    margin-right: 0;
}




/* 3.6 商品展示区域三张图片的内容样式 */

.img-link {
    display: inline-block;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.img-link>img {
    transition: 0.5s;
}

.img-link:hover>img {
    transform: scale(1.3);
}




/* 3.7 商品介绍文字区域的内容样式 */
.phone-introduce {
    background: #f5f5f5;
    margin-top: 10px;
    font-size: 12px;
}

.phone-introduce>.container {
    padding-top: 20px;
}

.phone-text+.phone-text {
    margin-top: 10px;
}


/* 3.8 小屏及超小屏时才显示的回到顶部的样式 */
.back-to-top {
    text-align: center;
    height: 30px;
    margin-top: 10px;
}

.back-to-top>.row,
.back-to-top .col-md-12 {
    height: 100%;
}

.back-to-top-link {
    font: 16px/30px '微软雅黑';
}

@media (min-width: 768px) {
    .back-to-top {
        height: 0;
    }
}



/* 3.9 中屏及以上才会出现的回到顶部按钮的样式 */
.md-back-to-top {
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: right;
}





/* 3.10 帮助区域的内容样式 */
.help-container {
    background: #f5f5f5;
    padding-top: 15px;
    text-align: left;
}

.help-title>a {
    font: bold 17px '微软雅黑';

}

.help-title {
    margin-bottom: 10px;
}

.help-text {
    margin-bottom: 10px;
}

.icon-link {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-top: 5px;
}

.icon-link + .icon-link {
    margin-left: 10px;
}

@media (min-width: 576px) {
    .help-box {
        margin-bottom: 30px;
    }
}




/* 3.11 页脚区域样式 */

.footer-container {
    height: 165px;
    background: gray;
    padding-top: 15px;
}

.footer-link {
    color: #fff;
}



@media (min-width: 576px) {
    .footer-container .col-md-2 {
        margin-top: 15px;
    }
}

@media (min-width: 768px) {
    .footer-container .col-md-2 {
        margin-top: 0;
    }
}

.footer-text {
    color: #ccc;
    margin-top: 15px;
}


@media (min-width: 768px) {
    .footer-container {
        height: 120px;
    }
}

/* -- 3. 内容的样式结束 -- */



相关代码：

CSS重置样式
​
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: 14px;
}

li {
    list-style: none;
}

a {
    font-size: 14px;
    color: #363636;
    text-decoration: none;
}

a:hover {
    color: #1428a0;
}

img {
    width: 100%;
    border: none;

    /* img标签默认是内联块元素：display:inline-block  如果放在一个容器中，图片底部与容器底部会有间隙，不美观，有两种解决方法：第一种：将img的display变为block，但是这样变成块元素就无法跟其它元素并排了。 第二种：添加vertical-align: top; 通常使用第二种解决方式 */
    vertical-align: top;
}


写回答

1回答

好帮手慕星星

2021-02-27

同学你好，老师用了另外一个问题中的grid.css代码进行了测试，中间图片元素盒子的高度出现了问题

http://img.mukewang.com/climg/603a0ff609b8196315930745.jpg

a设置了高度为100%，图片没有那么高，所以导致有部分空白，建议将设置的高度为100%去掉即可

http://img.mukewang.com/climg/603a103709cc27e904300174.jpg​

其他效果没有问题。祝学习愉快！

0

0 学习 · 6815 问题

查看课程

相似问题

老师检查一下

回答 1

请老师检查一下作业

回答 2

请老师检查

回答 1

老师请问一下

回答 1

老师检查一下

回答 1

打开慕课网App查看更多内容