7-2作业 iPad型号

来源：7-2 作业题

soso_crazy

2019-02-20 18:18:52

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7-2作业</title>
    <link href="移动端7-2作业.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<section class="one">
    <header>
        <a href="#">前端</a>
        <a href="#">Java</a>
        <a href="#">iOS</a>
        <a href="#">Android</a>
        <a href="#">PHP</a>
    </header>

    <img src="素材/1.png">
    <p>Imooc</p>
    <input type="submit" value="start">
</section>


<section class="two">
    <ul>
        <li>关于慕课</li>
        <li>关于课程</li>
        <li>核心团队</li>
        <li>新增专题</li>
    </ul>
</section>


<article class="three">
    <h1>响应式</h1>
    <p>
 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
    </p>
</article>

<section class="four">
    <span>IMOOC</span>
    <span>welcome to<a href="#">www.imooc.com</a></span>
</section>

<section class="five">
    <h4>主打课程</h4>
    <div class="pic">
        <img src="素材/1.jpg"/>
        <img src="素材/2.jpg"/>
        <img src="素材/3.jpg"/>
        <img src="素材/4.jpg"/>
        <img src="素材/5.jpg"/>
        <img src="素材/6.jpg"/>
    </div>
</section>

<footer>
    <p>CopyRight&copyright;2017 imooc.com All Right Reseved</p>
</footer>
<script type="text/javascript" src="移动端7-2作业.js"></script>
</body>
</html>

/*通用设置*/
*{
margin: 0;
padding: 0;
}

a{text-decoration: none;}

ul{list-style: none;}

/*body设置高度为视窗高度*/
body{
height: 100vh;
}

/*第一区域*/
.one{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 38rem; /*js文件中规定根元素的字体大小为14px*/
background-color: #B2C5CC;
}

header>a{
text-align: center;
color:#757575;
padding: 0 40px 0 40px;
}

header{
width: 600px;
padding-bottom: 50px;
}

header a:hover{
color: #afafaf;
}

.one p{
color: white;
font-size: 24px;
padding: 30px 0;
}

.one img{
margin: 30px 0;
}

.one input[type="submit"]{
margin: 30px 0;
width:70px;
height: 30px;
border: none;
background-color: rgb(255, 255, 255);
}

/*第二区域*/
.two{
display: flex;
height: 5em;
background-color: white;
}

.two ul{
display: flex;
justify-content: space-between;
flex: 1;
border-bottom: 1px solid #757575;
align-items: center;
padding: 0 50px;
color: #bababa;
}

.two ul li:hover{
color: #545454;;
}

/*第三区域*/
.three{
color: #545454;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 40rem;
background-color: white;
}

.three p{
background-color: white;
margin: 40px 0;
width: 40%;
line-height: 3rem;
}

/*第四区域*/
.four{
background-color: #afafaf;
height: 15rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.four span:first-child{
font-size: 4rem;
color:#545454;
}

.four span:last-child{
margin: 30px 0 0 0;
color: #545454;
font-size: 2rem;
}

.four span:last-child a{
font-size: 2rem;
color: black;
}

/*第五区域*/
.five{
padding: 50px 0 0 0;
height: 70rem;
background-color: white;
background: url("素材/bg.jpg") repeat;
}

.five h4{
padding-bottom: 20px;
padding-left: 50px;
color: #757575;
}

.five .pic{
margin: 0 auto;
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}

.five .pic img{
padding: 20px 50px 20px 50px;
width: 400px;
height: 300px;
}

/*第六区域*/
footer{
text-align: center;
vertical-align: center;
height: 5rem;
background-color: #bababa;
}

设置rem

//计算根元素的字体大小 rem（font size of the root element）是指相对于根元素的字体大小的单位

(function(doc, win) { //定义一个函数参数为（doc,win）
var docEl = doc.documentElement, // 将document传给doc document.documentElement获取的是html元素 document指的是整个文档结构
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //浏览器是否支持orientationchange（orientationchange当设备的方向发生变化时会触发该事件）事件，如果支持就出发orientationchange事件，如果不支持就触发resize事件
//resize 指js中的事件 widow指浏览器window对象 js BOM基础提及

recalc = function() {
var clientWidth = docEl.clientWidth; //获取的是浏览器视口的宽度，可以在控制台中输出看看
if (!clientWidth) return; //如果没有获取到宽度，直接返回，不执行下面的代码
if (clientWidth >= 640) { //对于手机屏幕来说，640px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。所以在小于640px的时候改变html的font-size属性值。100*（可见区域宽度/640）+‘px’。这是页面宽度小于640px的一个计算公式，记住就可以了。
docEl.style.fontSize = '14px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};

if (!doc.addEventListener) return; //页面不支持事件监听，直接返回
win.addEventListener(resizeEvt, recalc, false);
//resizeEvt就是上面‘ resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',’接收的事件，拿orientationchange事件举例，这行代码的意思是窗口监听orientationchange事件，执行上面的recalc方法，第三个参数默认是false，在冒泡阶段执行

doc.addEventListener('DOMContentLoaded', recalc, false);
//当初始HTML文档已完全加载和解析时，将触发DOMContentLoaded事件，然后调用上面的recalc方法，默认在冒泡阶段执行
recalc(); //调用上面recalc = function()的方法
})(document, window); //将document和window传入函数 window 指窗体，document指页面，document对象可以理解为是window对象的一个子对象。

图片部分怎样设置才排列好看，设置三行两列。
怎样将图片部分和h4标题实现左对齐？
为什么我的footer部分的vertical-align不能生效？
页面还有哪些地方需要改进的？

写回答

1回答

好帮手慕星星

2019-02-20

你好，可以参考下图中的修改：

/*通用设置*/
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

/*body设置高度为视窗高度*/
body {
    height: 100vh;
}

/*第一区域*/
.one {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 38rem;
    /*js文件中规定根元素的字体大小为14px*/
    background-color: #B2C5CC;
}

header>a {
    text-align: center;
    color: #757575;
    padding: 0 40px 0 40px;
}

header {
    width: 600px;
    padding-bottom: 50px;
}

header a:hover {
    color: #afafaf;
}

.one p {
    color: white;
    font-size: 24px;
    padding: 30px 0;
}

.one img {
    margin: 30px 0;
}

.one input[type="submit"] {
    margin: 30px 0;
    width: 70px;
    height: 30px;
    border: none;
    background-color: rgb(255, 255, 255);
}

/*第二区域*/
.two {
    display: flex;
    height: 5em;
    background-color: white;
}

.two ul {
    display: flex;
    justify-content: space-between;
    flex: 1;
    border-bottom: 1px solid #757575;
    align-items: center;
    padding: 0 50px;
    color: #bababa;
}

.two ul li:hover {
    color: #545454;
    ;
}

/*第三区域*/
.three {
    color: #545454;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 40rem;
    background-color: white;
}

.three p {
    background-color: white;
    margin: 40px 0;
    width: 40%;
    line-height: 3rem;
}

/*第四区域*/
.four {
    background-color: #afafaf;
    height: 5rem;
    display: flex;
    /*将改变主轴的方向的样式去掉，在iPhone6设备下才是上下两行排列*/
    /*flex-direction: column;*/
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
}

.four span:first-child {
    font-size: 1rem;
    color: #545454;
}

.four span:last-child {
    /*margin: 30px 0 0 0;*/
    color: #545454;
    font-size: 1rem;
}

.four span:last-child a {
    font-size: 1rem;
    color: black;
}

/*第五区域*/
.five {
    /*padding: 50px 0 0 0;*/
    height: 35rem;
    background-color: white;
    background: url("img移动端/bg.jpg") repeat;
}

.five h4 {
    padding: 1rem;
    color: #757575;
}

.five .pic {
    margin: 0 auto;
    display: flex;
    width: 100%;
    height: 30rem;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.five .pic img {
    /*设置图片宽度为百分比*/
    width: 30%;
    height: 44%;
}

/*第六区域*/
footer {
    text-align: center;
    /*p标签（块元素）不能使用vertical-align属性，*/
    /*vertical-align: center;*/
    height: 5rem;
    /*可以使用行高完成*/
    line-height: 5rem;
    background-color: #bababa;
}

可以与自己写的代码对比一下。

祝学习愉快！

0 学习 · 5012 问题

查看课程

相似问题

7-2作业

回答 5

7-2作业问题

回答 3

7-2作业问题

回答 3

7-2作业题第五区域图片放大？

回答 1

马上到期了批复作业

回答 4

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