网页—个人博客

网页的背景图引用了支付宝知托付加以修改，
缺点：网站的色彩搭配过于杂而乱…
浏览了些个人博客网站，首先对整体的布局进行明确，然后对写出来的区块加以相应的效果
也引用了本地字体和音乐，字体这块对有些浏览器不兼容
查看演示


#picList img{
width:240px;
height:170px;
padding:4px;
cursor:pointer
}
#picList span{
background-color:white;
width:239px;
height:169px;
display:block;
float:left;
margin:5px;
box-shadow: 0px 0px 20px #fff
}
#pan{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.8);
display:none
}
#showImage{
position:absolute;
left:50%;
top:170px;
z-index:6666666;
box-shadow:0px 0px 20px #fff;
margin-left:-329px
}
#showImage span{
position:absolute;
width:660px;
height:460px;
background:#fff;
border-radius: 10px
}
#showImage img{
position:absolute;
margin: 5px;
width:650px;
height:450px;
border-radius: 10px
}
#show{display:none}
#next,#prev{
position:absolute;
width:50px;
height:80px;
box-shadow:0px 0px 20px #fff;
right:110px;
top:330px;
border-radius:10px;
background:rgba(0,0,0,.8);
z-index:20px;
cursor:pointer
}
#next{right: 110px}
#prev{left:100px}
#show p{
font-size:60px;
text-align:center;
line-height:70px;
font-weight:bold;
color:#C5C5C5
}