闲来无事,自己写了一个照片墙,效果还凑合.大家喜欢的话可以自己学习一下制作属于自己的照片墙.
首先先创建一个文件夹为image.把图片导入里面,方便代码调用.
转载时标注转载位置,大家有更好的创意可以分享一起学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>照片墙</title>
<style >
*{
margin:0px;
padding:0px;
}
a{
text-decoration: none;
font-size: 40px;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
line-height: 80px;
background: rgba(255, 255, 255, .8);
z-index: 3;
min-width: 1200px;}
.header__logo {
position: absolute;
top: 50%;
left: 0;
margin-top: -20px;
margin-left: 10px;
height: 40px;
line-height: 40px;
width: 90px;
padding-left: 60px;
color: #666;
background: url("img/018.jpg") no-repeat left center;
cursor: pointer;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
-moz-transition: all .3s ease;}
.header__logo:hover {color:black}
.header__nav {position: absolute;top: 50%;right: 0;margin-top: -20px;height: 40px;line-height: 40px;}
.header__nav-item {height: 40px;line-height: 40px;text-align: center;float: left;font-size: 14px;color: #666;padding-left: 32px;}
.header__nav-item:hover {color: #333;}
.header__nav-item:first-child {padding-left: 0;}
.header__nav-item:last-child {}
.header__nav-item-button {padding-left: 0;margin-left: 32px;margin-right: 32px;border-radius: 5px;width: 90px;height: 40px;line-height: 40px;text-align: center;background: #e53e3e;color: #fff;}
.header__nav-item-button:hover {background: #f00;color: #fff;}
/*header */
body{
background-color: #b0e0e6;
}
.container{
width:1200px;
height:1000px;
margin:0 auto;
margin-top: 150px;
position: relative;
}
.one{
width:1200px;
height: 300px;
}
.two{
width:1200px;
height: 300px;
}
.three{
width:1200px;
height: 300px;
}
.pic{
width:150px;
height: 220px;
overflow:hidden
}
.container img{
padding:10px 10px 10px 15px;
background-color: white;
border:1px solid #ddd;
box-shadow: 2px 2px 3px rgba(50,50,50,0.4);
z-index:1; /*设置元素的堆叠顺序。*/
/*ease：逐渐慢下来*/
/*linear：线性过度*/
/*ease-in：由慢到快*/
/*ease-out：由快到慢*/
/*ease-in-out：由慢到快在到慢*/
/*cubic-bezier：特定的cubic-bezier曲线,所有值需在[0, 1]区域内，否则无效。*/
position: absolute;
-webkit-transition: all 0.5s ease-in; /*-webkit-transition：CSS属性(none|all|属性) 持续时间 时间函数 延迟时间*/
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.container img:hover{
z-index:2;
box-shadow:15px 15px 20px rgba(50, 50, 50,0.4);
/*h-shadow:水平阴影的位置。允许负值.v-shadow垂直阴影的位置。允许负值.blur:模糊距离。spread :阴影的尺寸。*/
transform: rotate(0deg) scale(1.2);
-webkit-transform: rotate(0deg) scale(1.2);
}
.pic1 {
left: 0px;
top: 0px;
}
.pic2 {
left: 180px;
top: 0px;
}
.pic3{
left: 360px;
top: 0px;
}
.pic4{
left: 540px;
top: 0px;
}
.pic5{
left: 720px;
top: 0px;
}
.pic6{
left:900px;
top: 0px;
}
.pic7{
left: 1080px;
top: 0px;
}
.pic8{
left: 1260px;
top: 0px;
}
.pic9{
left:0px;
top:300px;
}
.pic10{
left:180px;
top:300px;
}
.pic11{
left:360px;
top:300px;
}
.pic12{
left:540px;
top:300px;
}
.pic13{
left:720px;
top:300px;
}
.pic14{
left:900px;
top:300px;
}
.pic15{
left:1080px;
top:300px;
}
.pic16{
left:1260px;
top:300px;
}
.pic17{
left:0px;
top:600px;
}
.pic18{
left:180px;
top:600px;
}
.pic19{
left:360px;
top:600px;
}
.pic20{
left:540px;
top:600px;
}
.pic21{
left:720px;
top:600px;
}
.pic22{
left:900px;
top:600px;
}
.pic23{
left:1080px;
top:600px;
}
.pic24{
left:1260px;
top:600px;
}
.button{
width: 170px;
height: 60px;
background: url("img/010.jpg")no-repeat;
border-radius: 20px 20px 20px 20px;
}
/* footer */
.footer {height: 100px;background: #000;}
.footer__wrap {width: 1200px;margin: 0 auto;text-align: center;position: relative;}
.footer__type {text-align: center;position: absolute;top: 30px;width: 100%;}
.footer__type-item {margin-left: 30px;font-size: 12px;color: #999;transition: all .3s ease;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;}
.footer__type-item:hover {color: #e53e3e;}
.footer__copy {font-size: 14px;color: #666;position: absolute;top: 60px;width: 100%;text-align: center;}
</style>
</head>
<body>
<header class="header">
<div class="header__logo">倾城时光</div>
<div class="header__nav">
<a href="index.html" class="header__nav-item">首页</a>
<a href="photo.html" class="header__nav-item">照片墙</a>
<a href="notes.html" class="header__nav-item">手记</a>
<a href="tour.html" class="header__nav-item">旅游</a>
<a href="javascript:;" class="header__nav-item header__nav-item-button">更多</a>
<div class="header__nav-tip"></div>
</div>
</header>
<div class="container">
<div class="one">
<img class="pic pic1" src="image/001.jpg"/>
<img class="pic pic2" src="image/002.jpg"/>
<img class="pic pic3" src="image/003.jpg"/>
<img class="pic pic4" src="image/004.jpg"/>
<img class="pic pic5" src="image/005.jpg"/>
<img class="pic pic6" src="image/006.jpg"/>
<img class="pic pic7" src="image/007.jpg"/>
<img class="pic pic8" src="image/008.jpg"/>
</div>
<div class="two">
<img class="pic pic9" src="image/009.jpg"/>
<img class="pic pic10" src="image/010.jpg"/>
<img class="pic pic11" src="image/011.jpg"/>
<img class="pic pic12" src="image/012.jpg"/>
<img class="pic pic13" src="image/013.jpg"/>
<img class="pic pic14" src="image/014.jpg"/>
<img class="pic pic15" src="image/015.jpg"/>
<img class="pic pic16" src="image/016.jpg"/>
</div>
<div class="three">
<img class="pic pic17" src="image/017.jpg"/>
<img class="pic pic18" src="image/018.jpg"/>
<img class="pic pic19" src="image/019.jpg"/>
<img class="pic pic20" src="image/020.jpg"/>
<img class="pic pic21" src="image/021.jpg"/>
<img class="pic pic22" src="image/022.jpg"/>
<img class="pic pic23" src="image/023.jpg"/>
<img class="pic pic24" src="image/024.jpg"/>
</div>
<div class="button">
<a href="index.html">返回首页</a>
</div>
</div>
<!-- footer -->
<footer class="footer">
<div class="footer__wrap">
<nav class="footer__type">
<a href="javascript:;" class="footer__type-item">夏醉浅梦</a>
<a href="javascript:;" class="footer__type-item">浅凝夏烟</a>
<a href="javascript:;" class="footer__type-item">浅墨泼夏</a>
<a href="javascript:;" class="footer__type-item">浅渊夏觞</a>
<a href="javascript:;" class="footer__type-item">夏浅话残</a>
<a href="javascript:;" class="footer__type-item">斜雨竹林</a>
<a href="javascript:;" class="footer__type-item">紫夏廖浅</a>
<a href="javascript:;" class="footer__type-item">半抹灯花</a>
</nav>
<div class="footer__copy">Copyright 2018.12.12 新院王莉敏 ©版权所有 All Right Reserved | 京 ICP备 13046642号-2
</div>
</div>
</footer>
</body>
</html>
照片墙
