这是Neptune CSS的快速启动教程。了解一个实用的CSS框架，并更快，更轻松地开发网站。
What is Neptune CSS? ⢠Install ⢠Configuration ⢠Conclution ⢠Social Media
什么是海王星CSS？
Neptune CSS是一个轻巧的CSS框架。它是免费的，您可以将其用于开源项目。
安装
让我们从设置我们的项目开始。因此，在您的IDE中打开一个新项目，然后将以下代码行键入您的终端。
npm init
回答问题和类型
npm install neptunecss
如果您想也使用JavaScript类型
npm install neptunecss-js
然后导入软件包。您也可以使用CDN链接。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neptunecss@latest/neptune.min.css">
<script src="https://cdn.jsdelivr.net/npm/neptunecss-js@latest/neptune.min.js"></script>
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Import example style -->
<link rel="stylesheet" href="/examamples/example_style.min.css">
<!-- Import Neptune CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neptunecss@latest/neptune.min.css">
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
<title>Title | Neptune examples</title>
</head>
<body>
<div class="select-box" id="mySelect">
<span class="text-l">Select</span>
<select class="hidden-select">
<option value="null">Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
</div>
<script src="https://cdn.jsdelivr.net/npm/neptunecss-js@latest/neptune.min.js"></script>
</body>
</html>
请参见GitHub
上的示例提示 - 安装Snippets extension vs代码
配置
颜色
设置背景颜色，字体颜色，系统颜色以及主要和强调颜色。您只需设置一个值，即颜色色调（HSL）。有关所有颜色变量和默认值，请参见Documentation。
例子
/* Setup Colors */
--background-dark: {Your Value};
过渡持续时间
/* Setup Transition Duration */
--transition-duration: .4s;
有关更多配置，请参见Documentation。
结论
Neptune CSS是一个快速而超光的CSS框架。配置项目并更快地开发。