项目介绍

这是一个基于 Ant Design 图标库的网站示例，使用了 Ant Design 的图标样式类(.anticon)。这个示例展示了如何在网页中使用 Ant Design 图标，包括图标的基本样式和交互效果。

目录

  1. 简介
  2. HTML结构
  3. CSS样式
  4. JavaScript交互
  5. 总结

简介

本示例展示了如何使用 Ant Design 图标库创建一个简单的网站。通过引入 CSS 和 JavaScript 文件，我们可以轻松地在网页中使用各种图标，并实现基本的交互效果。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ant Design 图标示例</title>
<link rel="stylesheet" href="https://unpkg.com/antd/dist/antd.min.css">
<style>
.my-icon {
font-size: 24px;
}
</style>
</head>
<body>
<div id="app">
<a class="my-icon antd-icons ant-icon-star"></a>
</div>
</body>
<script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
<script src="https://unpkg.com/antd/dist/antd.min.js"></script>
<script type="text/babel">
const App = () => (
<div>
<a class="my-icon antd-icons ant-icon-star"></a>
</div>
);
</script>
</html>

CSS样式

在上述 HTML 结构中，我们已经引入了 Ant Design 的 CSS 文件。这里我们只添加了一个简单的样式类 .my-icon,用于设置图标的字体大小。你可以根据需要自定义其他样式。

JavaScript交互

目前这个示例中没有涉及到 JavaScript 交互。但是你可以在 <script type="text/babel"> 标签内编写 JavaScript 代码，实现与图标的交互效果。例如，为图标添加点击事件：

document.querySelector('.my-icon').addEventListener('click', () => {
alert('你点击了星星图标！');
});