帮忙修改下，谢谢

帮忙修改下，谢谢

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}


html,

body {

  width: 100%;

  height: 100%;

}


.top {

  width: 100%;

  height: 80px;

  background-color: #07cbc9;

  overflow: hidden;

  position: relative;


}


.logo img {

  height: 80px;

  line-height: 80px;

  float: left;

  margin-left: 100px;

  width: 250px;

}


.nav ul {

  list-style: none;

  float: right;

  margin-right: 100px;



}


.nav ul li {

  height: 80px;

  line-height: 80px;

  display: inline-block;

  margin-left: 20px;

  color: white;

  font-weight: bolder;




}

.nav ul li :hover{background:#000}


.nav ul li a {

  text-decoration: none;

  font-weight: bold;

  font-family: "Microsoft YaHei UI";

  color: white;


}


.banner {

  width: 100%;

}


.banner img {

  width: 100%;

  height: 800px;


}


.img-zhezhao {

  width: 100%;

  height: 800px;

  background-color: black;

  opacity: 0.3;

  position: absolute;

  top: 80px;

  z-index: 2;

}


.row {

  height: 500px;

  width: 510px;

  position: absolute;

  top: 440px;

  margin-top: -200px;

  right: 50%;

  margin-right: -255px;




}


.rowone,

.rowtwo,

.rowthree {

  width: 505px;

  height: 39px;

  border: white solid 2px;

  color: white;

  margin-bottom: 20px;

  padding-top: 10px;




}


.rowfour {

  width: 505px;

  height: 115px;

  border: white solid 2px;

  color: white;

  margin-bottom: 20px;

  padding-top: 10px;


}


.rowfive {

  width: 127px;

  height: 39px;

  border: white solid 2px;

  color: white;

  /* padding-top: 10px; */

  line-height: 39px;

  margin: 0 auto;


}


.abouttop {

  width: 568px;

  text-align: center;

  margin: 0 auto;


}


.about .abouttop .abouttopone {

  font-size: xx-large;

  font-family: "Microsoft YaHei UI";

  margin-top: 40px;

}


.line {

  background: #07cbc9;

  width: 40px;

  height: 2px;

  margin: 10px auto;

}


.about .abouttop .abouttoptwo {

  padding: 5px 0;

  margin-bottom: 10px;

}


.about-warp {

  width: 1151px;

  margin: 0 auto;

  /* 设置相对定位，让子元素参考定位 */

  position: relative;

  /* 清除浮动带来的高度塌陷问题 */

  overflow: hidden;

  border: 1px solid red;

  margin-bottom: 20px;

}


.aboutmiddleleft {

  /* width: 370px;

height: 246px;

border: 1px solid #07cbc9; */

  float: left;


}


.aboutmiddleone {

  font-size: 30px;

  font-family: "Microsoft YaHei UI";

}


.aboutmiddletwo {

  position: absolute;

  width: 370px;

  padding: 20px;

  margin-top: 20px;

  border: 1px solid#888;

  background: rgba(255, 255, 255, 0.5);

}


.aboutmiddlethree {

  width: 102px;

  height: 45px;

  line-height: 45px;

  font-size: large;

  color: white;

  background: black;

  /* padding-top:10px; */

  margin-top: 10px;

  border: 1px solid black;

  text-align: center;

}


.aboutmiddlethree:hover {

  color: #333;

  background: transparent;

}


.aboutdoublemiddle {

  /* 设置float之后就可以在一排显示了，不用在设置display为inline了 */

  /* display: inline; */

  float: left;

  /* 通过margin-left属性，设置文字与左侧内容的间距，示例：30px 同学也可以调整为其他合适的值*/

  margin-left: 100px;

  text-align: center;


}


.about-mid-right {

  /* float: left; */

  float: right;

  /* margin-left: 30px; */

}


.about-mid-right-top,

.about-mid-right-buttom {

  border: 1px #07cbc9 solid;

  width: 236px;

  height: 142px;

  margin-bottom: 30px;


}


.title3 {

  font-size: 40px;

  font-family: "Microsoft YaHei UI";

  text-align: center;

  font-weight: bold;

}


.wenzi2 {

  font-size: 25px;

  font-family: "Microsoft YaHei UI";

  text-align: center;

}


.aboutbottom {

  width: 100%;

  position: relative;

  margin-top: 50px;

}


.picone,

.pictwo,

.picthree,

.picfour {

  float: left;

  width: 25%;

  height: 400px;

}


.containerone,

.containertwo,

.containerthree,

.containerfour {

  float: left;

  width: 25%;

  height: 400px;

  padding-left: 20px;

  background: #07cbc9;

  color: white;

}


.titleone {

  font-size: 30px;

  padding-top: 10px;

}


.titletwo {

  font-size: 20px;

  padding-top: 10px;

}


.titlethree {

  font-size: 15px;

  padding-top: 10px;

}


.button {

  width: 102px;

  height: 45px;

  line-height: 45px;

  font-size: large;

  color: white;

  background: black;

  /* padding-top:10px; */

  margin: 100px 100px;


  border: 1px solid black;

  text-align: center;

}


.gallery {

  overflow: hidden;

  width: 100%;

  margin:100px auto;


  text-align: center;

  

 

}


.galleryone {

  margin-top: 100px; 

  font-size:30px ;

}

.pic-one{float: left;

  margin-right:50px;

  text-align: center;


 

 

}

.pic-one img{

  width:360px;  

  height: 240px;

 

}


.pic-two{float: left;

  margin-right:50px;

 

  text-align: center;

 

 

}

.pic-two img{

  width:360px;  

  height: 240px;

 

}


.explain{background: #000000;

      height:64px;

    color:white;

    width:360px;

    margin-top:0;

    overflow: hidden;

      }

.clear{clear:both;}


.footer{

  width:100%;

  height:80px;

  background:#07cbc9

 

  

 

}


以下写的代码

<!DOCTYPE html>

<html lang="en">


<head>

  <meta charset="UTF-8">

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

  <title>Document</title>

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

 <!-- <script>

   onload = function(){

     console.log(66666)

    

   } -->

 </script>

 

</head>


<body>

  <div class="top">

    <div class="logo"><img src="./img/logo.png"></div>

    <div class="img-zhezhao"></div>

    <div class="nav">

      <ul>

        <li><a href="#">HOME</a></li>

        <li><a href="#">ABOUT</a></li>

        <li><a href="#">GALLERY</a></li>

        <li><a href="#">FACULTY</a></li>

        <li><a href="#">EVENTS</a></li>

        <li><a href="#">CONTACT</a></li>

      </ul>

    </div>

  </div>



  <div class="banner"><img src="./img/banner3.jpg"></div>

  <div class="row">

    <div class="rowone">your Name</div>

    <div class="rowtwo">your Phone</div>

    <div class="rowthree">your Email</div>

    <div class="rowfour">Write Your Comment Here</div>

    <div class="rowfive">SEND MESSAGE</div>


  </div>




  <div class="about">

    <div class="abouttop">

      <div class="abouttopone">ABOUT</div>

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

      <div class="abouttoptwo">

        <p>Lorem Ipsum is simply dummy text of the pringting and typesetting</p>

        <p></p>industry.Lorem Ipsum has been the industry's standard dummy</p>

        <p>text ever since the 1500s.</p>

      </div>

    </div>


    <div class="about-warp">

      <div class="aboutmiddleleft">

        <div class="aboutmiddleone">

          <p>A WORD</p> ABOUT US

        </div>

        <div class="aboutmiddletwo">

          <p>Praesent dignissim viverra est, sed</p>

          <p>bibendum ligula congue non. Sed ac nisl</p>

          <p>et felis gravida commodo? Suspendisse</p>

          <p>eget ullamcorper ipsum. Suspendisse</p>

          <p>diam amet.</p>

          <div class="aboutmiddlethree">EXPLORE</div>

        </div>

      </div>


      <div class="aboutdoublemiddle"><img src="./img/bb3.jpg"></div>


      <div class="about-mid-right">

        <div class="about-mid-right-top">

          <p class="title3">70000</p>

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

          <p class="wenzi2">Students</p>

        </div>

        <div class="about-mid-right-buttom">

          <p class="title3">600</p>

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

          <p class="wenzi2">Faculty</p>


        </div>

      </div>

    </div>

   <div class="box_container">

      <div class="box1"></div>

      <div class="box2"></div>

      <div class="box3"></div>

   </div>


   <div class="aboutbottom">

   <div class="picone"><img src="./img/b1.jpg"></div>

   <div class="containerone">

    <p class="titleone">Libary</p>

    <p class="titletwo">Lorem Ipsum is simply dummy text of the pringting and typesetting industry</p>

    <p class="titlethree">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

    <p class="button">EXPLORE</p>

  </div>

   </div>


   <div class="pictwo"><img src="./img/b2.jpg"></div>

   <div class="containertwo">

    <p class="titleone">Computer Lab</p>

    <p class="titletwo">Lorem Ipsum is simply dummy text of the pringting and typesetting industry</p>

    <p class="titlethree">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

    <p class="button">EXPLORE</p>

  </div>

   


   

   <div class="containerthree">

    <p class="titleone">Conference Hall</p>

    <p class="titletwo">Lorem Ipsum is simply dummy text of the pringting and typesetting industry</p>

    <p class="titlethree">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

    <p class="button">EXPLORE</p>

  </div>

  <div class="picthree"><img src="./img/b3.jpg"></div>

   </div>



  

   <div class="containerfour">

    <p class="titleone">Play Ground</p>

    <p class="titletwo">Lorem Ipsum is simply dummy text of the pringting and typesetting industry</p>

    <p class="titlethree">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

    <p class="button">EXPLORE</p>

  </div>

  <div class="picfour"><img src="./img/b4.jpg"></div>


  <div class="gallery">

    <div class="galleryone">GALLERY</div>

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

  <div class="gallerytwo"><p>Lorem Ipsum is simply dummy text of the pringting and typesetting</p> 

    <p>industry standard dummy text</p> 

    <p>ever since the 1500s</p></div>

  

  

  <div>

    <div class="pic-one"><img src="./img/03-01.jpg">

    <P class="explain">SCIENCELAB</P>

  </div>


  <div class="pic-one"><img src="./img/03-02.jpg">

    <P class="explain">INDOORSTUDIUM</P>

  </div>


  <div class="pic-one"><img src="./img/03-03.jpg">

    <P class="explain">TRANSPORATAION</P>

  </div>


  <div class="pic-two"><img src="./img/03-04.jpg">

    <P class="explain">KIDS ROOM</P>

  </div>

    

  <div class="pic-two"><img src="./img/03-05.jpg">

  <P class="explain">MEDITAION CLASSES</P>

</div>

  

  <div class="pic-two"><img src="./img/03-06.jpg">

  <P class="explain">KEDS PLAY GROUND</P>

</div>


  </div>

  <div class="clear"></div>


<div class="footer">&copy;imocc.com 京ICP备13046642号</div>



  </div>





</body>


</html>
weixin_慕田峪7033080 2020-05-17
源自：项目：网页布局案例   2-10 作业题
30
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

3回答
好帮手慕夭夭 2020-05-18 18:19:04

同学你好，垂直居中对齐，使用行高即可。原理是行高的值等于盒子的高度，即可垂直居中。例如这里尾部高度是80px，给文字设置行高为80px（line-height: 80px）即可居中。

祝学习愉快~

0
收起回答
好帮手慕夭夭 2020-05-18 17:42:40

同学你好，如果是做的过程中出现某一个问题，可以直接在问答区进行提问，并说明一下你的问题。如果是做完整个作业需要进行批复，因为有批作业的老师进行作业批复，而很多同学不知道交作业， 所以老师们会友情提示大家提交作业。当然了，如果已经没有上传作业的机会，在问答区提问时，可以说明一下，这样答疑老师就能了解你的情况，并为你进行指导。也建议同学以做完作业再进行提交，只完成部分作业会影响分数哦。

针对同学的作业，建议如下调整：

1.有一个结束标签忘记注释了，如下把它注释一下：

http://img1.sycdn.imooc.com//climg/5ec252700999d27c05010232.jpg

2.导航没有固定在顶部，设置固定定位才对：

http://img1.sycdn.imooc.com//climg/5ec252f109ed43ce05930352.jpg

3.行内元素默认是内容撑开的，所以鼠标移入时背景效果不太美观。

http://img1.sycdn.imooc.com//climg/5ec253150954bb2a02020060.jpg

建议设置成块元素，参考如下：

设置一些内间距效果更好

http://img1.sycdn.imooc.com//climg/5ec25375099ce1fd04040182.jpg

4.定位定位脱离文档流，banner区域会往上移动，被头部挡住一部分。建议设置上间距，如下：

http://img1.sycdn.imooc.com//climg/5ec254f4092f557603950141.jpg

5.banner区域没有设置遮罩层。思路如下：

在banner区域里面添加一个div标签，为标签设置宽高，与banner区域一致即可。然后设置一个半透明背景，background-color: rgba(0,0,0,0.5)，然后设置定位，让它显示在图片上面。注意父元素banner设置相对定位成为子元素的参照点。

6.鼠标移入表单时，边框没有变颜色。根据作业要求，需要给表单设置hover样式，具体再认真看一下要求，按照要求去完善一下哦

http://img1.sycdn.imooc.com//climg/5ec2557009a48f5505680399.jpg

7.about区域中间部分的红色边框，建议去掉。

8.about区下部分，标签嵌套有一些问题，如下修改：

http://img1.sycdn.imooc.com//climg/5ec2571e09f4ec8710980711.jpg

9.图片默认显示原图大小，且作为行内元素会有默认间距。

http://img1.sycdn.imooc.com//climg/5ec255c30938fb6209680440.jpg

在分辨率大的情况下，父元素计算的宽度比较大。图片铺不满，所以需要给图片设置宽高为100%。清除行内元素默认间隙需要转换为块元素：

http://img1.sycdn.imooc.com//climg/5ec2573909168fcb02930115.jpg

10.按钮没有居中

http://img1.sycdn.imooc.com//climg/5ec2575e0921267304830197.jpg

如下设置：

http://img1.sycdn.imooc.com//climg/5ec257a709b8eba604070425.jpg

因为父元素只设置左间距，所以左侧会多一些，按钮无法居中；

http://img1.sycdn.imooc.com//climg/5ec257c9093e850e05010380.jpg

建议把父元素的左间距，改为左右各一半：

http://img1.sycdn.imooc.com//climg/5ec257e80938dc9e00000000.jpg

11.gallery区域图片布局显示不对，以后应该显示三列。这里是因为电脑分辨率的问题，需要给图片的父元素设置固定宽度，宽度能够放下三组图片即可。另外需要给父元素设置margin:0 auto实现水平居中。

http://img1.sycdn.imooc.com//climg/5ec2585009d2bbf117230514.jpg

12.gallery区域图片是行内元素会有默认间隙，设置成块元素即可。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0
收起回答
  • 提问者 weixin_慕田峪7033080 #1
    我的底部好像文字没有居中显示，当时我设置了文字居中但是还是显示效果不佳，这个怎么修改呢？
    2020-05-18 17:55:33
好帮手慕小鱼 2020-05-18 14:14:31

同学你好，作业是可以在作业区域上传的。会有专业的批改作业的老师为同学的作业进行详细指导，并把问题与修改方法总结到文档中发送给同学。建议同学直接上传，能够帮助同学更好的完善作业哦~

http://img1.sycdn.imooc.com//climg/5ec227ac093232fd06170330.jpg

祝学习愉快~

0
收起回答
  • 提问者 weixin_慕田峪7033080 #1
    我已经上传过两次了，没有机会了，前面两次都没上传完全，这次做完了想麻烦再看下，谢谢！之前我问你们要答案，这里有个老师回复说可以粘贴到这里帮忙看看
    2020-05-18 16:16:55
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

请老师帮忙看下，谢谢
0 0 2
帮忙修改下，谢谢
12 0 1
求老师帮忙修改下代码 谢谢！
12 0 2
请老师帮忙检查下，谢谢！
0 0 2
请老师帮忙检查一下代码，谢谢
9 0 3

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码