css-图片廊

最新推荐文章于 2024-06-11 06:02:41 发布

米白蓝

最新推荐文章于 2024-06-11 06:02:41 发布

阅读量202

点赞数

分类专栏： HTML+css

本文链接：https://blog.csdn.net/qq_50563868/article/details/115797197

版权

HTML+css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用CSS创建一个图片廊，包括展示的代码和最终的成果效果。

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

图片廊

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>图片廊</title>
    <style type="text/css" media="screen">
        img{
            width:160px;
            height:140px;

        }
        div.decrp{
            padding:5px;
            border:1px solid lightcyan;
            width:146px;
            text-align:center;
            background-color:lavenderblush;
        }
        div.img{
            border:solid paleturquoise;
            width:160px;
            /* div框的位置是在左边排起来，从左到右排 */
            float:left;
            /* 两个div框的距离 */
            margin:60px;
        }
        div.img:hover{
            border:2px solid skyblue;
        }
        div.frist{
            width:570px;
            height:590px;
            background-color:pink;
            /* 给div添加圆角边框 */
            border-radius:30px;
            border:1px solid lightblue;
            /* 第一个参数表示顶部的距离为0，而第二个auto表示的是自动,设置后div会根据网页自动居中 */
            margin:0 auto;

        }
    </style>
</head>
<body>
    <div class="frist">
        <div class="img">
        <!-- target="_blank"表示连接跳转到新的页面 -->
            <a href="C:\Users\Lenovo\Pictures\Saved Pictures\73.jpg" target="_blank">
                <img src="C:\Users\Lenovo\Pictures\Saved Pictures\73.jpg" alt="图片文本描述">
            </a>
            <div class="decrp">图片文本描述</div>
        </div>
        <div class="img">
            <a href="C:\Users\Lenovo\Pictures\Saved Pictures\26.jfif" target="_blank">
             <img src="C:\Users\Lenovo\Pictures\Saved Pictures\26.jfif" alt="">
            </a>
            <div class="decrp">图片文本描述</div>
        </div>
        <div class="img">
            <a href="C:\Users\Lenovo\Pictures\Saved Pictures\27.jfif" target="_blank">
                <img src="C:\Users\Lenovo\Pictures\Saved Pictures\27.jfif" alt="">
            </a>
            <div class="decrp">图片文本描述</div>
        </div>
        <div class="img">
            <a href="C:\Users\Lenovo\Pictures\Saved Pictures\30.jpg" target="_blank">
                <img src="C:\Users\Lenovo\Pictures\Saved Pictures\30.jpg" alt="">
            </a>
            <div class="decrp">图片文本描述</div>
        </div>
    </div>
</body>
</html>