体系课

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

老师帮忙检查一下代码,谢谢!

来源：4-10 自由编程

慕勒1816012

2021-06-26 17:49:07

相关代码：

<!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">
  <link rel="stylesheet" href="css/css.css">
  <title>Career Builder</title>
  <meta name="description=" content="">
  <meta name="keywords" content="">
</head>
<body>
  <header>
    <div class="top">

      <!-- logo -->
      <div class="logo">Career Bulider</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>

  </header>
  <main>
    <div class="banner">
      <!-- 遮罩层 -->

        <div class="zz">

            <form>
              <input class="a" type="text" placeholder="your name">
              <input class="b" type="text" placeholder="your phone">
              <input type="email" placeholder="your email">
              <textarea placeholder="your Comment"></textarea>
              <p><input type="submit" value="SEND MESSAGE"></p>
            </form>

        </div>

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

      <!-- 表单 -->
    </div>

    <div class="about"><h3>ABOUT</h3>
      <div class="line"></div>
      <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
      <!-- about 上半部分 -->
      <div class="about-upper-half">

        <div class="pic1">
          <img src="images/bb3.jpg" alt="">
          <span class="text1">A WORD ABOUT US</span>
          <div class="d1">
            <span class="text2">Praesent dignissim viverra est,sed bibendum ligula congue non.Sed ac nisl et felis gravida commodo?</span>
            <span class="text3">Suspendisse eget ullamcorper ipsum.Suspendisse diam amet.</span>
            <a>EXPLORE</a>
          </div>
          <div class="d2">
            <p>70000</p>
            <div></div>
            <p>Students</p>
          </div>
          <div class="d3">
            <p>600</p>
            <div></div>
            <p>Faculty</p>
          </div>
        </div>




        <dl>
          <dt ></dt>
          <dd>

          </dd>
          <dt></dt>
          <dd>
            <h3>Library</h3>
            <p>Lorem Ipsum is simply ...</p>
            <p>Lorem Ipsum is ...</p>
          </dd>
          <dt></dt>
          <dd>
            <h3>Library</h3>
            <p>Lorem Ipsum is simply ...</p>
            <p>Lorem Ipsum is ...</p>
            <h3>Library</h3>
            <p>Lorem Ipsum is simply ...</p>
            <p>Lorem Ipsum is ...</p>
          </dd>
          <dt></dt>
          <dd>
            <h3>Library</h3>
            <p>Lorem Ipsum is simply ...</p>
            <p>Lorem Ipsum is ...</p>
          </dd>
          <dt></dt>
          <dd>
            <h3>GALLERY</h3>
            <p>分割线</p>
            <p>Lorem Ipsum is ...</p>
          </dd>
          <dt><img src="images/03-01.jpg" alt=""></dt>
          <dd>Science Lab</dd>
          <dt><img src="images/03-02.jpg" alt=""></dt>
          <dd>Indoor Stadium</dd>
          <dt><img src="images/03-03.jpg" alt=""></dt>
          <dd>Transportation</dd>
          <dt><img src="images/03-04.jpg" alt=""></dt>
          <dd>Kids Room</dd>
          <dt><img src="images/03-05.jpg" alt=""></dt>
          <dd>Meditation Classes</dd>
          <dt><img src="images/03-06.jpg" alt=""></dt>
          <dd>Kids Play Ground</dd>
        </dl>
      </div>
      <!-- about 下半部分 -->
      <div class="about-lower-half"></div>
    </div>

    <div class="img-text">
      <!-- 图片1 -->
      <div class="img1 comm"><img class="img" src="images/b1.jpg" alt="">

      </div>
      <!-- 文字2 -->
      <div class="text2 comm">
        <h3>Library</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
        <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonown pringter took a galley of type and scrambled it to make a type specimen book.</p>
        <a>EXPLORE</a>
      </div>
      <!-- 图片3 -->
      <div class="img3 comm"><img class="img" src="images/b2.jpg" alt=""></div>
      <!-- 文字4 -->
      <div class="text4 comm">
        <h3>Library</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
        <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonown pringter took a galley of type and scrambled it to make a type specimen book.</p>
        <a>EXPLORE</a>
      </div>
      <!-- 文字5 -->
      <div class="text5 comm"><h3>Library</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
        <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonown pringter took a galley of type and scrambled it to make a type specimen book.</p>
        <a>EXPLORE</a></div>
      <!-- 图片6 -->
      <div class="img6 comm"><img class="img" src="images/b3.jpg" alt=""></div>
      <!-- 文字7 -->
      <div class="text7 comm"><h3>Library</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
        <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonown pringter took a galley of type and scrambled it to make a type specimen book.</p>
        <a>EXPLORE</a></div>
      <!-- 图片8 -->
      <div class="img8 comm"><img class="img" src="images/b4.jpg" alt=""></div>
    </div>

    <div class="gallery">
      <!-- gallery 上半部分 -->
      <div class="gallery-upper-half"></div>
      <div class="gallery-lower-half"></div>
    </div>
  </main>
  <footer><p>&copy; 2016 imooc.com 京ICP备13046642</p></footer>
</body>
</html>

相关代码：

​body,ul,p{
  margin:0;
  padding:0
}
a{text-decoration: none;}
header{
  background-color: #07cbc9;
}
header .top{
  width: 1200px;
  margin:0 auto;
}
header .nav{
  height: 80px;
}
header .nav ul{
  float:right;
}
header .nav ul li{
  float: left;
  list-style: none;
  margin-right:20px;
  font-size:16px;
}
header .nav ul li a{
  display:block;
  color:white;
  line-height: 80px;
}
header .nav ul li a:hover{
  background-color: orange;
}
header .logo{
  float:left;
  height: 48px;
  margin-top:16px;
  font-size: 32px;
}

main .banner{
  position:relative;
}
main .banner .banner-mask img{
  width: 100%;
  height: 600px;
}
main .banner .zz{
  position:absolute;
  width: 100%;
  height: 600px;
  background-color: rgba(0,0,0,0.5);

}

main .banner input,textarea{
  display: block;
  background:none;
  width: 504px;
  height: 40px;
  margin-bottom: 20px;
  color:#808080;
  border: 1px solid #808080;
  font-size: 20px;
}

main .banner textarea{
  height: 110px;
}
main .banner input:last-child{
  display: block;
  background:none;
  width: 200px;
  height: 40px;
  margin-bottom: 20px;
  margin-left:155px;
}

main .banner form{
  position:absolute;
  left:50%;
  margin-left:-255px;

  width: 510px;
  margin-top:100px;
}

.about{
  text-align: center;
  width: 100%;
}
.about h3{
  font-size:32px;
  margin:30px 0px 0px;
}
.about .line{
  width: 60px;
  height: 3px;
  background-color: #07CBC9;
  margin:10px auto;

}
.about .content{
  margin:0 auto;
  width: 510px;
  color:gray;
  font-size:14px;
}
.about .pic1{
  position:relative;
  width: 1201px;
  height: 464px;

  margin: 0 auto;
}
.about .pic1 img{
  width: 650px;
  height: 435px;
  margin-top:30px;
}
.about .pic1 .text1{
  position:absolute;
  left:0px;
  width: 150px;
  text-align: left;
  font-size:28px;
  font-weight: 600;
  margin-top:30px;
}
.about .pic1 .d1{
  position: absolute;
  left:0px;
  top:150px;
  width: 350px;
  height: 230px;
  background-color: #07cbc9;
  text-align: left;
  border: 1px solid gray;
  background: rgba(255, 255, 255, 0.5);
  font-size: 18px;
}
.about .pic1 .d1 .text2{
  display: block;
  left:0px;
  width: 300px;
  text-align: left;
  font-size:18px;
  margin:30px 20px 0;
}
.about .pic1 .text3{
  display: block;
  left:0px;
  width: 300px;
  text-align: left;
  font-size:18px;
  margin-top:30px;
  margin:0 20px 0;
} 
.about .pic1 a{
  display: block;
  background-color:#000;
  color:white;
  width: 140px;
  height: 40px;
  text-align: center;
  margin: 20px;
  line-height: 40px;
}
.about .pic1 .d2{
  position:absolute;
  right:0;
  top:30px;
  width: 260px;
  height: 160px;
  border: 1px solid #07cdc9;
}

.about .pic1 .d2 p:first-child{
  font-size: 28px;
  font-weight: bold;
  margin-top:40px;
}

.about .pic1 .d2 p:last-child{
  margin-top: 20px;
}

.about .pic1 .d2 div{
  position:absolute;
  width: 60px;
  height: 3px;
  background-color: #07CBC9;
  top:85px;
  left:50%;
  margin-left:-30px;
}

.about .pic1 .d3{
  position:absolute;
  right:0;
  top:220px;
  width: 260px;
  height: 160px;
  border: 1px solid #07cdc9;
}
.about .pic1 .d3 p:first-child{
  font-size: 28px;
  font-weight: bold;
  margin-top:40px;
}
.about .pic1 .d3 p:last-child{
  margin-top: 20px;
}

.about .pic1 .d3 div{
  position:absolute;
  width: 60px;
  height: 3px;
  background-color: #07CBC9;
  top:85px;
  left:50%;
  margin-left:-30px;
}
.img-text{
  width: 100%;
  height: 760px;
  background-color: #07cbc9;
}
.img-text .comm{
  float: left;
  width: 25%;
  height: 380px;
}
.img-text img.img{
  height: 380px;
  width: 100%;
}
.img-text h3{
  color: white;
  margin:20px 20px 30px;
}
.img-text .comm p:nth-of-type(1){
  color:white;
  margin-left:20px;
  width: 92%;
}
.img-text .comm p:nth-of-type(2){
  color:gray;
  font-size:14px;
  margin:20px 20px 30px;
  width:92%;
}
.img-text .comm a{
  display: block;
  background-color: #000;
  color:#FFF;
  width: 138px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin:0 auto;


}


写回答

1回答

好帮手慕慕子

2021-06-26

同学你好，本练习题效果实现是正确的，不过代码中有一点可以优化下，如下图所示：

http://img.mukewang.com/climg/60d6fd3c09cf9c4318990905.jpg

由于html结构中about区域部分多余的代码没有删除，gallery区域的内容位置不对，导致显示效果不对。

建议：

http://img.mukewang.com/climg/60d6fde3091e02ff07400274.jpg​

然后调整gallery区域的html结构内容，如下：

http://img.mukewang.com/climg/60d6fe1509cb47dd07730576.jpg

祝学习愉快~

0

0 学习 · 15276 问题

查看课程

相似问题

请老师帮忙检查下代码，谢谢

回答 1

请老师帮忙检查代码，谢谢

回答 1

老师请您帮忙检查一下代码谢谢

回答 1

老师请您帮忙检查一下代码，谢谢

回答 1

麻烦老师帮忙看下代码是否有问题 谢谢

回答 1

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