怎样用html+css制作照片墙?
来源:互联网 发布:怎样增加买家淘宝信誉 编辑:程序博客网 时间:2024/05/15 11:18
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>照片墙</title>
<script src="js/jquery.min.js"></script>
<style>
@charset "utf-8";
body {
background:gainsboro;/*背景颜色*/
}
.div_pic {
width:800px;
height:1000px;
margin:60px auto;
position:relative;
}
.p {
/*内边距*/
padding:10px 10px 10px;
background:white;/*图片白色背景*/
/*背景*/
/*左移,下移,虚化*/
box-shadow:5px 5px 4px rgba(50,50,50,0.5);/*图片阴影*/
width:50px; /*图片宽度*/
/*相对定位*/
}
/*鼠标悬浮图片变大*/
.div_pic img:hover {
transform:rotate(10deg) scale(1.5);
z-index:9;
}
.div_pic .a{
display: inline-block;
left: 50px;
}
.div_pic .a .a1{
margin-top: 60px;
}
.div_pic .b{
display: inline-block;
position: absolute;
left: 90px;
}
.div_pic .c{
display: inline-block;
position: absolute;
left: 180px;
}
.div_pic .d{
display: inline-block;
position: absolute;
left: 270px;
}
.div_pic .d .d1{
margin-top: 60px;
}
.div_pic .e{
display: inline-block;
position: absolute;
left: 360px;
}
.div_pic .e .e1{
margin-top: 120px;
}
.div_pic .f{
display: inline-block;
position: absolute;
left:450px;
}
.div_pic .f .f1{
margin-top: 60px;
}
.div_pic .g{
display: inline-block;
position: absolute;
left:540px;
}
.div_pic .g .g1{
margin-top: 0px;
}
.div_pic .h{
display: inline-block;
position: absolute;
left:630px;
}
.div_pic .h .h1{
margin-top: 0px;
}
.div_pic .i{
display: inline-block;
position: absolute;
left:720px;
}
.div_pic .i .i1{
margin-top: 60px;
}
</style>
</head>
<body>
<div class="div_pic">
<div class="a">
<div class="a1"><img class="p p1" src="images/7.jpg"></div>
<div class="a2"><img class="p p2" src="images/7.jpg"></div>
<div class="a3"><img class="p p3" src="images/7.jpg"></div>
<div class="a4"><img class="p p4" src="images/7.jpg"></div>
</div>
<div class="b">
<div class="b1"><img class="p p5" src="images/7.jpg"></div>
<div class="b2"><img class="p p6" src="images/8.jpg"></div>
<div class="b3"><img class="p p7" src="images/8.jpg"></div>
<div class="b4"><img class="p p8" src="images/8.jpg"></div>
<div class="b5"><img class="p p9" src="images/8.jpg"></div>
<div class="b6"><img class="p p10" src="images/7.jpg"></div>
</div>
<div class="c">
<div class="c1"><img class="p p11" src="images/7.jpg"></div>
<div class="c2"><img class="p p12" src="images/8.jpg"></div>
<div class="c3"><img class="p p13" src="images/9.jpg"></div>
<div class="c4"><img class="p p14" src="images/9.jpg"></div>
<div class="c5"><img class="p p15" src="images/9.jpg"></div>
<div class="c6"><img class="p p16" src="images/8.jpg"></div>
<div class="c7"><img class="p p17" src="images/7.jpg"></div>
</div>
<div class="d">
<div class="d1"><img class="p p18" src="images/7.jpg"></div>
<div class="d2"><img class="p p19" src="images/8.jpg"></div>
<div class="d3"><img class="p p20" src="images/9.jpg"></div>
<div class="d4"><img class="p p21" src="images/3.jpg"></div>
<div class="d5"><img class="p p22" src="images/9.jpg"></div>
<div class="d6"><img class="p p23" src="images/8.jpg"></div>
<div class="d7"><img class="p p24" src="images/7.jpg"></div>
</div>
<div class="e">
<div class="e1"><img class="p p25" src="images/7.jpg"></div>
<div class="e2"><img class="p p26" src="images/8.jpg"></div>
<div class="e3"><img class="p p27" src="images/9.jpg"></div>
<div class="e4"><img class="p p28" src="images/3.jpg"></div>
<div class="e5"><img class="p p29" src="images/9.jpg"></div>
<div class="e6"><img class="p p30" src="images/8.jpg"></div>
<div class="e7"><img class="p p31" src="images/7.jpg"></div>
</div>
<div class="f">
<div class="f1"><img class="p p32" src="images/7.jpg"></div>
<div class="f2"><img class="p p33" src="images/8.jpg"></div>
<div class="f3"><img class="p p34" src="images/9.jpg"></div>
<div class="f4"><img class="p p35" src="images/3.jpg"></div>
<div class="f5"><img class="p p36" src="images/9.jpg"></div>
<div class="f6"><img class="p p37" src="images/8.jpg"></div>
<div class="f7"><img class="p p38" src="images/7.jpg"></div>
</div>
<div class="g">
<div class="g1"><img class="p p39" src="images/7.jpg"></div>
<div class="g2"><img class="p p40" src="images/8.jpg"></div>
<div class="g3"><img class="p p41" src="images/9.jpg"></div>
<div class="g4"><img class="p p42" src="images/9.jpg"></div>
<div class="g5"><img class="p p43" src="images/9.jpg"></div>
<div class="g6"><img class="p p44" src="images/8.jpg"></div>
<div class="g7"><img class="p p45" src="images/7.jpg"></div>
</div>
<div class="h">
<div class="h1"><img class="p p46" src="images/7.jpg"></div>
<div class="h2"><img class="p p47" src="images/8.jpg"></div>
<div class="h3"><img class="p p48" src="images/8.jpg"></div>
<div class="h4"><img class="p p49" src="images/8.jpg"></div>
<div class="h6"><img class="p p51" src="images/8.jpg"></div>
<div class="h7"><img class="p p52" src="images/7.jpg"></div>
</div>
<div class="i">
<div class="i1"><img class="p p53" src="images/7.jpg"></div>
<div class="i2"><img class="p p54" src="images/7.jpg"></div>
<div class="i3"><img class="p p55" src="images/7.jpg"></div>
<div class="i4"><img class="p p56" src="images/7.jpg"></div>
</div>
</div>
<script>
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>照片墙</title>
<script src="js/jquery.min.js"></script>
<style>
@charset "utf-8";
body {
background:gainsboro;/*背景颜色*/
}
.div_pic {
width:800px;
height:1000px;
margin:60px auto;
position:relative;
}
.p {
/*内边距*/
padding:10px 10px 10px;
background:white;/*图片白色背景*/
/*背景*/
/*左移,下移,虚化*/
box-shadow:5px 5px 4px rgba(50,50,50,0.5);/*图片阴影*/
width:50px; /*图片宽度*/
/*相对定位*/
}
/*鼠标悬浮图片变大*/
.div_pic img:hover {
transform:rotate(10deg) scale(1.5);
z-index:9;
}
.div_pic .a{
display: inline-block;
left: 50px;
}
.div_pic .a .a1{
margin-top: 60px;
}
.div_pic .b{
display: inline-block;
position: absolute;
left: 90px;
}
.div_pic .c{
display: inline-block;
position: absolute;
left: 180px;
}
.div_pic .d{
display: inline-block;
position: absolute;
left: 270px;
}
.div_pic .d .d1{
margin-top: 60px;
}
.div_pic .e{
display: inline-block;
position: absolute;
left: 360px;
}
.div_pic .e .e1{
margin-top: 120px;
}
.div_pic .f{
display: inline-block;
position: absolute;
left:450px;
}
.div_pic .f .f1{
margin-top: 60px;
}
.div_pic .g{
display: inline-block;
position: absolute;
left:540px;
}
.div_pic .g .g1{
margin-top: 0px;
}
.div_pic .h{
display: inline-block;
position: absolute;
left:630px;
}
.div_pic .h .h1{
margin-top: 0px;
}
.div_pic .i{
display: inline-block;
position: absolute;
left:720px;
}
.div_pic .i .i1{
margin-top: 60px;
}
</style>
</head>
<body>
<div class="div_pic">
<div class="a">
<div class="a1"><img class="p p1" src="images/7.jpg"></div>
<div class="a2"><img class="p p2" src="images/7.jpg"></div>
<div class="a3"><img class="p p3" src="images/7.jpg"></div>
<div class="a4"><img class="p p4" src="images/7.jpg"></div>
</div>
<div class="b">
<div class="b1"><img class="p p5" src="images/7.jpg"></div>
<div class="b2"><img class="p p6" src="images/8.jpg"></div>
<div class="b3"><img class="p p7" src="images/8.jpg"></div>
<div class="b4"><img class="p p8" src="images/8.jpg"></div>
<div class="b5"><img class="p p9" src="images/8.jpg"></div>
<div class="b6"><img class="p p10" src="images/7.jpg"></div>
</div>
<div class="c">
<div class="c1"><img class="p p11" src="images/7.jpg"></div>
<div class="c2"><img class="p p12" src="images/8.jpg"></div>
<div class="c3"><img class="p p13" src="images/9.jpg"></div>
<div class="c4"><img class="p p14" src="images/9.jpg"></div>
<div class="c5"><img class="p p15" src="images/9.jpg"></div>
<div class="c6"><img class="p p16" src="images/8.jpg"></div>
<div class="c7"><img class="p p17" src="images/7.jpg"></div>
</div>
<div class="d">
<div class="d1"><img class="p p18" src="images/7.jpg"></div>
<div class="d2"><img class="p p19" src="images/8.jpg"></div>
<div class="d3"><img class="p p20" src="images/9.jpg"></div>
<div class="d4"><img class="p p21" src="images/3.jpg"></div>
<div class="d5"><img class="p p22" src="images/9.jpg"></div>
<div class="d6"><img class="p p23" src="images/8.jpg"></div>
<div class="d7"><img class="p p24" src="images/7.jpg"></div>
</div>
<div class="e">
<div class="e1"><img class="p p25" src="images/7.jpg"></div>
<div class="e2"><img class="p p26" src="images/8.jpg"></div>
<div class="e3"><img class="p p27" src="images/9.jpg"></div>
<div class="e4"><img class="p p28" src="images/3.jpg"></div>
<div class="e5"><img class="p p29" src="images/9.jpg"></div>
<div class="e6"><img class="p p30" src="images/8.jpg"></div>
<div class="e7"><img class="p p31" src="images/7.jpg"></div>
</div>
<div class="f">
<div class="f1"><img class="p p32" src="images/7.jpg"></div>
<div class="f2"><img class="p p33" src="images/8.jpg"></div>
<div class="f3"><img class="p p34" src="images/9.jpg"></div>
<div class="f4"><img class="p p35" src="images/3.jpg"></div>
<div class="f5"><img class="p p36" src="images/9.jpg"></div>
<div class="f6"><img class="p p37" src="images/8.jpg"></div>
<div class="f7"><img class="p p38" src="images/7.jpg"></div>
</div>
<div class="g">
<div class="g1"><img class="p p39" src="images/7.jpg"></div>
<div class="g2"><img class="p p40" src="images/8.jpg"></div>
<div class="g3"><img class="p p41" src="images/9.jpg"></div>
<div class="g4"><img class="p p42" src="images/9.jpg"></div>
<div class="g5"><img class="p p43" src="images/9.jpg"></div>
<div class="g6"><img class="p p44" src="images/8.jpg"></div>
<div class="g7"><img class="p p45" src="images/7.jpg"></div>
</div>
<div class="h">
<div class="h1"><img class="p p46" src="images/7.jpg"></div>
<div class="h2"><img class="p p47" src="images/8.jpg"></div>
<div class="h3"><img class="p p48" src="images/8.jpg"></div>
<div class="h4"><img class="p p49" src="images/8.jpg"></div>
<div class="h6"><img class="p p51" src="images/8.jpg"></div>
<div class="h7"><img class="p p52" src="images/7.jpg"></div>
</div>
<div class="i">
<div class="i1"><img class="p p53" src="images/7.jpg"></div>
<div class="i2"><img class="p p54" src="images/7.jpg"></div>
<div class="i3"><img class="p p55" src="images/7.jpg"></div>
<div class="i4"><img class="p p56" src="images/7.jpg"></div>
</div>
</div>
<script>
</script>
</body>
</html>
阅读全文
0 0
- 怎样用html+css制作照片墙?
- html+CSS制作照片墙
- HTML-CSS照片墙
- css.html实现照片墙
- html+css实现照片墙
- 怎样用美图秀秀制作一寸照片
- HTML第二十节(CSS制作照片墙效果与瀑布流)
- HTML+CSS制作鼠标悬浮上去可以放大的照片墙?
- 怎样用最简单的html+css代码制作一颗跳动的心?
- html+css实现照片墙系统
- 使用html+css实现一个个人照片墙
- CSS3制作照片墙
- CSS3照片墙制作
- H5 照片墙制作
- js制作照片墙
- HTML+CSS日历制作
- css实现照片墙
- 纯CSS照片墙
- PAT_1072. Gas Station(Dijkstra最短路)
- SpringMvc异步图片上传回显(使用jersey上传到另一台服务器)
- android opengl fbo模式
- User Namespaces 加固Docker container 宿主机
- java中的自动装箱与拆箱
- 怎样用html+css制作照片墙?
- 数组专题讲义之数组基本概念
- 快照技术
- vert&fragment shader
- 简单数组
- oracle_base与oracle_home目录区别
- C++模板
- Django+Karlooper+iOS重构学校的学生成绩管理系统(三)服务端rest接口开发
- 一起认识MATCH函数