Semantic UI 之信息 message

最新推荐文章于 2022-02-27 15:49:18 发布

梁云亮

最新推荐文章于 2022-02-27 15:49:18 发布

阅读量600

点赞数

分类专栏： # Semantic UI 文章标签： Semantic UI 信息 message

本文链接：https://blog.csdn.net/lianghecai52171314/article/details/107932954

版权

Semantic UI 专栏收录该内容

36 篇文章

订阅专栏

网页代码框架

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>信息</title>
        <link rel="stylesheet" href="semantic-ui/semantic.min.css">
        <script type="text/javascript" src="js/jquery3.3.1.js"></script>
        <script type="text/javascript" src="semantic-ui/semantic.min.js"></script>
    </head>
    <body>

		<!-- 在此处编写不同信息的代码 -->

    </body>
</html>

各种不同的信息

基本的信息

<div class="ui message">
    <div class="header">大家好</div>
    <p>请大家好好学习，天天向上！</p>
</div>
<div class="ui compact message">
    <div class="header">大家好</div>
    <p>请大家好好学习，天天向上！</p>
</div>
<div class="ui small message">
    <div class="header">大家好</div>
    <p>请大家好好学习，天天向上！</p>
</div>
<div class="ui massive message">
    <div class="header">大家好</div>
    <p>请大家好好学习，天天向上！</p>
</div>

效果：
在这里插入图片描述

带图标的信息

<div class="ui icon message">
    <i class="info icon"></i>
    <div class="content">
        <div class="header">大家好</div>
        <p>请大家好好学习，天天向上！</p>
    </div>
</div>

效果：
在这里插入图片描述

彩色的信息

<div class="ui info message">
    <div class="header">注册邀请</div>
    <p>VIP信息需要注册登录后才能访问！</p>
</div>
<div class="ui warning message">
    <div class="header">登录失败</div>
    <p>用户名或密码不正确，请重新登录</p>
</div>
<div class="ui negative message">
    <div class="header">登录失败</div>
    <p>用户名或密码不正确，请重新登录</p>
</div>
<div class="ui success message">
    <div class="header">邮箱验证</div>
    <p>由于长时间没有登录，请到注册邮箱进行验证</p>
</div>
<div class="ui positive message">
    <div class="header">登录成功</div>
    <p>欢迎您，张三！</p>
</div>

效果：
在这里插入图片描述

可关闭的信息

<div class="ui positive message">
    <i class="close icon"></i>
    <div class="header">登录成功</div>
    <p>欢迎您，张三！</p>
</div>

<script>
    $(".message .close").click(function () {
        $(this).closest(".message") //找到离它最近的message
        .transition("fade");//动画：fly
    });
</script>

在这里插入图片描述
单击右上角的关闭按钮，信息框会消失。

带颜色的文本信息

<div class="ui red message">red</div>
<div class="ui olive message">olive</div>
<div class="ui teal message">teal</div>
<div class="ui purple message">purple</div>
<div class="ui black message">black</div>