无法正常显示，希望能帮我看下代码哪里有问题
来源：1-4 CSS3照片墙 动画实现
朱泽伟
2016-06-07 10:35
body{background-color: #eee;}
h1{text-align: center;}
.container{width: 900px;
height: 450px;
margin: 60px auto;
position: relative; }
img{width: 200px;
height: 200px;
padding: 10px 10px 15px 10px;
background-color: white;
border: 1px solid #ddd;
position: absolute;
transition: 1s;
z-index: 1;
}
img:hover{-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
box-shadow: 10px 10px 15px #ccc;
z-index: 2;}
.pic1{top: 45px; left: 100px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic2{top: 70px; left: 220px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic3{top: 13px; left: 310px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic4{top: 23px; left: 400px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic5{top: 53px; left: 490px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic6{top: 32px; left: 580px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS 效果墙</title> <link rel="stylesheet" type="text/css" href="cssWall.css"> </head> <body> <h1>效果墙</h1> <div class="container"> <img class="pic1" src="1 (1).jpg" /> <img class="pic2" src="1 (2).jpg" /> <img class="pic3" src="1 (3).jpg" /> <img class="pic4" src="1 (4).jpg" /> <img class="pic5" src="1 (5).jpg" /> <img class="pic6" src="1 (6).jpg" /> </div> </body> </html>
写回答
关注
3回答
-
- LiSten_Tme
- 2016-06-26 13:02:32
<link rel="stylesheet" type="text/css" href="cssWall.css">
这里是不是导入错误了...我的 link href直接写不行，然后我浏览后引用才可以...
我的代码是这样 <link href="stylesheet.css" type="text/css" rel="stylesheet" />
-
- 一支猫的烦恼
- 2016-06-07 13:25:04
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> body{background-color: #eee;} h1{text-align: center;} .container{width: 900px; height: 450px; margin: 60px auto; position: relative; } img{width: 200px; height: 200px; padding: 10px 10px 15px 10px; background-color: white; border: 1px solid #ddd; position: absolute; transition: 1s; -webkit-transition:1s; -moz-transition:1s; z-index: 1; } img:hover{-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); box-shadow: 10px 10px 15px #ccc; z-index: 2;} .pic1{top: 45px; left: 100px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);} .pic2{top: 70px; left: 220px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);} .pic3{top: 13px; left: 310px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);} .pic4{top: 23px; left: 400px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);} .pic5{top: 53px; left: 490px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);} .pic6{top: 32px; left: 580px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);} </style> <body> <div> <img src="images/test5.jpg" /> <img src="images/t6.jpg" /> <img src="images/t7.jpg" /> <img src="images/t8.jpg" /> <img src="images/t9.jpg" /> <img src="images/t10.jpg" /> </div> </body> </html>我个人觉得是没什么问题的。这是从你这复制出来的。只不过是图片地址换了一下我本地的图片。
-
- 一支猫的烦恼
- 2016-06-07 11:36:08
可以正常显示啊，是不是你引的Css有问题，你把css复制到内部，看看效果是可以的。
CSS3绚丽照片墙
CSS3属性轻松实现绚丽照片墙效果，展示不同位置不同角度多张照片
56605 学习 · 63 问题
相似问题