CSS学习08之图片样式

最新推荐文章于 2024-04-02 22:48:27 发布

小黑神zxs

最新推荐文章于 2024-04-02 22:48:27 发布

阅读量1.1k

点赞数 1

分类专栏： CSS3详解文章标签： css3 html 前端 css图片样式 idea

本文链接：https://blog.csdn.net/zxs1002/article/details/122901412

版权

CSS3详解专栏收录该内容

18 篇文章 0 订阅

订阅专栏

回顾

文字样式：

文字设置

设置文字的风格，大小，粗细，字体

span标签

把一些比较重要的文字我们用span便签框起来

图片和文字混合样式

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片样式</title>
    <style>
        /*简写边框属性*/
        div{
            width: 800px;
            height:450px;
            /*border-style: solid;*/
            /*border-radius: 10px;*/
            /*border-color: deeppink;*/
            border: solid 2px deeppink;
        }
        img{
            width: 400px;
            height: 320px;
        }
        img,span{
            border: red solid 2px;
            vertical-align: middle;
        }
    </style>
</head>
<body>

<div>
    <p style="border: deeppink 2px solid;text-align: center">水平居中</p>
    <p>
        <img src="../2.字体文本样式/images/狗牌.jpg" alt="狗牌">
        <span>我是狗牌,展示水平对齐!</span>
    </p>
</div>

</body>
</html>

效果

在这里插入图片描述

小结

文字图片水平对齐

img,span{
            border: red solid 2px;
            /*水平对齐*/
            vertical-align: middle;
}

作者有话说

博客创作不易，希望看到这里的读者动动你的小手点个赞，如果喜欢的小伙伴可以一键三连，作者大大在这里给大家谢谢了。

小黑神zxs

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS学习08之图片样式

回顾文字样式：文字设置设置文字的风格，大小，粗细，字体span标签把一些比较重要的文字我们用span便签框起来图片和文字混合样式代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片样式</title> <style> /*简写边框属性*/ div{
复制链接

扫一扫