CSS基础-27CSS常用操作-图片

最新推荐文章于 2022-04-24 17:43:41 发布

zhaihaohao1

最新推荐文章于 2022-04-24 17:43:41 发布

阅读量359

点赞数

分类专栏： css基础

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/47208315

版权

css基础专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!--CSS常用操作-图片-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css06.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="rongqi">
    <div class="tupian">
        <a href="http://www.baidu.com" target="_self">
            <img src="images/item1.jpg" width="300px" height="300px">
        </a>

        <div class="miaoshu">这是一张很好看的图片</div>
    </div>
    <div class="tupian">
        <a href="http://www.baidu.com" target="_self">
            <img src="images/item1.jpg" width="300px" height="300px">
        </a>

        <div class="miaoshu">这是一张很好看的图片</div>
    </div>
    <div class="tupian">
        <a href="http://www.baidu.com" target="_self">
            <img src="images/item1.jpg" width="300px" height="300px">
        </a>

        <div class="miaoshu">这是一张很好看的图片</div>
    </div>
    <div class="tupian">
        <a href="http://www.baidu.com" target="_self">
            <img src="images/item1.jpg" width="300px" height="300px">
        </a>

        <div class="miaoshu">这是一张很好看的图片</div>
    </div>
    <div class="tupian">
        <a href="http://www.baidu.com" target="_self">
            <img src="images/item1.jpg" width="300px" height="300px">
        </a>

        <div class="miaoshu">这是一张很好看的图片</div>
    </div>
    <div class="tupian">
        <a href="http://www.baidu.com" target="_self">
            <img src="images/item1.jpg" width="300px" height="300px">
        </a>

        <div class="miaoshu">这是一张很好看的图片</div>
    </div>
    <div class="tupian">
        <a href="http://www.baidu.com" target="_self">
            <img src="images/item1.jpg" width="300px" height="300px">
        </a>

        <div class="miaoshu">这是一张很好看的图片</div>
    </div>

</div>

</body>
</html>
css:
body{
    width: 70%;
    height: auto;
    margin: 10px auto;
    background-color: #b3d4fc;
}
.tupian{
    /*设置边框的宽度，和颜色*/
    border: 1px solid darkkhaki;
    width: auto;
    height: auto;
    /*向左浮动*/
    float: left;
    /*文字居中*/
    text-align: center;
    margin: 5px;
}
img{
    margin: 5px;
    /*透明度设置*/
    opacity: 1;
}
.miaoshu{
    font-size: 5px;
    margin-bottom: 5px;
}
/*鼠标放上去，该变背景颜色*/
a:hover{
 background-color: #000000;
}

zhaihaohao1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础-27CSS常用操作-图片

html>lang="en"> charset="UTF-8"> href="css06.css" type="text/css" rel="stylesheet">class="rongqi"> class="tupian"> href="http://www.baidu.com" target="_self">
复制链接

扫一扫

专栏目录