semantic-ui 设置div 的大小
时间: 2023-08-04 19:07:03 浏览: 50
你可以使用 CSS 来设置 div 元素的大小。以下是使用 Semantic UI 的示例代码:
```html
<div class="ui container">
<div class="ui segment" style="width: 50%; height: 200px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel justo ut massa posuere aliquet eu id tellus.</p>
</div>
</div>
`
在上面的示例中,我们使用了 Semantic UI 的容器和段落元素,并将段落元素的宽度设置为 50%、高度设置为 200px。你可以根据自己的需求修改这些值。注意,使用内联样式设置大小并不是最佳实践,你应该将样式定义在 CSS 文件中以便于重用和维护。
相关问题
semantic-ui 消息的图标
semantic-ui 提供了丰富的图标来表示不同类型的消息。以下是一些常见的消息类型及其对应的图标:
- 成功消息:`<i class="check icon"></i>`
- 错误消息:`<i class="exclamation triangle icon"></i>`
- 警告消息:`<i class="warning sign icon"></i>`
- 信息消息:`<i class="info circle icon"></i>`
- 加载中消息:`<i class="spinner loading icon"></i>`
你可以将上述图标与 `message` 类进行组合使用,例如:
```html
<div class="ui success message">
<i class="check icon"></i>
<div class="content">
<div class="header">操作成功</div>
<p>您的操作已成功完成。</p>
</div>
</div>
```
semantic-ui 实现系统通知页面
Semantic UI 是一个现代化的 UI 框架,可以帮助我们快速构建美观且易于使用的用户界面。在 Semantic UI 中,通知可以使用 Message 组件来实现。
下面是一个示例代码,演示如何使用 Semantic UI 实现系统通知页面:
```html
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
<body>
<div class="ui container">
<h1 class="ui header">系统通知</h1>
<div class="ui message">
<div class="header">重要通知</div>
<p>今天晚上 8 点将进行系统维护,请注意备份数据。</p>
</div>
<div class="ui message">
<div class="header">一般通知</div>
<p>新版本已经发布,请及时更新。</p>
</div>
<div class="ui message">
<div class="header">信息通知</div>
<p>您有一条新消息,请注意查收。</p>
</div>
</div>
</body>
</html>
```
在上面的代码中,我们使用了 Semantic UI 提供的 Message 组件来实现通知功能。每个通知都有一个标题和内容,可以根据需要进行设置。我们还使用了 Semantic UI 提供的容器和标题组件来构建页面布局。
在使用该代码之前,需要确保已经引入了 Semantic UI 的 CSS 文件。你可以从官方网站或者其他来源获取到该文件。