邢台123网站模板,wordpress 拼音插件,长沙网站设计公司推荐,经典网页设计欣赏设置一个板块#xff0c;将照片随意无序摆放在墙上#xff0c;从而形成照片墙。本来效果应该是很唯美好看的#xff0c;就像这种#xff0c;但是奈何本人手太笨#xff0c;只好设置能达到照片墙的效果就可。
代码如下#xff1a;
!DOCTYPE html
html lang将照片随意无序摆放在墙上从而形成照片墙。本来效果应该是很唯美好看的就像这种但是奈何本人手太笨只好设置能达到照片墙的效果就可。
代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title定位实操_照片墙/titlestyle/* 宽高左右居中设置边框线 相对定位 */.wall{width: 960px;height: 600px;margin: 0 auto;border: 1px rgb(128, 128, 128) double;position: relative;}/* 设置图片宽度设置边框绝对定位 */.wall img {width: 200px;border: 10px solid #f1f1f1;position: absolute;}/* CSS3新特性设置定位之后才可以使用1. 动画-旋转transform:rotate(-10deg)*/.img1 {top: 0;left: 10px;transform: rotate(0deg);}.img2 {transform: rotate(5deg);top: 20px;left: 220px;}.img3 {transform: rotate(-20deg);top: 40px;left: 450px;}.img4 {transform: rotate(-5deg);top: 30px;left: 700px;}.img5 {transform: rotate(20deg);top: 100px;left: 10px;}.img6 {transform: rotate(-5deg);top: 160px;left: 350px;}.img7 {transform: rotate(-5deg);top: 300px;left: 0px;}.img8 {transform: rotate(5deg);top: 270px;left: 180px;}.img9 {transform: rotate(-10deg);top: 290px;left: 370px;}.img10 {transform: rotate(20deg);top: 280px;left: 600px;}/style
/head
bodydiv classwallimg classimg1 srcimg/1.jpgimg classimg2 srcimg/2.jpgimg classimg3 srcimg/3.jpgimg classimg4 srcimg/4.jpgimg classimg5 srcimg/5.jpgimg classimg6 srcimg/6.jpgimg classimg7 srcimg/7.jpgimg classimg8 srcimg/8.jpgimg classimg9 srcimg/9.pngimg classimg10 srcimg/10.jpg/div
/body
/html
实现效果
