<!DOCTYPE html><html>?? ?<head>?? ??? ?<meta charset = "utf-8">?? ??? ?<h1 align = "center" ><i>畫(huà)廊</i></h1>?? ??? ?<style type="text/css">?? ??? ??? ????????? *{padding: 0;margin: 0;}???????? body?? ??? ? {?? ??? ? ?? ?background-color: #f00;/*背景景色*/?? ??? ? ?? ?color: yellow;/*通用字體顏色*/?? ??? ? ?? ?font-family: 'Avenir Next','Lantinghei SC';/*字體樣式*/?? ??? ? ?? ?font-size: 16px;/*字體大小*/?? ??? ? ?? ?-webkit-font-smoothing:antialiasezd;/*字體平滑*/?? ??? ? }?? ??? ? .wrap?? ??? ? ?? ?{?? ??? ? ?? ??? ?width: 100%;?? ??? ? ?? ??? ?height: 600px;?? ??? ? ?? ??? ?position: absolute;/*垂直居中*/?? ??? ? ?? ??? ?top:50%;?? ??? ? ?? ??? ?margin-top:-200px;/*設(shè)為高度的一半*/?? ??? ? ?? ??? ?overflow: hidden;/*超出warp范圍的樣式不顯示*/?? ??? ? ?? ??? ?-webkit-perspective:800px;?? ??? ? ?? ??? ?-webkit-perspective-origin:50% 50%;?? ??? ? ?? ??? ?-webkit-transform-style:-webkit-preserve-3d;?? ??? ? ?? ?}?? ??? ? ?? ?/*海報(bào)樣式*/?? ??? ? .photo?? ??? ? ?? ?{?? ??? ? ?? ??? ?width: 300px;?? ??? ? ?? ??? ?height: 422px;?? ??? ? ?? ??? ?position: absolute;?? ??? ? ?? ??? ?z-index: 1;?? ??? ? ?? ??? ?box-shadow: 0 0 1px rgba(0,0,0,.01);/*陰影*/?? ??? ? ?? ??? ?border:3px solid yellow;?? ??? ? ?? ??? ?text-align: center;?? ??? ? ?? ?}?? ??? ? ?? ?.photo.side?? ??? ? ?? ?{?? ??? ? ?? ??? ?width: 100%;?? ??? ? ?? ??? ?height: 100%;?? ??? ? ?? ??? ?background-color: #eee;?? ??? ? ?? ??? ?position: absolute;?? ??? ? ?? ??? ?top: 0;?? ??? ? ?? ??? ?right: 0;?? ??? ? ?? ??? ?box-sizing : border-box;/*padding和內(nèi)容都在邊框之內(nèi)*/?? ??? ? ?? ??? ?-webkit-perspective:800px;?? ??? ? ?? ??? ?-webkit-perspective-origin:50% 50%;?? ??? ? ?? ??? ?-webkit-transform-style:-webkit-preserve-3d;?? ??? ? ?? ?}?? ??? ? ?? ??? ??? ? ?? ?.photo-wrap.side-front?? ??? ? ?? ?{?? ??? ? ?? ??? ?-webkit-transform:rotateY(0deg);?? ??? ? ?? ?}?? ??? ? ?? ?.photo-wrap.side-back?? ??? ? ?? ?{?? ??? ? ?? ??? ?-webkit-transform:rotateY(180deg);?? ??? ? ?? ?}?? ??? ? ?? ?.photo-wrap.side?? ??? ? ?? ?{?? ??? ? ?? ??? ?-webkit-backface-visibility:visible;?? ??? ? ?? ?}?? ??? ? ?? ?.photo-front .photo-wrap{?? ??? ? ?? ??? ?-webkit-transform:rotateY(0deg);?? ??? ? ?? ?}?? ??? ? ?? ?.photo-back .photo-wrap{?? ??? ? ?? ??? ?-webkit-transform:rotateY(180deg);?? ??? ? ?? ?}?? ??? ? ?? ?.photo.side-front{}?? ??? ? ?? ?.photo.side-front.image?? ??? ? ?? ?{?? ??? ? ?? ??? ?width: 100%;?? ??? ? ?? ??? ?height: 250px;?? ??? ? ?? ??? ?line-height: 250px;?? ??? ? ?? ??? ?overflow: hidden;?? ??? ? ?? ??? ?-webkit-perspective:800px;?? ??? ? ?? ??? ?-webkit-perspective-origin:50% 50%;?? ??? ? ?? ??? ?-webkit-transform-style:-webkit-preserve-3d;?? ??? ? ?? ?}?? ??? ? ?? ?.photo .side-front .image img?? ??? ? ?? ?{?? ??? ? ?? ??? ?width: 100%;?? ??? ? ?? ?}?? ??? ? ?? ?.photo .side-front .caption?? ??? ? ?? ?{?? ??? ? ?? ??? ?text-align: center;?? ??? ? ?? ??? ?font-size: 14px;?? ??? ? ?? ??? ?line-height: 10px;?? ??? ? ?? ??? ?top: 10%;?? ??? ? ?? ?}?? ??? ? ?? ?.photo.side-back{}?? ??? ? ?? ?.photo.side-back.desc{?? ??? ? ?? ??? ?top:100px;?? ??? ? ?? ??? ?color: #f44;?? ??? ? ?? ??? ?font-size:14px;?? ??? ? ?? ??? ?line-height: 1.5em;?? ??? ? ?? ?}?? ??? ? ?? ?/*當(dāng)前選中的海報(bào)樣式*/?? ??? ? ?? ?.photo-center?? ??? ? ?? ?{?? ??? ? ?? ??? ?left: 50%;?? ??? ? ?? ??? ?top: 40%;?? ??? ? ?? ??? ?margin:-150px 0 0 -148px;?? ??? ? ?? ??? ?z-index: 999; ?? ??? ? ?? ?}?? ??? ? ?? ?.photo-wrap?? ??? ? ?? ?{?? ??? ? ?? ??? ?position: absolute;?? ??? ? ?? ??? ?width: 100%;?? ??? ? ?? ??? ?height: 100%;?? ??? ? ?? ???? -webkit-perspective:800px;?? ??? ? ?? ??? ?-webkit-perspective-origin:50% 50%;?? ??? ? ?? ??? ?-webkit-transform-style:-webkit-preserve-3d;?? ??? ? ?? ???? -webkit-transition:all 3s;?? ??? ? ?? ?}?? ??? ? ?? ??? ??? ?</style>?? ?</head>?? ?<body onselectstart = "return false;">?? ??? ?<div classs = "wrap">?? ??? ??? ?<div class = "photo photo-center">?? ??? ??? ??? ?<div class = "photo-wrap">?? ??? ??? ??? ??? ??? ??? ??? ??? ?<div class = "side side-front">?? ??? ??? ??? ??? ??? ?<p class ="image">?? ??? ??? ??? ??? ??? ?<img src= "srcs/lang.jpg"></p>?? ??? ??? ??? ??? ??? ?<p calss = "caption">可愛(ài)的狼</p>?? ??? ??? ??? ??? ?</div>?? ??? ??? ??? ??? ?<div class = "side side-back">?? ??? ??? ??? ??? ??? ?<p class ="desc">描述信息</p>?? ??? ??? ??? ??? ?</div>?? ??? ??? ??? ?</div>?? ??? ??? ?</div>?? ??? ?</div>?? ?</body></html>
添加回答
舉報(bào)
0/150
提交
取消