体系课

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

老师，我有三个问题待解决

来源：4-3 项目作业

weixin_慕侠0167486

2020-08-05 16:10:14

一：banner区域的表单怎么实现文本框提示，点击后提示消失？
二：Explore这个方框可以怎么优化？
三：我的页脚为什么不能添加到最底下？

<!DOCTYPE html>
<html>
<head>
  <title>Career Builder</title>
  <link rel="stylesheet" type="text/css" href="first.css">
  <script type="text/javascript" src="first.js"></script>
</head>
<body>
  <div class="header">
    <div class="logo">
      <img src="images/logo.png">
    </div>
    <!-- 页眉菜单 -->
    <span class="menu">
      <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>
    </span>
  </div>
  <!-- 正文区 -->
  <div class="content">
    <div class="banner">
      <img src="images/banner3.jpg">
    </div>

    <div class="grxx">
      <ul>
        <li><input type="text" name="name" id="name" value="Your Name" onmouseover="a()" onmouseleave="a()" onfocus="show1()" onblur="displear1()"></li>
        <li><input type="text" name="phone" id="phone" value="Your Phone" onmouseover="b()" onmouseleave="b()"></li>
        <li><input type="text" name="email" id="email" value="Your Email" onmouseover="c()" onmouseleave="c()"></li>
        <li><input type="text" name="comment" id="comment" value="Write Your Comment Here" onmouseover="d()" onmouseleave="d()"></li>
        <li><input type="button" name="btn" id="btn" value="SEND MASSAGE" onmouseover="e()" onmouseleave="e()"></li>
      </ul>
    </div>

    <div class="intro">
      <h1>ABOUT</h1>
      <label class="line"></label>
      <p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting<br>
      industry. Lorem Ipsum has been the industry's standard dummy<br>
      text ever since the 1500s.
      </p>
      <div class="photo"><img src="images/bb3.jpg"></div>
      <!-- 副标题 -->
      <div class="fbt1">
        <div class="fubiaoti">
          <span class="p2">A WORD</span><br>
          <span class="p22">ABOUT US</span>
        </div>
        <div class="fubiaoti-neirong">
        <p class="p3">Praesent dignissim viverra est, sed<br>
          bibendum ligula congue non. Sed ac nisl<br>
          et felis gravida commodo? Suspendisse<br>
          eget ullamcorper ipsum. Suspendisse<br>
          diam amet.<br>
        </p>
        <a href="#">EXPLORE</a>
        </div>
      </div>
      <div class="fbt2">
        <div class="renshu">
          <span class="qiqian">7000</span><br>
          <label class="line1"></label>
          <span class="Students">Students</span>
        </div>
        <div class="shequ">
          <span class="liubai">600</span><br>
          <label class="line2"></label>
          <span class="Factulty">Faculty</span>
        </div>
      </div>
    </div>

    <div class="shinei">
      <div class="Library">
        <div class="Library-photo">
          <img src="images/b1.jpg">
        </div>
        <div class="Library-text">
          <h2>Library</h2>
          <div class="text1">
            Lorem Ipsum is simply dummy text of the<br>
            printing and typesetting industry<br>
          </div>
          <div class="text2">
            Lorem Ipsum has been the industry's standard dummy<br>
            text ever since the 1500s, when an unknown printer took<br>
            a galley of type and scrambled it to make a type<br>
            specimen book.<br>
          </div>
          <div class="EXPLORE">
            <a href="#">EXPLORE</a>
          </div>
        </div>
      </div>
      <div class="ComputerLap">
          <div class="cl-photo">
            <img src="images/b2.jpg">
          </div>
          <div class="cl-text">
           <h2>Computer Lap</h2>
            <div class="text1">
              Lorem Ipsum is simply dummy text of the<br>
              printing and typesetting industry<br>
            </div>
            <div class="text2">
              Lorem Ipsum has been the industry's standard dummy<br>
              text ever since the 1500s, when an unknown printer took<br>
              a galley of type and scrambled it to make a type<br>
              specimen book.<br>
            </div>
            <div class="EXPLORE">
              <a href="#">EXPLORE</a>
            </div>
          </div>
      </div>
      <div class="ConferenceHall">
          <div class="ch-text">
           <h2>Conference Hall</h2>
            <div class="text1">
              Lorem Ipsum is simply dummy text of the<br>
              printing and typesetting industry<br>
            </div>
            <div class="text2">
              Lorem Ipsum has been the industry's standard dummy<br>
              text ever since the 1500s, when an unknown printer took<br>
              a galley of type and scrambled it to make a type<br>
              specimen book.<br>
            </div>
            <div class="EXPLORE">
              <a href="#">EXPLORE</a>
            </div>
          </div>
          <div class="ch-photo">
            <img src="images/b3.jpg">
          </div>
      </div>
      <div class="PlayGround">
          <div class="pg-text">
           <h2>Conference Hall</h2>
            <div class="text1">
              Lorem Ipsum is simply dummy text of the<br>
              printing and typesetting industry<br>
            </div>
            <div class="text2">
              Lorem Ipsum has been the industry's standard dummy<br>
              text ever since the 1500s, when an unknown printer took<br>
              a galley of type and scrambled it to make a type<br>
              specimen book.<br>
            </div>
            <div class="EXPLORE">
              <a href="#">EXPLORE</a>
            </div>
          </div>
          <div class="pg-photo">
            <img src="images/b4.jpg">
          </div>
      </div>
    </div>

    <div class="GALLERY">
      <h1>GALLERY</h1>
      <label class="line"></label>
      <div class="GALLERY-neirong">
         Lorem Ipsum has been the industry's standard dummy<br>
         text ever since the 1500s, when an unknown printer took<br>
         a galley of type and scrambled it to make a type<br>
         specimen book.<br>
      </div>
      <div class="GALLERY-photo">
        <div class="diyi">
          <img src="images/03-01.jpg">
          <div class="black"></div>
          <div class="sl">SCIENCE LAB</div>
        </div>
        <div class="dier">
          <img src="images/03-02.jpg">
          <div class="black"></div>
          <div class="sl">INDOOR STADIUM</div>        
        </div>
        <div class="disan">
          <img src="images/03-03.jpg">
          <div class="black"></div>
          <div class="sl">TRANSPORTATION</div>        
        </div>
        <div class="disi">
          <img src="images/03-04.jpg">
          <div class="black"></div>
          <div class="sl">KIDS ROOM</div>        
        </div>
        <div class="diwu">
          <img src="images/03-05.jpg">
          <div class="black"></div>
          <div class="sl">MEDITATION CLASSES</div>        
        </div>
        <div class="diliu">
          <img src="images/03-06.jpg">
          <div class="black"></div>
          <div class="sl">KIDS PLAY GROUND</div>        
        </div>          
      </div>
    </div>
  </div>
  <!--页脚区 -->
  <div class="footer">
    <div class="beijing"></div>
    <div class="text">©2016 imooc.com 京ICP备13046642号</div>
  </div>
</body>
</html>

/*页眉区*/
.header{
    height:48px;
    width:100%;
    background-color:#07cbc9;
}

.header .menu ul{
    position:absolute;
    top:6px;
    right:10px;
    list-style: none;
    margin-right: 80px;
}

.header .menu ul li{
    margin-right:15px;
    float:left;
}

a{
    color:#fff;
    text-decoration:none;
}

a:hover{
    background-color: black;
}

/*正文海报区*/
.content .banner img{
    height:560px;
    width:100%;
}


.content .grxx ul{
    position:absolute;
    top:269px;
    left:600px;
    list-style: none;
}

.content .grxx ul li{
    margin-bottom:8px;
}

.content .grxx ul li #name{
    width:250px;
    background-color: transparent;
    border:1px solid white;
    color:white;
    font-weight: bold;
}

.content .grxx ul li #phone{
    width:250px;
    background-color: transparent;
    border:1px solid white;
    color:white;
}

.content .grxx ul li #email{
    width:250px;
    background-color: transparent;
    border:1px solid white;
    color:white;
}

.content .grxx ul li #comment{
    width:250px;
    height: 70px;
    background-color: transparent;
    border:1px solid white;
    color:#fff;
}

.content .grxx ul li #btn{
    border:1px solid white;
    background-color: transparent;
    color:#fff;
    position: relative;
    left:68px;
}

/*正文about区*/
.content .intro h1{
    margin-top: 30px;
    text-align: center;
    /*text-decoration: underline #07cbc9;*/
}

.content .intro .line{
    background-color:#07cbc9;
    display: block;
    width:40px;
    height:2px;
    margin:15px auto; 
}

.content .intro .p1{
    text-align: center;
}

.content .intro .photo img{
    position:relative;
    left:500px;
    top:10px;
    width:500px;
    height:250px;
}

.content .intro .fbt1{
    position:absolute;
    left:300px;
    top:800px;
}

.content .intro .fbt1 .fubiaoti{
    font-size: 20px;
    position: relative;
    /*left: 20px;*/
    font-weight: bold;
}

.content .intro .fbt1 .fubiaoti .p2{
    margin-left: 10px;
}

.content .intro .fbt1 .fubiaoti .p22{
    margin-left: 3px;
}

.content .intro .fbt1 .fubiaoti-neirong{
    background-color: rgba(255,255,255,0.5);
    border:1px solid #C5C5C5;
}

.content .intro .fbt1 .fubiaoti-neirong a{
    background-color: black;
    color:white;
    position: relative;
    left: 15px;
    bottom: 10px;
    border:none;
}

.content .intro .fbt1 .fubiaoti-neirong .p3{
    margin-left: 15px;
    margin-right: 15px;
}

.content .intro .fbt2{
    position: absolute;
    top:800px;
    right:350px;
}

.content .intro .fbt2 .renshu{
    border:1px solid #07cbc9;
    width: 150px;
    height: 90px;
    text-align: center;
    padding-top: 23px;
}

.content .intro .fbt2 .renshu .line1{
    background-color:#07cbc9;
    display: block;
    width:20px;
    height:2.5px;
    margin:10px auto;
}

.content .intro .fbt2 .shequ{
    margin-top: 15px;
    border:1px solid #07cbc9;
    width: 150px;
    height: 90px;
    text-align: center;
    padding-top: 23px;
}

.content .intro .fbt2 .renshu .qiqian{
    font-weight: bold;
    font-size:25px;

}

.content .intro .fbt2 .shequ .liubai{
    font-size: 25px;
    font-weight: bold;
}

.content .intro .fbt2 .shequ .line2{
    background-color:#07cbc9;
    display: block;
    width:20px;
    height:2px;
    margin:10px auto;
}

.content .shinei .Library .Library-photo img{
    width: 25%;
    height:300px;
    position:relative;
    top:80px;
    float:left;
}

.content .shinei .Library .Library-text{
    float:left;
    position: relative;
    top:80px;
    background-color: #07cbc9;
    padding-left: 40px;
    width: 335px;
    height: 300px;
    color: white;
}

.content .shinei .Library .Library-text h2{
    margin-bottom:8px;
}

.content .shinei .Library .Library-text .text1{
    color: white;
    font-size: 15px;
    margin-bottom: 10px;
}

.content .shinei .Library .Library-text .text2{
    margin-right: 30px;
    color: white;
    font-size: 13px;
}

.content .shinei .Library .Library-text .EXPLORE{
    background-color: black;
    position: relative;
    left: 120px;
    top:30px;
    height: 50px;
    width: 85px;
}

.content .shinei .Library .Library-text .EXPLORE a{
    text-align: center;
}

.content .shinei .ComputerLap .cl-photo img{
    float:left;
    width: 25%;
    height:300px;
    position:relative;
    top:80px;
}

.content .shinei .ComputerLap .cl-text{
    float:left;
    position: relative;
    top:80px;
    background-color: #07cbc9;
    padding-left: 40px;
    width: 335px;
    height: 300px;
    color: white;
}

.content .shinei .ComputerLap .cl-text h2{
    margin-bottom:8px;
}

.content .shinei .ComputerLap .cl-text .text1{
    color: white;
    font-size: 15px;
    margin-bottom: 10px;
}

.content .shinei .ComputerLap .cl-text .text2{
    margin-right: 30px;
    color: white;
    font-size: 13px;
}

.content .shinei .ComputerLap .cl-text .EXPLORE{
    background-color: black;
    position: relative;
    left: 120px;
    top:30px;
    height: 50px;
    width: 85px;
}

.content .shinei .ComputerLap .cl-text .EXPLORE a{
    text-align: center;
}


.content .shinei .ConferenceHall .ch-photo img{
    float:left;
    width: 25%;
    height:300px;
    position:relative;
    top:80px;
}

.content .shinei .ConferenceHall .ch-text{
    float:left;
    position: relative;
    top:80px;
    background-color: #07cbc9;
    padding-left: 40px;
    width: 335px;
    height: 300px;
    color: white;
}

.content .shinei .ConferenceHall .ch-text h2{
    margin-bottom:8px;
}

.content .shinei .ConferenceHall .ch-text .text1{
    color: white;
    font-size: 15px;
    margin-bottom: 10px;
}

.content .shinei .ConferenceHall .ch-text .text2{
    margin-right: 30px;
    color: white;
    font-size: 13px;
}

.content .shinei .ConferenceHall .ch-text .EXPLORE{
    background-color: black;
    position: relative;
    left: 120px;
    top:30px;
    height: 50px;
    width: 85px;
}

.content .shinei .ConferenceHall .ch-text .EXPLORE a{
    text-align: center;
}


.content .shinei .PlayGround .pg-photo img{
    float:left;
    width: 25%;
    height:300px;
    position:relative;
    top:80px;
}

.content .shinei .PlayGround .pg-text{
    float:left;
    position: relative;
    top:80px;
    background-color: #07cbc9;
    padding-left: 40px;
    width: 335px;
    height: 300px;
    color: white;
}

.content .shinei .PlayGround .pg-text h2{
    margin-bottom:8px;
}

.content .shinei .PlayGround .pg-text .text1{
    color: white;
    font-size: 15px;
    margin-bottom: 10px;
}

.content .shinei .PlayGround .pg-text .text2{
    margin-right: 30px;
    color: white;
    font-size: 13px;
}

.content .shinei .PlayGround .pg-text .EXPLORE{
    background-color: black;
    position: relative;
    left: 120px;
    top:30px;
    height: 50px;
    width: 85px;
}

.content .shinei .PlayGround .pg-text .EXPLORE a{
    text-align: center;
}


.content .GALLERY{
    text-align: center;
    position: relative;
    top:100px;
}

.content .GALLERY .line{
    background-color:#07cbc9;
    display: block;
    width:40px;
    height:2px;
    margin:8px auto;
}

.content .GALLERY .GALLERY-neirong{
    margin-bottom: 50px;
}

.content .GALLERY .GALLERY-photo{
    margin-left: 190px;
    margin-bottom: 20px;
}

.content .GALLERY .GALLERY-photo .diyi{
    position: relative;
    float: left;
    margin-bottom: 10px
}

.content .GALLERY .GALLERY-photo .diyi .black{
    position:absolute;
    width: 360px;
    height: 50px;
    bottom:0px;
    left:0px;
    background-color: black;
}

.content .GALLERY .GALLERY-photo .diyi .sl{
    position:absolute;
    bottom:17px;
    left: 10px;
    font-size:14px;
    color:#fff;
}

.content .GALLERY .GALLERY-photo .dier{
    position: relative;
    float: left;
    margin-left: 10px;
    margin-bottom: 10px;
}

.content .GALLERY .GALLERY-photo .dier .black{
    position:absolute;
    width: 360px;
    height: 50px;
    bottom:0px;
    left:0px;
    background-color: black;
}

.content .GALLERY .GALLERY-photo .dier .sl{
    position:absolute;
    bottom:17px;
    left: 10px;
    font-size:14px;
    color:#fff;
}

.content .GALLERY .GALLERY-photo .disan{
    position: relative;
    float: left;
    margin-left: 10px;
    margin-bottom: 10px;
}

.content .GALLERY .GALLERY-photo .disan .black{
    position:absolute;
    width: 360px;
    height: 50px;
    bottom:0px;
    left:0px;
    background-color: black;
}

.content .GALLERY .GALLERY-photo .disan .sl{
    position:absolute;
    bottom:17px;
    left: 10px;
    font-size:14px;
    color:#fff;
}

.content .GALLERY .GALLERY-photo .disi{
    position: relative;
    float: left;
    /*margin-left: 10px;*/
    /*margin-bottom: 10px;*/
}

.content .GALLERY .GALLERY-photo .disi .black{
    position:absolute;
    width: 360px;
    height: 50px;
    bottom:0px;
    left:0px;
    background-color: black;
}

.content .GALLERY .GALLERY-photo .disi .sl{
    position:absolute;
    bottom:17px;
    left: 10px;
    font-size:14px;
    color:#fff;
}

.content .GALLERY .GALLERY-photo .diwu{
    position: relative;
    float: left;
    margin-left: 10px;
    /*margin-bottom: 10px;*/
}

.content .GALLERY .GALLERY-photo .diwu .black{
    position:absolute;
    width: 360px;
    height: 50px;
    bottom:0px;
    left:0px;
    background-color: black;
}

.content .GALLERY .GALLERY-photo .diwu .sl{
    position:absolute;
    bottom:17px;
    left: 10px;
    font-size:14px;
    color:#fff;
}

.content .GALLERY .GALLERY-photo .diliu{
    position: relative;
    float: left;
    margin-left: 10px;
    /*margin-bottom: 10px;*/
}

.content .GALLERY .GALLERY-photo .diliu .black{
    position:absolute;
    width: 360px;
    height: 50px;
    bottom:0px;
    left:0px;
    background-color: black;
}

.content .GALLERY .GALLERY-photo .diliu .sl{
    position:absolute;
    bottom:17px;
    left: 10px;
    font-size:14px;
    color:#fff;
}

.footer .beijing{
    position: relative;
    bottom:10px;
    width:100%;
    height:100px;
    background-color:#07cbc9;
}

js:
// 文本框的颜色变化
var flag = true;
function a(){
    var name = document.getElementById("name");
        if (flag) {
            name.style.borderColor = '#07cbc9';
            flag = false;
        } else {
            name.style.borderColor = '#fff'
            flag = true;
        }
}

function b(){
    var phone = document.getElementById("phone");
        if (flag) {
            phone.style.borderColor = '#07cbc9';
            flag = false;
        } else {
            phone.style.borderColor = '#fff'
            flag = true;
        }
}

function c(){
    var email = document.getElementById("email");
        if (flag) {
            email.style.borderColor = '#07cbc9';
            flag = false;
        } else {
            email.style.borderColor = '#fff'
            flag = true;
        }
}

function d(){
    var comment = document.getElementById("comment");
        if (flag) {
            comment.style.borderColor = '#07cbc9';
            flag = false;
        } else {
            comment.style.borderColor = '#fff'
            flag = true;
        }
}

function e(){
    var btn = document.getElementById("btn");
        if (flag) {
            btn.style.borderColor = '#07cbc9';
            flag = false;
        } else {
            btn.style.borderColor = '#fff'
            flag = true;
        }
}

// 文本框内容提示name
function show1(){
    inputObj=document.getElementById("name").value;
    if(inputObj == ""){
        inputObj.value = "Your Name"
    }
}

function dispear1(inputObj){
    if(inputObj == "Your Name"){
        inputObj.value = ""
    }
}


写回答

2回答

好帮手慕小尤

2020-08-05

已采纳

同学你好

  1. 同学是想通过弹框实现提示吗？如果是，则同学可使用alert()弹框进行提示。

  2. 关于按钮同学可设置固定的宽度与内边距。修改后代码如下所示：

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

  3. 关于页脚建议同学值定义一个div即可，并为其设置样式。修改后代码如下所示：

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

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

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

祝学习愉快！

0
heixin_慕侠0167486
h <!--页脚区 --> <div class="footer"> <div class="beijing"></div> <div class="text">©2016 imooc.com 京ICP备13046642号</div> </div> .footer .beijing{ margin-top: 10px; width:100%; height:50px; background-color:#07cbc9; position: relative; } .footer .text{ text-align: center; position:relative; bottom:35px; color:white; } 老师，为啥我页脚的后面还有空白区域呢？
h020-08-07
共1条回复

好帮手慕小脸

2020-08-07

同学你好，这里同学可以调整div的宽度，然后设置下外边距margin-bottom。如下所示：

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

如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

0

0 学习 · 9666 问题

查看课程

相似问题

老师。检查一下，有什么需要改进？

回答 3

老师，油画商城的项目作业中的素材资料下载后不能解压啊，我是苹果电脑

回答 1

老师请问下高度的问题

回答 2

老师我的有点问题

回答 1

老师 ，怎么解决页面缩放会影响页面布局的问题

回答 1

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