体系课

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

老师，我的iPad的做完了，iPhone6的怎么做呀，还有那个下拉列表怎么做呀，能说一下思路吗？

来源：7-2 作业题

李可意

2019-10-30 17:24:46

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        /* 第一区域 */
        .one{
            width: 100%;
            height: 600px;
            background: #B2C5CC;
        }
        .nav{
            display: flex;
            width: 100%;
            height: 1rem;
            justify-content: center;
            align-items: center;
        }
        .nav a{
            display: flex;
            width: 1rem;
            height: 1rem;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            cursor: pointer;
        }
        .nav a:nth-child(1){
            color: #999;
        }
        /* 印花 */
        .logo{
            width: 100%;
            height: 2.5rem;
            position: relative;
            display: flex;
        }
        .logo img{
            width: 1.3rem;
            height: 1.3rem;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        .logo span{
            color: #fff;
            font-size: 24px;
            font-family: 宋体;
            margin: 0 auto;
            display: flex;
            align-items: flex-end;
        }
        .btn{
            width: 100%;
            height: 2.5rem;
            display: flex;
            justify-content: center;
        }
        .btn input{
            width: 1.5rem;
            height: .5rem;
            background: #fff;
            border: 0;
            box-shadow: 0 0 1px #999;
            display: flex;
            justify-content: center;
            margin-top: .5rem;
        }
        /* 第二区域 */
        .two{
            width: 100%;
            height: .8rem;
            border-bottom: 1px solid #999;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .two a{
            height: .8rem;
            color: #999;
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        .two a:nth-child(1){
            color: #000;
        }
        /* 第三区域 */
        .three{
            width: 100%;
            height: 4.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .three h1{
            width: 100%;
            height: 1rem;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            font-size: 30px;
            margin-bottom: .4rem;
        }
        .three article{
            width: 4rem;
            height: 2rem;
            font-size: 14px;
            display: flex;
            justify-content: center;
        }
        /* 第四部分 */
        .four{
            width: 100%;
            height: .8rem;
            background: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            display: flex;
            justify-content: space-between;
            
        }
        .four span{
            font-size: 16px;
            padding-left: .5rem;
            padding-right: .5rem;
        }
        /* 第五部分 */
        .five{
            width: 100%;
            height: 6rem;
            background: url("./images/bg.jpg") no-repeat no-repeat;
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .five .box{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }
        .five .box .item{
            margin: 10px;
        }
        .five .box img{
            width: 2.2rem;
            height: 2rem;
        }
        /* 第六部分 */
        .six{
            width: 100%;
            height: .8rem;
            background: #f4f4f4;
            align-items: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* iPhone 6 */
        @media screen and (){
            
        }
    </style>
</head>
<body>
    <div class="box">

        <!-- 第一区域 -->
        <div class="one">
            <!-- 导航 -->
            <div class="nav">
                <a href="#">HTML</a>
                <a href="#">Java</a>
                <a href="#">IOS</a>
                <a href="#">Android</a>
                <a href="#">PHP</a>
            </div>
            <div class="logo">
                <img src="./images/1.png" alt="">
                <span>IMOOC</span>
            </div>
            <div class="btn">
                <input type="button" value="start">
            </div>
        </div>
        <!-- 第二区域 -->
        <div class="two">
            <a href="#">关于慕课网</a>
            <a href="#">关于课程</a>
            <a href="#">核心团队</a>
            <a href="#">新增专题</a>
        </div>
        <!-- 第三区域 -->
        <div class="three">
            <h1>响应式</h1>
            <article>
                当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和
                可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无
                论您是普通互联网用户，还是专业网站制作人员，都能使用起页设计出
                最具专业水准的网站。想创建一个简单的单页式站点，还是一个专业的
                公司网站，亦或是一个别具-格的博客?起飞页可以满足您的所有需求。
                我们是响应式网站的倡导者，所有前端页面代码均采用BOLT5*DCSS3实
                现。起飞页提供了海里精美网站模板和成品网站，几乎覆盖了当今各个
                行业，您只需在模板上进行少童修改，即可完成自己的网站，这一切都
                是免贵的。
            </article>
        </div>
        <!-- 第四区域 -->
        <div class="four">
            <span>IMOOC</span>
            <span>welcome to <a href="#">www.imooc.com</a></span>
        </div>
        <!-- 第五区域 -->
        <div class="five">
            <div class="content">
                <div class="box">
                    <div class="item"><img src="./images/1.jpg"></div>
                    <div class="item"><img src="./images/2.jpg"></div>
                    <div class="item"><img src="./images/3.jpg"></div>
                    <div class="item"><img src="./images/4.jpg"></div>
                    <div class="item"><img src="./images/5.jpg"></div>
                    <div class="item"><img src="./images/6.jpg"></div>
                </div>
            </div>
        </div>
        <!-- 第六区域 -->
        <div class="six">
                Copyright &copy; 2017 imooc.com All Rights Reserved
        </div>

    </div>


    <script src="./index.js"></script>
</body>
</html>
/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
html {
  height:100% !important;
  min-height:100% !important;
}
body {
  margin:0;
  padding:0;
  height:100%;
  min-height:100%;
  width:100%;
  background: #FFFFFF;
  font: 14px/22px "ralewayregular", Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #888888;
  -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
  -webkit-text-size-adjust: 100%;
  letter-spacing:0.5px;
}

ol, ul {
  list-style: none;
}
nav ul {
    list-style:none;
}
li{
  list-style:none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
  text-decoration:none;
  outline:none;
  color: #333;
}
a:hover{
  cursor:pointer;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}


button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}

button,
input {
  *overflow: visible;
  line-height: normal;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}

label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
  cursor: pointer;
}

input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

textarea {
  overflow: auto;
  vertical-align: top;
}
.outline[type=text]:focus,.outline[type=submit]:focus,
.outline[type=radio]:focus,.outline[type=checkbox]:focus,.outline[type=password]:focus,button:focus{
  outline:none;
}

input[type=text]:focus,input[type=submit]:focus,
input[type=radio]:focus,input[type=checkbox]:focus,input[type=password]:focus{
  outline:none;
}
button[type=button]:focus,button[type=submit]:focus,
input[type=reset]:focus{
  outline:none;
}
.ch{display: none;}
(function(doc, win) {
    // document 文档对象
    var docEl = doc.documentElement,
        // 窗口旋转或大小改变 事件
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            // 页面宽度
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            // 根据页面宽度设置页面html根元素的字体大小
            if (clientWidth >= 640) {
                docEl.style.fontSize = '100px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
            }
        };

    // 如果不支持addEventListener方法（老版本IE）就推出当前函数
    if (!doc.addEventListener) return;
    // 绑定窗口变化事件（设置根字体）
    win.addEventListener(resizeEvt, recalc, false);
    // 绑定页面装载成功的事件（设置根字体）
    doc.addEventListener('DOMContentLoaded', recalc, false);
    recalc();
})(document, window);


写回答

2回答

好帮手慕夭夭

2019-10-30

已采纳

你好同学，老师给你一个思路，自己尝试做一做哦。参考如下

1.样式的实现思路

可以在导航的结构中加一个span用来当按钮，建议把导航再单独嵌套一个盒子

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

然后在iPhone6的媒体查询中给它写样式，即宽高和边框。（参考效果图）

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

然后还可以在整个媒体查询中，重新设定下拉菜单的样式，例如下拉菜单每一项自占一行，就可以设置成快元素，包括背景色之类的老师就不给你写了，样式自己看效果图再去做一做

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

imooc标题可以加在伪类上：

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

2.下拉菜单效果的实现思路

（1）首先使用定位把下拉菜单list隐藏，即设置top值让它往上移动，隐藏在屏幕上侧。

（2）给按钮绑定按钮span绑定点击事件，点击的时候改变下拉菜单的top值让它显示。并在样式中设置transition过渡效果。可以用一个变量记录下拉的状态。例如flag ，默认值为false（隐藏）。当点击的时候，给它取反 （即 flag =！flag ）。然后使用if..else判断，如果是false，就让它显示。如果是true， 就让它隐藏。

自己做一做，至少样式要做出来，如果效果做到哪一步不会，可以把自己写的代码粘贴上来，老师为你指导。

3.iPhone6下，页面的其他问题。

文字区域的高度太小了，导致文字溢出，与下面内容叠在一起了http://img.mukewang.com/climg/5db96b710970c20b07070598.jpg

建议把高度去掉，让内容撑开即可。这样在iPhone或者ipad下都能正常显示

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

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

第四区域把flex布局给覆盖掉

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

修改完，建议上传作业。这样批复老师给你把问题以及解决方式整理到文档中发给你，能够更好的帮你完善作业。

祝学习愉快，望采纳。

0

李可意

提问者

2019-10-30

外部引用的CSS代码是之前老师的源码，是对样式的初始化，我一起贴上来了，麻烦老师帮忙看一下，手机端怎么做


0

0 学习 · 5012 问题

查看课程

相似问题

回答 2

老师，我的下拉菜单怎么被图片挡住了啊，还有它的过渡怎么做啊

回答 1

老师请教个问题

回答 2

回答 3

回答 5

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