<<web>>漂亮的相册(一)

最新推荐文章于 2023-07-07 12:59:19 发布

prototypeAlert

最新推荐文章于 2023-07-07 12:59:19 发布

阅读量940

点赞数

CC 4.0 BY-SA版权

分类专栏： <2016> web

本文链接：https://blog.youkuaiyun.com/qq_15766257/article/details/51395603

<2016> 同时被 2 个专栏收录

43 篇文章

订阅专栏

web

15 篇文章

订阅专栏

本文介绍了一个使用HTML和CSS实现的照片墙布局案例，其中照片框采用了倾斜显示的方式，并附带了简单的图片描述。布局通过浮动元素和变换效果实现，背景色为浅灰色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1,html

<!doctype html>
 <html>
  <head>
   <meta charset="utf-8">
   <link href="D:/test/css/css.css" rel="stylesheet" type="text/css">
   <title></title>
  </head>
 <body>
   <div class="polaroid rotate_left">

     <img src="D:/test/images/1.jpg" witdh="300px" height="300px"/>
   <p class="caption">wallence</p>
   </div>
   <div class="polaroid rotate_right">
      <img src="D:/test/images/2.jpg" witdh="300px" height="300px"/>
      <p class="caption">wallence</p>
   </div>
   <div class="polaroid rotate_left">
    <img src="D:/test/images/3.jpg" witdh="300px" height="300px"/>
      <p class="caption">wallence</p>
   </div>
   <div class="polaroid rotate_right">
    <img src="D:/test/images/4.jpg" witdh="300px" height="300px"/>
      <p class="caption">wallence</p>
   </div>

 </body>
</html>

2,css

body{
    margin:30px;
    background-color: #e9e9e9;
}
div.polaroid
{
width:310px;
padding:10px 10px 20px 10px;
border:4px solid #BFBFBF;
background-color:white;
/* Add box-shadow */
box-shadow:10px 30px 10px #aaaaaa;
}
div.rotate_left{
float:left;
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
}
div.rotate_right{
float:left;
transform:rotate(-8deg);
-ms-transform:rotate(-8deg); /* IE 9 */
}
caption{
    float:right;
}