体系课

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

问一些有关作业的问题

来源：3-2 作业题

慕移动3569406

2020-04-12 18:38:13

作业已经做好了， 但是过程有点磕磕绊绊，也有一些疑问想问助教：

   1. 刚开始拿到这个效果图的时候有点懵， 不知道怎么下手，因为效果图测量了的是980px的，它不是指定设备下视口大小或者物理像素， 最后我还是按照效果图测量的大小， 以980px下font-size为100px，转换为rem， 不知道这样做对不对？如果对的话，以后要是拿到不规则的设计稿也是直接这样操作吗？

2.之前移动端适配的老师带我们做的那个淘宝版本的flexiable.js， 发现有个问题就是缩放会改变视口大小，这样好像是会让媒体查询用不了， 因为max-width和min-width这些特性是以视口大小为依据来判断的， 我在做作业的时候就把这个flexiable.js里面的缩放功能给删掉了， 不知道这样做对不对？

3.还有就是再次反馈一下“提问用的编辑器太小”的问题，因为代码或者图片复制进来的时候，如果要调整的话会非常麻烦，希望这个编辑器能够改大一点。

作业代码如下， 希望老师顺便点评一下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <title>Document</title>

  <link rel="stylesheet" href="css/base.css">

  <link rel="stylesheet" href="css/index.css">

  <script src="js/flexiable.js"></script>

</head>

<body>

  <!-- 第一区域 -->

  <div class="top">

    <!-- 第一区域——header -->

    <div class="top__header" id="top-header">

      <!-- 小屏下显示 -->

      <div class="top__header__title">

        <strong>imooc</strong>

        <a id="toggle-top-nav" href="###" class="top__header__title__btn"></a>

      </div>

      <ul class="top__header__nav" id="top-nav">

        <li class="top__header__nav__item"><a class="top__header__nav__link" href="#">前端</a></li>

        <li class="top__header__nav__item"><a class="top__header__nav__link" href="#">Java</a></li>

        <li class="top__header__nav__item"><a class="top__header__nav__link" href="#">ios</a></li>

        <li class="top__header__nav__item"><a class="top__header__nav__link" href="#">Android</a></li>

        <li class="top__header__nav__item"><a class="top__header__nav__link" href="#">php</a></li>

      </ul>

      <!-- 大屏下显示 -->

      <ul class="top__header__list">

        <li class="top__header__item"><a href="#">前端</a></li>

        <li class="top__header__item"><a href="#">Java</a></li>

        <li class="top__header__item"><a href="#">ios</a></li>

        <li class="top__header__item"><a href="#">Android</a></li>

        <li class="top__header__item"><a href="#">php</a></li>

      </ul>

    </div>

    <!-- 第一区域——logo和按钮 -->

    <div class="top__logo">

      <div class="top__logo__img"><img class="" src="./img/1.png" alt=""></div>

      <p class="top__logo__text">IMOOC</p>

      <p class="top__logo__btnWrap">

        <a href="###" class="top__logo__btn">start</a>

      </p>

    </div>

  </div>

  <!-- 第二区域 -->

  <div class="nav border-bottom">

    <ul class="nav__list">

      <li class="nav__item"><a class="nav__link" href="###">关于慕课网</a></li>

      <li class="nav__item"><a class="nav__link" href="###">关于课程</a></li>

      <li class="nav__item"><a class="nav__link" href="###">核心团队</a></li>

      <li class="nav__item"><a class="nav__link" href="###">新增专题</a></li>

    </ul>

  </div>

  <!-- 第三区域 -->

  <div class="article">

    <h6 class="article__title">

      响应式

    </h6>

    <p class="article__desc">

      当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用户，还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。想创建一个简单的单页式站点，还是一个专业的公司网站，亦或是一个别具一格的博客？起飞页可以满足您的所有需求。我们是响应式网站的倡导者，所有前端页面代码均采用HTML5和CSS3实现。起飞页提供了海量精美网站模版和成品网站，几乎覆盖了当今各个行业，您只需在模版上进行少量修改，即可完成自己的网站，这一切都是免费的。

    </p>

  </div>

  <!-- 第四区域 -->

  <div class="copyright">

    <span class="copyright__logo">IMOOC</span>

    <span class="copyright__website"><span class="copyright__website__welcome">welcome to</span> www.imooc.com</span>

  </div>

  <!-- 第五区域 -->

  <div class="course">

    <div class="course__title">主打课程</div>

    <div class="course__list">

      <div class="course__item"><img class="course__img" src="img/1.jpg" alt=""></div>

      <div class="course__item"><img class="course__img" src="img/2.jpg" alt=""></div>

      <div class="course__item"><img class="course__img" src="img/3.jpg" alt=""></div>

      <div class="course__item"><img class="course__img" src="img/4.jpg" alt=""></div>

      <div class="course__item"><img class="course__img" src="img/5.jpg" alt=""></div>

      <div class="course__item"><img class="course__img" src="img/6.jpg" alt=""></div>

    </div>

  </div>

  <!-- 第六区域 -->

  <div class="footer">

    Copyright &copy; 2017 imooc.com All Rights Reserved

  </div>

  <script>

    var toggleTopNav = document.getElementById("toggle-top-nav");

    var TopNav = document.getElementById("top-nav");

    var TopHeader = document.getElementById("top-header");

    var isToggleTopNav = false;

    var onScrollTimer = null;

    toggleTopNav.addEventListener('click', function(){

      isToggleTopNav = !isToggleTopNav;

      if(isToggleTopNav){

        TopNav.classList.add("top__header__nav_status_active");

      }else{

        TopNav.classList.remove("top__header__nav_status_active");

      }

    });


    window.addEventListener("scroll", function(){

      clearTimeout(onScrollTimer);

      onScrollTimer = setTimeout(function(){

      isOnScrollDown();

      }, 100);

    });

    

    function isOnScrollDown(){

    var scrollTop = document.documentElement.scrollTop;

    if(scrollTop>0){

      TopHeader.classList.add("top__header_position_fixed");

    }else{

      TopHeader.classList.remove("top__header_position_fixed");

    }

    }


    isOnScrollDown();


    

  </script>

</body>

</html>


// flexiable.js

(function(){

  var docEl = document.documentElement;

  var dpr = window.devicePixelRatio;

  dpr = dpr>=3?3:(dpr>=2?2:1);

  docEl.setAttribute("data-dpr", dpr);


  function setRemFontSize(){

    // 基准视口大小，可修改。

    var sjg = 980;

    // 基准视口的rem。 可修改

    var fz = 100;

    var docEl = document.documentElement;

    var docElWidth = docEl.clientWidth;

    console.log(docElWidth)

    // 计算当前视口rem

    docEl.style.fontSize = docElWidth / sjg * fz + "px";

  }


  setRemFontSize();


  window.addEventListener('resize', setRemFontSize)

})();


// index.css

/* top结构 */

.top{

  padding-bottom: 1.21rem;

  background-color: #B2C5CC;

}

.top__header{

  position: absolute;

  width: 100%;

  z-index: 1;

  top: 0;

}

.top__header__list{

  display: flex;

  padding-top: 0.45rem;

  justify-content: space-between;

  align-items: center;

  width: 50%;

  height: 100%;

  margin: 0 auto;

}

.top__header__title{

  position: relative;

  height: 0.8rem;

  line-height: 0.8rem;

  text-align: center;

  font-weight: bold;

  color: #fff;

  display: none;

}

.top__header__title__btn{

  position: absolute;

  top: 50%;

  right: 0.28rem;

  margin-top: -0.14rem;

  width: 0.24rem;

  height: 0.24rem;

  border: 2px solid #acc7cf;

}

.top__header__nav{

  display: none;

  overflow: hidden;

  transition: height 0.3s;

  height: 0;

}

.top__header__nav_status_active{

  height: 4rem;

}

.top__header__nav__item{

  height: 0.8rem;

  line-height: 0.8rem;

  text-align: center;

}

.top__header__nav__link{

  color: #bababa;

  display: block;

  width: 100%;

  height: 100%;

}

.top__header__nav__link:hover{

  color: #545454;

}

.top__header_position_fixed{

  position: absolute;

}

/* top__logo结构 */

.top__logo{

  padding-top: 1.7rem;

  text-align: center;

}

.top__logo__img{

  width: 1.3rem;

  margin: 0 auto 0.42rem;

}

.top__logo__text{

  color: #fff;

  font-size: 14px;

  margin-bottom: 0.76rem;

}

.top__logo__btnWrap{

  width: 1.65rem;

  height: 0.47rem;

  line-height: 0.47rem;

  margin: 0 auto;

}

.top__logo__btn{

  display: block;

  height: 100%;

  background-color: #fff;

}


/* nav */

.nav{

  position: relative;

  text-align: center;

  height: 0.78rem;

  line-height: 0.78rem;

}

.nav__list{

  display: flex;

  width: 100%;

  height: 100%;

}

.nav__item{

  width: 25%;

  font-size: 14px;

}

.nav__link{

  display: block;

  width: 100%;

}


/* article */

.article{

  padding: 1.17rem 0 1.06rem 0;

}

.article__title{

  text-align: center;

  font-size: 24px;

  color: #6a6a65;

  margin-bottom: 0.29rem;

}

.article__desc{

  width: 4.76rem;

  line-height: 26px;

  color: #8f8f8f;

  margin: 0 auto;

}


/* copyright */

.copyright{

  padding: 0 0.6rem;

  height: 0.76rem;

  display: flex;

  justify-content: space-between;

  background-color: #f4f4f4;

}

.copyright__logo{

  font-size: 16px;

  margin-top: 0.25rem;

}

.copyright__website{

  line-height: 0.76rem;

}

.copyright__website__welcome{

  color: #787672;

}

/* course */

.course{

  padding: 0.8rem 0.5rem 0.76rem;

  background: url("../img/bg.jpg") center bottom no-repeat;

  background-size: cover;

}

.course__title{

  margin-bottom: 0.18rem;

  font-size: 20px;

}

.course__list{

  width: 100%;

  height: 5.05rem;

  display: flex;

  justify-content: space-between;

  align-content: space-between;

  flex-wrap: wrap;

}

.course__item{

  width: 2.82rem;

  height: 2.4rem;

}

.course__img{

  width: 100%;

  height: 100%;

}


/* footer */

.footer{

  height: 0.55rem;

  line-height: 0.55rem;

  text-align: center;

  font-size: 16px;

  background-color: #f1f1f1;

}



/* @media */

@media (max-width:650px){

  .top__header{

    background-color: #7EA6B1;

  }

  .top__logo{

    padding-top: 1.28rem;

  }

  .top__header__nav{

    display: block;

  }

  .top__header__title{

    display: block;

  }

  .top__header__list{

    display: none;

  }

  .article__desc{

    width: 90%;

  }

  .copyright{

    height: auto;

    padding: 0.27rem 0 0.33rem 0;

    flex-direction: column;

    align-items: center;

    justify-content: space-between;

  }

  .copyright__logo{

    margin-top: 0;

  }

  .copyright__website{

    line-height: 1;

  }

  .course__list{

    height: 7.7rem;

  }

  .course__item{

    width: 4.3rem;

    height: 2.4rem;

  }

  .footer{

    font-size: 12px;

  }

  .top__header_position_fixed{

    position: fixed;

  }

}


// base.css

/* http://meyerweb.com/eric/tools/css/reset/ 

   v2.0 | 20110126

   License: none (public domain)

*/


html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

  margin: 0;

  padding: 0;

  border: 0;

  font-size: 100%;

  font: inherit;

  vertical-align: baseline;

  box-sizing: border-box;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

  display: block;

}

body {

  font-family: "PingFang SC","微软雅黑","Microsoft YaHei",Helvetica,"Helvetica Neue",Tahoma,Arial,sans-serifragino Sans GB W3,WenQuanYi Micro Hei,sans-serif !important;

  font-size: 12px;

  line-height: 1;

}

ol, ul {

  list-style: none;

}

blockquote, q {

  quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

  content: '';

  content: none;

}

table {

  border-collapse: collapse;

  border-spacing: 0;

}

a{

  text-decoration: none;

  color: #757575;

  -webkit-tap-highlight-color: transparent;

}

a:hover{

  color: #afafaf;

  text-decoration: none;

}

img{

  vertical-align: top;

  width: 100%;

}


.border-bottom{

  position: relative;

}

[data-dpr='1'] .border-bottom{

  border-bottom: 1px solid #ccc;

}

[data-dpr='2'] .border-bottom::after{

  content: '';

  position: absolute;

  width: 100%;

  height: 1px;

  left: 0;

  bottom: 0;

  transform: scaleY(.5);

  background-color: #ccc;

}

[data-dpr='3'] .border-bottom::after{

  content: '';

  position: absolute;

  width: 100%;

  height: 1px;

  left: 0;

  bottom: 0;

  transform: scaleY(.3333);

  background-color: #ccc;

}




   

写回答

1回答

好帮手慕星星

2020-04-12

已采纳

同学你好，作业相关的问题可以将写好的项目压缩，将自己的疑问点列出来放在项目中，然后打包上传：

http://img.mukewang.com/climg/5e92f50b0905f00e17490590.jpg

批复作业的老师会进行详细的解答以及给出作业相关建议的，不用担心哦。

祝学习愉快！

0

0 学习 · 6815 问题

查看课程

相似问题

老师有一些问题想问下

回答 1

老师请问这个作业题里面有用到swiper吗。。

回答 1

你好，老师，请教一个接口的问题

回答 2

老师，请问图片布局问题谢谢，

回答 1

关于像素的问题

回答 3

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