我的banner区域的图片和顶部区域不在一个页面，怎么设置banner区？

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

*{
    font-family: Microsoft YaHei UI;
    margin:0px;
    padding:0px;
}
.top{
    width:100%;
    position:relative;
    background-color:#07cbc9;
    height:60px; 
}
.top .top-image{
    float:left;
    margin-left:50px;
}
.top .auth{
    float:right;
}
.top .auth ul li{
    list-style: none;
    float:left;
    margin-right: 20px;
    margin-top: 20px;
    text-align: center;
}
.top .auth ul li:hover{
    background-color: black;
}
.top .auth ul li a{
    text-decoration: none;
    color:#ffffff;
}
.banner{
    width:100px;
    height:600px;
    text-align: center;
     
}
.banner .banner-image{
    width: 100%;
    position: absolute;
    text-align: center;
 
}
.banner .topLayer{
    position:absolute;
    width:100%;
    height:600px;
    background-color: #000;
    opacity: 0.4;
}

Sherlock_Lzh 2019-10-26

源自：前端油画商城案例 4-3 项目作业

5

收起

4回答

好帮手慕柯南 2019-10-26 18:01:29

同学你好！

这里老师对同学的css做了一下修改，由于修改地方较多，老师会在注释中说明为什么那里会进行修改，同学可以参考一下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

*{
    font-family: Microsoft YaHei UI;
    margin:0px;
    padding:0px;
}
.top{
    width:100%;
    position:relative;
    background-color:#07cbc9;
    height:60px; 
}
.top .top-image{
    float:left;
    margin-left:50px;
}
.top .auth{
    float:right;
}
.top .auth ul li{
    list-style: none;
    float:left;
    margin-right: 20px;
    margin-top: 20px;
    text-align: center;
}
.top .auth ul li:hover{
    background-color: black;
}
.top .auth ul li a{
    text-decoration: none;
    color:#ffffff;
}
.banner{
    width:100%;
    height:600px;
   /*  这里不需要居中设置，表单区域是通过绝对定位来实现的居中以及显示在最上层的 */
    /* text-align: center; */
      
}
.banner .banner-image{
    width: 100%;
    height:600px;
   /*  这里推荐使用相对定位*/
   /*  position: absolute; */
   position: relative;
    text-align: center;
  
  
}
.banner .topLayer{
    position:absolute;
    width:100%;
    height:600px;
    background-color: #000;
    opacity: 0.4;
    z-index: 1;
    /* 遮罩层使用了绝对定位，应该设置top，否则无法和图片重叠 ,top设置为导航栏的高度即可*/
    top:60px;
 
}

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

提问者 Sherlock_Lzh 2019-10-26 17:32:23

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

*{
    font-family: Microsoft YaHei UI;
    margin:0px;
    padding:0px;
}
.top{
    width:100%;
    position:relative;
    background-color:#07cbc9;
    height:60px; 
}
.top .top-image{
    float:left;
    margin-left:50px;
}
.top .auth{
    float:right;
}
.top .auth ul li{
    list-style: none;
    float:left;
    margin-right: 20px;
    margin-top: 20px;
    text-align: center;
}
.top .auth ul li:hover{
    background-color: black;
}
.top .auth ul li a{
    text-decoration: none;
    color:#ffffff;
}
.banner{
    width:100%;
    height:600px;
    text-align: center;
     
}
.banner .banner-image{
    width: 100%;
    height:600px;
    position: absolute;
    text-align: center;
 
 
}
.banner .topLayer{
    position:absolute;
    width:100%;
    height:600px;
    background-color: #000;
    opacity: 0.4;
    z-index: 1;
}

提问者 Sherlock_Lzh 2019-10-26 17:31:55

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

<!DOCTYPE html>
<html>
<head>
    <title>作业</title>
    <link rel="stylesheet" type="text/css" href="css/test.css">
    <script type="text/javascript" src="js/biancheng.js"></script>
</head>
<body>
<div class="top">
    <div  class="top-image">
        <a href="https://class.imooc.com" class="ccl"><img src="images/logo.png" ></a>
    </div>
    <div class="auth">
        <ul>
            <li><a href="#" class="cl">HOME</a></li>
            <li><a href="#" class="cl">ABOUT</a></li>
            <li><a href="#" class="cl">GALLERY</a></li>
            <li><a href="#" class="cl">FACULTY</a></li>
            <li><a href="#" class="cl">EVENTS</a></li>
            <li><a href="#" class="cl">CONTACT</a></li>
 
         </ul>
    </div>
</div>
<div class="banner">
    <div class="banner-image">
        <img src="images/banner3.jpg" class="banner-image">
    </div>
    <div class="topLayer">
         
    </div>
    <div class="biaodan">
        <form action="" method="">
            <input type="text" name="" id="" value="your Name">
            <input type="text" name="" id="" value="your Phone">
            <input type="text" name="" id="" value=" your Emile">
            <input type="text" name="" id="" value="Write Your Comment Here">
            <input type="text" name="" id="" value="SEND MESSAGE">
        </form>
    </div>    
</div>
<div class="ABOUT">
     
</div>
<div class="GALLERY">
     
</div>
<div class="foot">
     
</div>
</body>
</html>

好帮手慕柯南 2019-10-26 17:15:11

同学你好！

同学说的banner区域的图片和顶部区域不在一个页面是什么意思呢？建议同学将html页面也贴一下，另外再详细描述一下你的问题呢，可以截图说明。注意：代码在我要回答中贴出：

祝学习愉快~

提问者 Sherlock_Lzh #1

<!DOCTYPE html> <html> <head> <title>作业</title> <link rel="stylesheet" type="text/css" href="css/test.css"> <script type="text/javascript" src="js/biancheng.js"></script> </head> <body> <div class="top"> <div class="top-image"> <a href="https://class.imooc.com" class="ccl"><img src="images/logo.png" ></a> </div> <div class="auth"> <ul> <li><a href="#" class="cl">HOME</a></li> <li><a href="#" class="cl">ABOUT</a></li> <li><a href="#" class="cl">GALLERY</a></li> <li><a href="#" class="cl">FACULTY</a></li> <li><a href="#" class="cl">EVENTS</a></li> <li><a href="#" class="cl">CONTACT</a></li> </ul> </div> </div> <div class="banner"> <div class="banner-image"> <img src="images/banner3.jpg" class="banner-image"> </div> <div class="topLayer"> </div> <div class="biaodan"> <form action="" method=""> <input type="text" name="" id="" value="your Name"> <input type="text" name="" id="" value="your Phone"> <input type="text" name="" id="" value=" your Emile"> <input type="text" name="" id="" value="Write Your Comment Here"> <input type="text" name="" id="" value="SEND MESSAGE"> </form> </div> </div> <div class="ABOUT"> </div> <div class="GALLERY"> </div> <div class="foot"> </div> </body> </html>

2019-10-26 17:18:58
提问者 Sherlock_Lzh #2

<!DOCTYPE html> <html> <head> <title>作业</title> <link rel="stylesheet" type="text/css" href="css/test.css"> <script type="text/javascript" src="js/biancheng.js"></script> </head> <body> <div class="top"> <div class="top-image"> <a href="https://class.imooc.com" class="ccl"><img src="images/logo.png" ></a> </div> <div class="auth"> <ul> <li><a href="#" class="cl">HOME</a></li> <li><a href="#" class="cl">ABOUT</a></li> <li><a href="#" class="cl">GALLERY</a></li> <li><a href="#" class="cl">FACULTY</a></li> <li><a href="#" class="cl">EVENTS</a></li> <li><a href="#" class="cl">CONTACT</a></li> </ul> </div> </div> <div class="banner"> <div class="banner-image"> <img src="images/banner3.jpg" class="banner-image"> </div> <div class="topLayer"> </div> <div class="biaodan"> <form action="" method=""> <input type="text" name="" id="" value="your Name"> <input type="text" name="" id="" value="your Phone"> <input type="text" name="" id="" value=" your Emile"> <input type="text" name="" id="" value="Write Your Comment Here"> <input type="text" name="" id="" value="SEND MESSAGE"> </form> </div> </div> <div class="ABOUT"> </div> <div class="GALLERY"> </div> <div class="foot"> </div> </body> </html>

2019-10-26 17:19:11
提问者 Sherlock_Lzh #3

不知道为什么图片复制不进来。出现的效果就是页面出现滚动条，必须滚动滚动条才可以显示完整图片。遮罩层是遮住和顶部一致的页面，所以导致一半的图片没有被遮住。

2019-10-26 17:24:13

相似问题

banner区怎么把菜单设置居中？

banner—image不随页眉变化

小慕医生banner区域为什么不能直接用ol？

banner区域图片显示

怎样设置页眉区能在设置固定定位且width100%的情况下

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

2. 从网页搭建入门JavaWeb

参与学习人
提交作业 676 份
解答问题 9666 个

本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！

本课精华内容

问答作业

4-3个人程序源码，提供给各位参考！

63 1

2-4 编程练习

22 1

text-align和direction有什么区别

13 1

交作业交作业交作业

225 2

是不是只有在JS语言中局部变量的定义才可以放在else语句中

24 1

查看更多本课问答

请稍等 ...

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

帮助反馈 APP下载

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

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