CSS常用标签

最新推荐文章于 2024-06-13 23:29:27 发布

chenlei...

最新推荐文章于 2024-06-13 23:29:27 发布

阅读量4k

点赞数

分类专栏：基础学习文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_67614925/article/details/124714703

版权

本文介绍了CSS中的一些常见样式技巧，包括文字居中对齐、图片居中对齐、背景图设置、文本缩进、透明度调整、三角形生成、元素隐藏以及overflow属性的应用，通过实例展示了这些技巧的实际效果。

摘要由CSDN通过智能技术生成

文章目录

文字居中对齐
图片居中对齐
背景图
文本缩进
透明度
三角形制作
隐藏
overflow应用

接下来介绍一些常用的css标签，话不多说 showcode！！！

文字居中对齐

<head>
    <style>
        * {
     
            margin: 0 auto;
            padding: 0;
        }

        div {
     
            margin: 30px;
            padding: 0;
            width: 300px;
            height: 300px;
            border: 1px solid red;
            font-size: 66px;
            /* 文本居中 */
            text-align: center;
            /* 垂直居中 */
            line-height: 300px;
        }
    </style>
</head>

<body>
    <div id="box01">路飞</div>
    <div id="box02">索隆</div>
    <div id="box03">山治</div>
</body>

在这里插入图片描述

图片居中对齐

<head>
    <style>
        * {
     
            margin: 0 auto;
            padding: 0;
        }
        div {
     
            margin: 30px;
            padding: 0;
            width: 300px;
            height: 300px;
            border: 1px solid red;
            font-size: 66px;
            text-align: center;
             /* 先要将盒子变为格子形式，在进行文本对齐 */
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div id="box01"><img src="/html/img/04.jpg" alt="" height="200px"></div>
    <div

最低0.47元/天解锁文章

chenlei...

关注

0
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS常用标签

文章目录文字居中对齐图片居中对齐背景图文本缩进透明度三角形制作隐藏overflow应用接下来介绍一些常用的css标签，话不多说 showcode！！！文字居中对齐<head> <style> * { margin: 0 auto; padding: 0; } div { margin: 30px; padding: 0;
复制链接

扫一扫