CSS 3 transform制作漂亮的照片墙

最新推荐文章于 2024-07-11 10:00:00 发布

卡夫卡的baby

最新推荐文章于 2024-07-11 10:00:00 发布

阅读量743

点赞数 1

分类专栏： css3 文章标签： css

本文链接：https://blog.csdn.net/weixin_72303943/article/details/125915957

版权

这篇博客介绍了如何利用CSS3的transform属性来构建一个吸引人的照片墙。通过在HTML中设置images文件夹，放置图片，然后创建并布局div元素，结合图像超链接和文字，最后应用CSS样式，特别是transform效果，来实现照片墙的展示。

摘要由CSDN通过智能技术生成

CSS3 transform制作漂亮的照片墙

1、在html中建设images文件夹，在里面放入四张照片和一张大的背景图图片

2、在html中写入div标签

3、在div里建设div.photowall背景图标签

4、在背景图盒子中建设四个div照片盒子

5、在每个照片盒子写入图像超链接，然后在写入p标签，标签内写入自己喜欢的文字

6、在style样式内写每个盒子所对应的样式标签，然后查看效果

代码如下：

<title>CSS3transform制作漂亮的照片墙</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-image: url(./img/bg10.jpg);
            background-size: cover;
            overflow: hidden;
        }
        .container{
            width: 100%;
            height: 100%;
        }
        .photowall{
            width: 100%;
            height: 100%;
            display: -webkit-box;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            outline: 1px dashed red;
        }
        .photoview{