响应式Web开发实验一代码及实验结果

程序员文章站 2022-06-12 13:23:34
...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.Box{
  width: 800px;
  height: 270px;
  background-color: black;
  margin: 100px auto;
}
.Box .Sx{
  width: 160px;
  height: 200px;
  margin-left: 30px;
  margin-top: 30px;    
  font-size: 12px;
  color: white;
  text-align: center;  
  float: left;    
   }
.Box .Sx .Mbox img{
  width: 150px;
  height: 150px;
}
.Box .Sx:nth-child(1) .Mbox:hover{
  border-radius: 50%;
}
.Box .Sx .Mbox{
  width: 150px;
  height: 150px;
  margin-top: 10px;
  border: 5px solid white;
  border-radius: 5px;
  transition: all 0.5s;
   }
.Box .Sx .Mbox img{
  width: 150px;
  height: 150px;  
  transition: all 0.5s;
}
.Box .Sx:nth-child(2) .Mbox img:hover{
    transform: scale(1.5);
}
.Box .Sx .Mbox{
  width: 150px;
  height: 150px;
  margin-top: 10px;
  border: 5px solid white;
  border-radius: 5px;
  transition: all 0.5s;  
  overflow: hidden;
   }
.Box .Sx:nth-child(3) .Mbox:hover{
  transform: rotate(30deg);
}
.Box .Sx:nth-child(4) .Mbox img:hover{
    filter: grayscale(100%);
}
.Box .Sx .Mbox:hover{
    box-shadow:0px 0px 40px palegreen;
}
</style>
</head>
<body>
  <div class="Box">
   <div class="Sx">
    SHAPE
    <div class="Mbox">
     <img src="1.jpg" alt="">
    </div>
   </div>
   <div class="Sx">
    DISPLACEMENT
    <div class="Mbox">
     <img src="2.jpg" alt="">
    </div>
   </div>
   <div class="Sx">
    POSITION
    <div class="Mbox">
     <img src="3.jpg" alt="">
    </div>
   </div>
   <div class="Sx">
    COLOR
    <div class="Mbox">
     <img src="4.jpg" alt="">
    </div>
   </div>
  </div>
 </body>
</html>
响应式Web开发实验一代码及实验结果