CSS常用样式总结

最新推荐文章于 2024-08-21 11:04:16 发布

ManGoYi

最新推荐文章于 2024-08-21 11:04:16 发布

阅读量355

点赞数

分类专栏： css 文章标签： css 布局

本文链接：https://blog.csdn.net/mangoyiy/article/details/76209206

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS书写规范：
影响布局的样式全部写在前面，可被继承的样式属性写在后面。如下：

    {
        display: block;
        margin-bottom: 10px;
        vertical-align: top;
        line-height: 18px;
        font-size: 16px;
        color: red;
        background: #fff;
    }

单行文本溢出省略

    {
        white-space: nowrap;    
        overflow: hidden;
        text-overflow: ellipsis;
    }

实现效果：这里写图片描述

清楚浮动

    ul:after{
        display: block;
        content: ".";
        height: 0;
        line-height: 0;
        clear: both;
        visibility: hidden;
    }

滤镜模糊效果

效果图：
这里写图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box-wrapper{
            position: relative;
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
        }
        .img{
            margin: 75px auto;
            width: 200px;
            height: 150px;
        }
        .background{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -999;
            filter: blur(4px);     // 模糊效果
            background: url(gitar.jpg) no-repeat;
        }
    </style>
</head>
<body>
    <div class="box-wrapper">   
        <div class="img">
            <img src="gitar.jpg" alt="" width="200" height="150">
        </div>
        <div class="background"></div>
    </div>
</body>
</html>

后续慢慢补充…….

ManGoYi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS常用样式总结

CSS书写规范：影响布局的样式全部写在前面，可被继承的样式属性写在后面。如下： { display: block; margin-bottom: 10px; vertical-align: top; line-height: 18px; font-size: 16px; color: red;
复制链接

扫一扫

专栏目录