|
|
Line 3: |
Line 3: |
| <head> | | <head> |
| <meta charset="UTF-8"> | | <meta charset="UTF-8"> |
| + | <title>Document</title> |
| <style> | | <style> |
− | *{
| + | .div1{ |
− | padding: 0px;
| + | |
− | margin: 0px;
| + | margin:0 auto; |
− | }
| + | |
− | div{
| + | background: #555; |
− | padding: 0px;
| + | |
− | margin: 0px;
| + | width:500px; |
− | }
| + | |
− | body{
| + | height:200px; |
− | background-color: #def;
| + | |
− | }
| + | border:2px solid #000; |
− | #container{
| + | |
− | width: 760px;
| + | border-radius:30px; |
− | height: 160px;
| + | |
− | margin: 100px auto;
| + | text-align: center; |
− | }
| + | |
− | .box{
| + | line-height: 200px; |
− | float: left;
| + | |
− | margin: 10px;
| + | } |
− | width: 155px;
| + | .div1 h1{ |
− | height: 155px;
| + | color: #eee; |
− | border: 3px solid #ccc;
| + | } |
− | transform-style: preserve-3d;
| + | |
− | transition: 1.5s;
| + | |
− | position: relative;
| + | |
− | }
| + | |
− | .box:hover{
| + | |
− | transform:rotateY(180deg);
| + | |
− | }
| + | |
− | .face{
| + | |
− | width: 150px;
| + | |
− | height: 150px;
| + | |
− | position: absolute;
| + | |
− | }
| + | |
− | .front{
| + | |
− | border: 2px solid #4b2518;
| + | |
− | }
| + | |
− | .back{
| + | |
− | transform: rotateY(180deg);
| + | |
− | background-color: #4b2518;
| + | |
− | border: 2px solid #fff;
| + | |
− | }
| + | |
− | .back h3{
| + | |
− | color: white;
| + | |
− | text-align: center;
| + | |
− | }
| + | |
− | img{
| + | |
− | width: 150px;
| + | |
− | }
| + | |
| </style> | | </style> |
| </head> | | </head> |
| <body> | | <body> |
− | <div id="container"> | + | <div> |
− | <div class="box"> | + | <div class="div1"><h1>DUT_China_B</h1></div> |
− | <div class="face front"><img src="image/coffee1.jpg" alt="无法显示"></div>
| + | |
− | <div class="face back">
| + | |
− | <h3>拿铁咖啡</h3>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <div class="box">
| + | |
− | <div class="face front"><img src="image/coffee2.jpg" alt="无法显示"></div>
| + | |
− | <div class="face back">
| + | |
− | <h3>卡布奇诺</h3>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <div class="box">
| + | |
− | <div class="face front"><img src="image/coffee3.jpg" alt="无法显示"></div>
| + | |
− | <div class="face back">
| + | |
− | <h3>美式咖啡</h3>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <div class="box">
| + | |
− | <div class="face front"><img src="image/coffee4.jpg" alt="无法显示"></div>
| + | |
− | <div class="face back">
| + | |
− | <h3>焦糖拿铁</h3>
| + | |
− | </div>
| + | |
− | </div>
| + | |
| </div> | | </div> |
| </body> | | </body> |
| </html> | | </html> |