4-3练习

来源:4-3 编程练习

乔巴小白

2018-01-06 17:07:08

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<title></title>

<style type="text/css">

   *{margin:0;

    padding:0;}

   

   .wrap{width:90%;

         height:1500px;

         margin: 0 auto;

         background:url('http://climg.mukewang.com/59c9f7ce0001839219034033.png') ;

         background-size:100% 1500px;

         border:1px solid #ccc;

         position:relative;

   }


    img{width:100%;

       height:100%;

   }

   

   .left,.right{width:120px;

                height:150px;

                position:fixed;

                top: 0;

                bottom: 0;

                margin: auto 0;

   }

   

  .right{right:5%;} 


</style> 

</head>

<body>

<div class="wrap">

 <div class="left"><img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png"/></div>

 <div class="right"><img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png"/></div>

</div>

</body>

</html>


写回答

1回答

好帮手慕糖

2018-01-07

你好,实现的效果是没有问题的,还有一点,可尝试设置宽度100%哦,然后去掉边框,定位的位置在稍微调整下。

祝学习愉快~

0

0 学习 · 36712 问题

查看课程

相似问题

4-3练习

回答 3

4-3练习

回答 1

4-3编程练习

回答 1

4-3练习问题

回答 2