HTML5基础加强css样式篇（target目标伪类选择器应用）（十）

最新推荐文章于 2022-11-29 21:34:15 发布

咸鸭蛋炒饭

最新推荐文章于 2022-11-29 21:34:15 发布

阅读量1k

点赞数 1

分类专栏： HTML5基础篇文章标签： css 应用 html5

本文链接：https://blog.csdn.net/u010853130/article/details/62227141

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.静态界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html body{
            margin: 0px;
            padding: 0px;
        }
        #bottomimg{
            float: left;

        }
       #bottomimg>li{
           float: left;

       }
       #bottomimg img{
           width: 121.6px;
           display: inline-block;
       }

       #topimg{
           position: relative;
           height: 454px;
       }
       #topimg >li{
           position: absolute;
           top: 0px;
           left: 0px;

       }
        ul{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        #body{
            width: 730px;
        }
    </style>

</head>
<body>
<div id="body">
    <ul id="topimg">
        <li><img src="img/jd001.jpg" /></li>
        <li><img src="img/jd002.jpg" /></li>
        <li><img src="img/jd003.jpg" /></li>
        <li><img src="img/jd004.jpg" /></li>
        <li><img src="img/jd005.jpg" /></li>
        <li><img src="img/jd006.jpg" /></li>
    </ul>
    <ul id="bottomimg">
        <li><img  src="img/jd001.jpg" /></li>
        <li><img src="img/jd002.jpg" /></li>
        <li><img src="img/jd003.jpg" /></li>
        <li><img src="img/jd004.jpg" /></li>
        <li><img src="img/jd005.jpg" /></li>
        <li><img src="img/jd006.jpg" /></li>
    </ul>

</div>
</body>
</html>

使用taget完成功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html body{
            margin: 0px;
            padding: 0px;
        }
        #bottomimg{
            float: left;

        }
       #bottomimg>li{
           float: left;

       }
       #bottomimg img{
           width: 121.6px;
           display: inline-block;
       }

       #topimg{
           position: relative;
           height: 454px;
       }
       #topimg >li{
           position: absolute;
           top: 0px;
           left: 0px;

       }
        ul{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        #body{
            width: 730px;
        }
        #topimg>:target{
            z-index: 2;
        }li
        #img01{
            z-index: 1;
        }
    </style>

</head>
<body>
<div id="body">
    <ul id="topimg">
        <li id="img01"><img   src="img/jd001.jpg" /></li>
        <li id="img02"><img   src="img/jd002.jpg" /></li>
        <li id="img03"><img   src="img/jd003.jpg" /></li>
        <li id="img04"><img   src="img/jd004.jpg" /></li>
        <li id="img05"><img   src="img/jd005.jpg" /></li>
        <li id="img06"><img   src="img/jd006.jpg" /></li>
    </ul>
    <ul id="bottomimg">
        <li><a href="#img01"><img  src="img/jd001.jpg" /></a></li>
        <li><a href="#img02"><img  src="img/jd002.jpg" /></a></li>
        <li><a href="#img03"><img  src="img/jd003.jpg" /></a></li>
        <li><a href="#img04"><img  src="img/jd004.jpg" /></a></li>
        <li><a href="#img05"><img  src="img/jd005.jpg" /></a></li>
        <li><a href="#img06"><img  src="img/jd006.jpg" /></a></li>
    </ul>

</div>
</body>
</html>

效果：点击切换制作图片自己找

咸鸭蛋炒饭

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5基础加强css样式篇（target目标伪类选择器应用）（十）

1.静态界面 Title html body{ margin: 0px; padding: 0px; } #bottomimg{ float: left; } #bottomimg>li{
复制链接

扫一扫