利用 PNG 实现图片圆角处理 DIV +CSS 多行多列多层叠加

最新推荐文章于 2021-09-17 18:46:12 发布

aliketen

最新推荐文章于 2021-09-17 18:46:12 发布

阅读量563

点赞数

分类专栏： CSS样式表

本文链接：https://blog.csdn.net/aliketen/article/details/9801305

版权

CSS样式表专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DIV 多元素 遮罩 重叠 分行 分列 </title>
    <style type="text/css">
        div, form, img, ul, li
        {
            font-family: "Tahoma";
            margin: 0;
            padding: 0;
            border: 0;
            list-style-type: none;
        }
        
        .all
        {
            width: 100%;
            height: auto;
        }
        
        .all ul
        {
            width: 860px;
            height: auto;
            margin: 0 auto;
        }
        
        .all ul li
        {
            float: left;
            position: relative;
            z-index: 800;
            background-image: url(bg.png);
            width: 160px;
            height: 122px;
            margin: 8px 6px;
        }
        
        .all ul li .mask
        {
            cursor: pointer;
            position: absolute;
            z-index: 1000;
            background-image: url(frame_list.png);
            width: 160px;
            height: 90px;
        }
        
        .all ul li .select
        {
            position: absolute;
            z-index: 1200;
            background-image: url(frame_select.png);
            width: 170px;
            height: 131px;
            margin-top:-5px;
            margin-left:-5px;
        }
        
        .all ul li .txt
        {
            display: block;
            width: 160px;
            height: 32px;
            font-size: 12px;
            color:#333333;
            text-align: center;
            padding-top: 6px;
        }
    </style>
</head>
<body>
    <div class="all">
        <ul>
            <li><span class="mask"></span>
                <img alt="1" src="01.png" width="160" height="90" /><span class="txt">PHOTO - 1</span></li>
            <li><span class="mask"></span>
                <img alt="2" src="01.png" width="160" height="90" /><span class="txt">PHOTO - 2</span></li>
            <li><span class="mask"></span>
                <img alt="3" src="01.png" width="160" height="90" /><span class="txt">PHOTO - 3</span></li>
            <li><span class="mask"></span>
                <img alt="4" src="01.png" width="160" height="90" /><span class="txt">PHOTO - 4</span></li>
            <li><span class="mask"></span>
                <img alt="5" src="01.png" width="160" height="90" /><span class="txt">PHOTO - 5</span></li>
            <li><span class="mask"></span>
                <img alt="6" src="01.png" width="160" height="90" /><span class="txt">PHOTO - 6</span></li>
            <li><span class="mask"></span>
                <img alt="7" src="01.png" width="160" height="90" /><span class="txt">PHOTO - 7</span></li>
            <li><span class="select"></span><span class="mask"></span>
                <img alt="8" src="01.png" width="160" height="90" /><span class="txt">PHOTO - 8</span></li>
            <li><span class="mask"></span>
                <img alt="9" src="01.png" width="160" height="90" /><span class="txt">PHOTO - 9</span></li>
            <li><span class="mask"></span>
                <img alt="10" src="01.png" width="160" height="90" /><span class="txt">PHOTO - 10</span></li>
            <li><span class="mask"></span>
                <img alt="11" src="01.png" width="160" height="90" /><span class="txt">PHOTO - 11</span></li>
            <li><span class="mask"></span>
                <img alt="12" src="01.png" width="160" height="90" /><span class="txt">PHOTO - 12</span></li>
            <li><span class="mask"></span>
                <img alt="13" src="01.png" width="160" height="90" /><span class="txt">PHOTO - 13</span></li>
            <li><span class="mask"></span>
                <img alt="14" src="01.png" width="160" height="90" /><span class="txt">PHOTO - 14</span></li>
            <li><span class="mask"></span>
                <img alt="15" src="01.png" width="160" height="90" /><span class="txt">PHOTO - 15</span></li>
        </ul>
    </div>
</body>
</html>

aliketen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用 PNG 实现图片圆角处理 DIV +CSS 多行多列多层叠加

DIV 多元素遮罩重叠分行分列 div, form, img, ul, li { font-family: "Tahoma"; margin: 0; padding: 0; border: 0; list-style-type:
复制链接

扫一扫