📌  相关文章
📜  语义 ui cdn (1)

📅  最后修改于: 2023-12-03 14:57:41.717000             🧑  作者: Mango

语义 UI CDN

介绍

语义 UI 是一个基于语义化的 HTML5 规范和 CSS 样式的前端框架，具有完整的响应式设计和清晰的设计规范。CDN（Content Delivery Network）是内容分发网络，是一种通过多个服务器和网络来提供高可用性和性能优化的服务。通过在网站上引入语义 UI CDN，可以使网页加载更快，并且不会占用您的带宽。

引入语义 UI CDN

以下是语义 UI CDN 最新版本的引用方式：

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/semantic-ui/2.4.1/semantic.min.css">
<script src="https://cdn.jsdelivr.net/semantic-ui/2.4.1/semantic.min.js"></script>

以上代码片段中，我们通过 <link> 标签和 <script> 标签引入了语义 UI CDN 的 CSS 和 JavaScript 文件，这是整个网站或应用程序应该在 <head> 标签中引用的。

使用语义 UI CDN
按钮

我们可以通过以下代码创建一个按钮：

<button class="ui button">点击我</button>

此外，我们还可以通过 primary 、secondary 和 basic 选项来更改按钮的类型：

<button class="ui primary button">主要按钮</button>
<button class="ui secondary button">次要按钮</button>
<button class="ui basic button">基本按钮</button>
标签

标记可以用于显示重要的内容，并且有多种标记类型可供选择。

<div class="ui red label">重要</div>
<div class="ui yellow label">提醒</div>
<div class="ui green label">成功</div>
图像

语义 UI 提供了一个简单的方法来引入图像。

<img src="//semantic-ui.com/images/avatar2/large/kristy.png" class="ui avatar image">
菜单

菜单可以通过各种方式使用，如从顶部导航到边栏导航等。

<div class="ui inverted menu">
  <a href="#" class="active item">首页</a>
  <a href="#" class="item">信息</a>
  <a href="#" class="item">帮助</a>
  <div class="right menu">
    <div class="item">
      <div class="ui icon input">
        <input type="text" placeholder="搜索...">
        <i class="search link icon"></i>
      </div>
    </div>
    <a href="#" class="ui item">登录</a>
    <a href="#" class="ui primary button">注册</a>
  </div>
</div>
总结

语义 UI 提供了一种简单而强大的方式来创建漂亮的用户界面。使用语义 UI CDN，您可以通过简单地引用文件来轻松地在您的网站上使用语义 UI。语义 UI CDN 还提供了一些可自定义的选项，以便您可以根据自己的需要更改框架的样式和行为。