CSS实例：图片导航块

最新推荐文章于 2022-07-21 11:15:02 发布

aiyouhu4051

最新推荐文章于 2022-07-21 11:15:02 发布

阅读量149

点赞数

原文链接：http://www.cnblogs.com/D0204/p/7698050.html

版权

1.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../static/css/si.css">
    `
</head>
<body>


        <div class="recommend">
            <div class="img">
                <a href="http://www.gzcc.cn"><img src="http://img4q.duitang.com/uploads/item/201503/05/20150305160221_UtNZR.thumb.700_0.jpeg"></a>
                <div class="desc"><a href="http://www.gzcc.cn">海贼王</a>  </div>
            </div>
            <div class="img">
                <a href="http://www.gzcc.cn"><img src="http://photo.l99.com/bigger/31/1363338579349_p05ju6.jpg"></a>
                <div class="desc"><a href="http://www.gzcc.cn">海贼王</a> </div>
            </div>
            <div class="img">
                <a href="http://www.gzcc.cn"><img src="http://p5.so.qhimgs1.com/t01ae15dfa7929fd93b.jpg"></a>
                <div class="desc"><a href="http://www.gzcc.cn">海贼王</a> </div>
            </div>
            <div class="img">
                <a href="http://www.gzcc.cn"><img src="http://p1.so.qhimgs1.com/t01370d2d421ed381cd.jpg"></a>
                <div class="desc"><a href="http://www.gzcc.cn">海贼王</a> </div>
            </div>

        <img class="http://photo.l99.com/bigger/31/1363338579349_p05ju6.jpg"><br>

        <div class="clearfloat">
            <a href="http://www.gzcc.cn"><img src="http://img4q.duitang.com/uploads/item/201503/05/20150305160221_UtNZR.thumb.700_0.jpeg" alt="4"></a><br>
            <img src="'http://photo.l99.com/bigger/31/1363338579349_p05ju6.jpg"><br>
            <img src="http://p5.so.qhimgs1.com/t01ae15dfa7929fd93b.jpg"><br>
            <img src="http://p1.so.qhimgs1.com/t01370d2d421ed381cd.jpg"><br>

        </div>


</body>
</html>

2.

   img{
   width:300px;
   }

div.img{
    border:1px solid #ccc;
    width:180px;
    float:left;
    margin:5px;

}

div.img img{
    width:100%;
    height:auto;

}

div.desc{
    text-align:center;
    padding:5px;
}

div.img.hover{
    border:1px solid #00000
}

转载于:https://www.cnblogs.com/D0204/p/7698050.html

aiyouhu4051

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实例：图片导航块

1.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="../static/css/si.c...
复制链接

扫一扫