mirror of
https://gitee.com/smartchart/smartchart
synced 2025-05-05 09:09:24 +08:00
2103 lines
67 KiB
HTML
2103 lines
67 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" dir="ltr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="样式操作: # 要想大屏做得好, 样式要写得好 可是我们不是前端的同学也能写样式么 当然可以, 相信你观看完以下视屏即可
|
||
快速上手样式开发
|
||
基础样式入门: # CSS介绍 # CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
|
||
CSS语法 # CSS实例 每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 CSS注释
|
||
/*这是注释*/ 注释是代码之母, smartchart编辑中你可以使用CTRL+/快捷注释
|
||
CSS的几种引入方式 行内样式 行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
|
||
<p style="color: red">Hello world.</p> 内部样式 嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下：
|
||
<head> <style> p{ background-color: #2b99ff; } </style> </head> 外部样式 外部样式就是将css写在一个单独的文件中
|
||
<link href="mystyle.css" rel="stylesheet" type="text/css"/> CSS选择器 # 基本选择器
|
||
/*元素选择器*/ p {color: "red";} /*ID选择器*/ #i1 { background-color: red; } /*类选择器*/ .c1 { font-size: 14px; } p .c1 { color: red; } 注意： 样式类名不要用数字开头（有的浏览器不认）。 标签中的class属性如果有多个，要用空格分隔。">
|
||
<meta name="theme-color" content="#FFFFFF">
|
||
<meta name="color-scheme" content="light dark"><meta property="og:title" content="" />
|
||
<meta property="og:description" content="样式操作: # 要想大屏做得好, 样式要写得好 可是我们不是前端的同学也能写样式么 当然可以, 相信你观看完以下视屏即可
|
||
快速上手样式开发
|
||
基础样式入门: # CSS介绍 # CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
|
||
CSS语法 # CSS实例 每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 CSS注释
|
||
/*这是注释*/ 注释是代码之母, smartchart编辑中你可以使用CTRL+/快捷注释
|
||
CSS的几种引入方式 行内样式 行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
|
||
<p style="color: red">Hello world.</p> 内部样式 嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下：
|
||
<head> <style> p{ background-color: #2b99ff; } </style> </head> 外部样式 外部样式就是将css写在一个单独的文件中
|
||
<link href="mystyle.css" rel="stylesheet" type="text/css"/> CSS选择器 # 基本选择器
|
||
/*元素选择器*/ p {color: "red";} /*ID选择器*/ #i1 { background-color: red; } /*类选择器*/ .c1 { font-size: 14px; } p .c1 { color: red; } 注意： 样式类名不要用数字开头（有的浏览器不认）。 标签中的class属性如果有多个，要用空格分隔。" />
|
||
<meta property="og:type" content="article" />
|
||
<meta property="og:url" content="https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E6%A0%B7%E5%BC%8F%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B/" /><meta property="article:section" content="docs" />
|
||
|
||
|
||
|
||
<title>样式快速上手 | Smartchart开发手册</title>
|
||
<link rel="manifest" href="/manifest.json">
|
||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||
<link rel="stylesheet" href="/book.min.c58292d36b18b675680ab9baea2029204537b839ea72f258746ec0f32ce8d6c8.css" integrity="sha256-xYKS02sYtnVoCrm66iApIEU3uDnqcvJYdG7A8yzo1sg=" crossorigin="anonymous">
|
||
<script defer src="/flexsearch.min.js"></script>
|
||
<script defer src="/en.search.min.0cd0a5a6c5c00c4df8510e577016e7c22b3b43cfba14681803425f7dfb33a19e.js" integrity="sha256-DNClpsXADE34UQ5XcBbnwis7Q8+6FGgYA0JfffszoZ4=" crossorigin="anonymous"></script>
|
||
|
||
<script defer src="/sw.min.6f6f90fcb8eb1c49ec389838e6b801d0de19430b8e516902f8d75c3c8bd98739.js" integrity="sha256-b2+Q/LjrHEnsOJg45rgB0N4ZQwuOUWkC+NdcPIvZhzk=" crossorigin="anonymous"></script>
|
||
<!--
|
||
Made with Book Theme
|
||
https://github.com/alex-shpak/hugo-book
|
||
-->
|
||
|
||
</head>
|
||
<body dir="ltr">
|
||
<input type="checkbox" class="hidden toggle" id="menu-control" />
|
||
<input type="checkbox" class="hidden toggle" id="toc-control" />
|
||
<main class="container flex">
|
||
<aside class="book-menu">
|
||
<div class="book-menu-content">
|
||
|
||
<nav>
|
||
<h2 class="book-brand">
|
||
<a class="flex align-center" href="/"><span>Smartchart开发手册</span>
|
||
</a>
|
||
</h2>
|
||
|
||
|
||
<div class="book-search">
|
||
<input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
|
||
<div class="book-search-spinner hidden"></div>
|
||
<ul id="book-search-results"></ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/" class="">关于我们</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/%E8%AE%BE%E8%AE%A1%E7%90%86%E5%BF%B5/" class="">设计理念</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-c354321856ed6feb84c1b4323285de46" class="toggle" />
|
||
<label for="section-c354321856ed6feb84c1b4323285de46" class="flex justify-between">
|
||
<a role="button" class="">1.基础操作</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E4%B8%93%E4%B8%9A%E7%89%88%E8%AF%B4%E6%98%8E/" class="">专业版本说明</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B/" class="">快速开始</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E4%BB%AA%E8%A1%A8%E7%9B%98/" class="">第一个仪表盘</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%A4%8D%E6%9D%82%E6%8A%A5%E8%A1%A8/" class="">第一个复杂报表</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA3D%E5%9C%BA%E6%99%AF/" class="">第一个3D场景</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E4%B8%8A%E7%BA%BF%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">第一个上线数据集</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%88%9B%E5%BB%BA%E8%BF%9E%E6%8E%A5%E6%B1%A0/" class="">创建连接池</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%BA%94%E7%94%A8%E6%A8%A1%E6%9D%BF/" class="">应用模板</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E6%9D%83%E9%99%90%E7%AE%A1%E7%90%86/" class="">权限管理</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-ebbdf386fef5a4b61debc89d61d0dadf" class="toggle" />
|
||
<label for="section-ebbdf386fef5a4b61debc89d61d0dadf" class="flex justify-between">
|
||
<a role="button" class="">Vue相关</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/%E4%BD%BF%E7%94%A8VUE/" class="">使用 Vue</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/ElementUI/" class="">Element Ui</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/DataV%E5%BA%94%E7%94%A8/" class="">Data V应用</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-5bb75c87734dfbe4db2b79fa99d34f85" class="toggle" />
|
||
<label for="section-5bb75c87734dfbe4db2b79fa99d34f85" class="flex justify-between">
|
||
<a role="button" class="">不太重要</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E4%B8%8D%E5%A4%AA%E9%87%8D%E8%A6%81/%E4%B8%BB%E9%A2%98%E5%BA%94%E7%94%A8PRO/" class="">主题应用 Pro</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E4%B8%8D%E5%A4%AA%E9%87%8D%E8%A6%81/%E5%A4%8D%E5%88%B6%E4%BB%AA%E8%A1%A8%E7%9B%98/" class="">复制仪表盘</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-54fee82a365f217fe67a17292f7959e5" class="toggle" />
|
||
<label for="section-54fee82a365f217fe67a17292f7959e5" class="flex justify-between">
|
||
<a role="button" class="">2.数据集说明</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2/" class="">数据集开发界面</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/SQL%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">Sql数据集</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E6%95%B0%E6%8D%AE%E5%88%B7%E6%96%B0/" class="">数据集数据刷新</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-17dce050c02e560c36fb8bcb52fc8432" class="toggle" />
|
||
<label for="section-17dce050c02e560c36fb8bcb52fc8432" class="flex justify-between">
|
||
<a role="button" class="">特殊数据源</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/API%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">Api数据集</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/%E4%BD%BF%E7%94%A8EXCEL%E6%95%B0%E6%8D%AE/" class="">使用 Excel数据</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/Python%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">Python数据集</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">自定义数据源</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/webSocket%E6%96%B9%E5%BC%8F/" class="">Web Socket方式</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/Elasticsearch%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Elasticsearch数据源</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/JDBC%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Jdbc数据源</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/kafka%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Kafka数据源</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/mongodb%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Mongodb数据源</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/promitheus%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Promitheus数据源</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/Redis%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Redis数据源</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/sqlalchemy%E8%BF%9E%E6%8E%A5/" class="">Sqlalchemy连接</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-b696a5333fb0b6aa0ada2335e5fe864c" class="toggle" />
|
||
<label for="section-b696a5333fb0b6aa0ada2335e5fe864c" class="flex justify-between">
|
||
<a role="button" class="">数据集形态</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E5%BD%A2%E6%80%81/%E5%85%B1%E4%BA%AB%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">共享数据集</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E5%BD%A2%E6%80%81/%E6%95%B0%E6%8D%AE%E9%9B%86%E6%87%92%E5%8A%A0%E8%BD%BD/" class="">数据集懒加载</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-c5a4ac1635ece2dfef28e23678ea9e21" class="toggle" />
|
||
<label for="section-c5a4ac1635ece2dfef28e23678ea9e21" class="flex justify-between">
|
||
<a role="button" class="">3.图形开发</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E5%9F%BA%E7%A1%80%E5%9B%BE%E5%BD%A2/" class="">基础图形</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%AE%A1%E7%90%86%E5%9B%BE%E5%BD%A2/" class="">管理图形</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/Echarts%E7%BB%84%E4%BB%B6/" class="">Echarts组件</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/HTML%E7%BB%84%E4%BB%B6/" class="">Html组件</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E8%B0%83%E8%AF%95%E6%97%A5%E5%BF%97/" class="">调试日志</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-8b7ef748294c9611ad2ef758768793c4" class="toggle" />
|
||
<label for="section-8b7ef748294c9611ad2ef758768793c4" class="flex justify-between">
|
||
<a role="button" class="">函数方法</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E5%87%BD%E6%95%B0%E6%96%B9%E6%B3%95/%E5%9B%BE%E5%BD%A2%E7%AB%AF%E6%95%B0%E6%8D%AE%E5%87%BD%E6%95%B0/" class="">图形端数据函数</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E5%87%BD%E6%95%B0%E6%96%B9%E6%B3%95/Jquery%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95/" class="">Jquery遍历方法</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-4e8eda9dcb8eb0bfa033731d4401df15" class="toggle" />
|
||
<label for="section-4e8eda9dcb8eb0bfa033731d4401df15" class="flex justify-between">
|
||
<a role="button" class="">特殊图形</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/LineUp%E5%9B%BE%E5%BD%A2/" class="">Line Up图形</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E4%BD%BF%E7%94%A8%E5%9B%BE%E6%A0%87/" class="">使用图标</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E6%97%A0%E7%BC%9D%E6%BB%9A%E5%8A%A8/" class="">无缝滚动</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2%E5%8A%A0%E8%BD%BD/" class="">特殊图形加载</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-30aee618b2f055fbebe03b9acabc9330" class="toggle" />
|
||
<label for="section-30aee618b2f055fbebe03b9acabc9330" class="flex justify-between">
|
||
<a role="button" class="">Element Ui组件</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/ElementUI%E7%BB%84%E4%BB%B6/%E5%B8%A6%E5%88%86%E9%A1%B5%E7%9A%84%E8%A1%A8%E6%A0%BC/" class="">带分页的表格</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-478b5d3161d3129d62529b01d6fb834c" class="toggle" />
|
||
<label for="section-478b5d3161d3129d62529b01d6fb834c" class="flex justify-between">
|
||
<a role="button" class="">4.布局说明</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E5%B8%83%E5%B1%80%E6%8C%87%E5%BC%95/" class="">布局指引</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%8B%96%E6%8B%BD%E8%87%AA%E5%8A%A8%E5%AF%B9%E9%BD%90/" class="">拖拽自动对齐</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E5%88%A0%E9%99%A4%E5%AE%B9%E5%99%A8/" class="">删除容器</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-86bbf1d771d855758065f951675b7ee7" class="toggle" />
|
||
<label for="section-86bbf1d771d855758065f951675b7ee7" class="flex justify-between">
|
||
<a role="button" class="">5.参数及联动钻取</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E5%8F%82%E6%95%B0%E7%BC%96%E5%86%99%E6%96%B9%E6%B3%95/" class="">参数编写方法</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E5%9B%BE%E5%BD%A2%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/" class="">图形联动钻取</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E7%AD%9B%E9%80%89%E5%99%A8%E6%8C%87%E5%8D%97/" class="">筛选器指南</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E7%BB%84%E4%BB%B6%E8%87%AA%E5%AE%9A%E4%B9%89%E8%81%94%E5%8A%A8/" class="">组件自定义联动</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-1a4301e6dac08bd3bdb48c3500ec971d" class="toggle" checked />
|
||
<label for="section-1a4301e6dac08bd3bdb48c3500ec971d" class="flex justify-between">
|
||
<a role="button" class="">6.进阶开发 Pro</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-3b9f1904c5bd48ec9e224dbf4f4a7d54" class="toggle" checked />
|
||
<label for="section-3b9f1904c5bd48ec9e224dbf4f4a7d54" class="flex justify-between">
|
||
<a role="button" class="">低代码开发</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2/" class="">模板开发界面</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E5%BF%AB%E6%8D%B7%E5%BC%80%E5%8F%91/" class="">快捷开发</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E4%B8%8A%E4%BC%A0%E8%B5%84%E6%BA%90%E6%96%87%E4%BB%B6/" class="">上传资源文件</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E8%BE%B9%E6%A1%86%E4%B8%8E%E8%A3%85%E9%A5%B0/" class="">边框与装饰</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E6%A0%B7%E5%BC%8F%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B/" class="active">样式快速上手</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/IDE%E5%BC%80%E5%8F%91%E6%A8%A1%E5%BC%8F/" class="">ID E开发模式</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C/" class="">动画效果</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E7%BC%96%E8%BE%91%E5%99%A8%E5%BF%AB%E6%8D%B7%E9%94%AE/" class="">编辑器快捷键</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-2b5b070b11b526d911f2143b53347842" class="toggle" />
|
||
<label for="section-2b5b070b11b526d911f2143b53347842" class="flex justify-between">
|
||
<a role="button" class="">数据服务</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1API/" class="">数据服务 API</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E4%B8%8B%E8%BD%BD/" class="">数据下载</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E5%A1%AB%E6%8A%A5/" class="">数据填报</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E5%90%8E%E5%8F%B0API%E5%88%B7%E6%96%B0/" class="">后台 Api刷新</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E5%AE%9E%E6%88%98%E5%A4%A7%E5%B1%8F%E6%A8%A1%E6%9D%BF%E8%BD%AC%E5%8C%96/" class="">实战大屏模板转化</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E5%A4%87%E4%BB%BD%E6%81%A2%E5%A4%8D%E5%8F%8A%E7%89%88%E6%9C%AC/" class="">备份恢复及版本</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A6%96%E9%A1%B5/" class="">自定义首页</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-bfe0709421fcc9cc6742d70724a0841d" class="toggle" />
|
||
<label for="section-bfe0709421fcc9cc6742d70724a0841d" class="flex justify-between">
|
||
<a role="button" class="">7.报表嵌入</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/7.%E6%8A%A5%E8%A1%A8%E5%B5%8C%E5%85%A5/%E7%AE%80%E5%8D%95%E5%B5%8C%E5%85%A5/" class="">简单嵌入</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/7.%E6%8A%A5%E8%A1%A8%E5%B5%8C%E5%85%A5/%E5%8D%95%E7%82%B9%E7%99%BB%E5%BD%95/" class="">单点登录</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/7.%E6%8A%A5%E8%A1%A8%E5%B5%8C%E5%85%A5/%E5%8D%95%E9%A1%B5%E9%9D%A2%E5%B5%8C%E5%85%A5/" class="">单页面嵌入</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-50ddcd837bca405840b973f89ee4c795" class="toggle" />
|
||
<label for="section-50ddcd837bca405840b973f89ee4c795" class="flex justify-between">
|
||
<a role="button" class="">8. Django应用</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/8.Django%E5%BA%94%E7%94%A8/%E5%B5%8C%E5%85%A5Django-Apps/" class="">嵌入 Django Apps</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/8.Django%E5%BA%94%E7%94%A8/FAQ/" class="">Faq</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-b7c8fb0b06f0332d83d8a5dbf7287f20" class="toggle" />
|
||
<label for="section-b7c8fb0b06f0332d83d8a5dbf7287f20" class="flex justify-between">
|
||
<a role="button" class="">9. Jupyter应用</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/9.Jupyter%E5%BA%94%E7%94%A8/Jupyter%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95/" class="">Jupyter中使用指引</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-3f5ca2fcf9ff7a0e49dc6f9a1c867e71" class="toggle" />
|
||
<label for="section-3f5ca2fcf9ff7a0e49dc6f9a1c867e71" class="flex justify-between">
|
||
<a role="button" class="">10.其它</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/10.%E5%85%B6%E5%AE%83/FAQ/" class="">Faq</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/10.%E5%85%B6%E5%AE%83/%E8%AF%95%E7%94%A8%E6%BF%80%E6%B4%BB%E8%AF%B4%E6%98%8E/" class="">试用激活说明</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-1221ac066d992a43b363728eac9711d8" class="toggle" />
|
||
<label for="section-1221ac066d992a43b363728eac9711d8" class="flex justify-between">
|
||
<a role="button" class="">11.部署指南</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-df28c15db9b442124658f06e614fc60b" class="toggle" />
|
||
<label for="section-df28c15db9b442124658f06e614fc60b" class="flex justify-between">
|
||
<a role="button" class="">Linux</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Linux/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B/" class="">快速开始</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Linux/SQLite3%E7%89%88%E6%9C%AC%E9%94%99%E8%AF%AF/" class="">Sqlite3版本错误</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Linux/%E7%94%9F%E4%BA%A7%E9%83%A8%E7%BD%B2/" class="">生产部署</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="https://www.smartchart.cn/" target="_blank" rel="noopener">
|
||
官网
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="https://gitee.com/smartchart/smartchart" target="_blank" rel="noopener">
|
||
Gitee
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</nav>
|
||
|
||
|
||
|
||
|
||
<script>(function(){var e=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(){localStorage.setItem("menu.scrollTop",e.scrollTop)}),e.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>
|
||
|
||
|
||
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="book-page">
|
||
<header class="book-header">
|
||
|
||
<div class="flex align-center justify-between">
|
||
<label for="menu-control">
|
||
<img src="/svg/menu.svg" class="book-icon" alt="Menu" />
|
||
</label>
|
||
|
||
<strong>样式快速上手</strong>
|
||
|
||
<label for="toc-control">
|
||
|
||
<img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
|
||
|
||
</label>
|
||
</div>
|
||
|
||
|
||
|
||
<aside class="hidden clearfix">
|
||
|
||
|
||
<nav id="TableOfContents">
|
||
<ul>
|
||
<li>
|
||
<ul>
|
||
<li><a href="#样式操作">样式操作:</a></li>
|
||
<li><a href="#基础样式入门">基础样式入门:</a>
|
||
<ul>
|
||
<li><a href="#css介绍">CSS介绍</a></li>
|
||
<li><a href="#css语法">CSS语法</a></li>
|
||
<li><a href="#css选择器">CSS选择器</a></li>
|
||
<li><a href="#选择器的优先级">选择器的优先级</a></li>
|
||
<li><a href="#css属性相关">CSS属性相关</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
|
||
|
||
</aside>
|
||
|
||
|
||
</header>
|
||
|
||
|
||
|
||
<article class="markdown"><h2 id="样式操作">
|
||
样式操作:
|
||
<a class="anchor" href="#%e6%a0%b7%e5%bc%8f%e6%93%8d%e4%bd%9c">#</a>
|
||
</h2>
|
||
<p>要想大屏做得好, 样式要写得好
|
||
可是我们不是前端的同学也能写样式么
|
||
当然可以, 相信你观看完以下视屏即可</p>
|
||
<p>
|
||
<a href="https://www.bilibili.com/video/BV1KR4y1u741/">快速上手样式开发</a></p>
|
||
<h2 id="基础样式入门">
|
||
基础样式入门:
|
||
<a class="anchor" href="#%e5%9f%ba%e7%a1%80%e6%a0%b7%e5%bc%8f%e5%85%a5%e9%97%a8">#</a>
|
||
</h2>
|
||
<h3 id="css介绍">
|
||
CSS介绍
|
||
<a class="anchor" href="#css%e4%bb%8b%e7%bb%8d">#</a>
|
||
</h3>
|
||
<p>CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
|
||
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。</p>
|
||
<h3 id="css语法">
|
||
CSS语法
|
||
<a class="anchor" href="#css%e8%af%ad%e6%b3%95">#</a>
|
||
</h3>
|
||
<p>CSS实例
|
||
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
|
||
|
||
<img referrerpolicy="no-referrer" src="https://images.gitee.com/uploads/images/2022/0329/163537_298c1890_5500438.png" alt="输入图片说明" title="屏幕截图.png"/>
|
||
CSS注释</p>
|
||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#75715e">/*这是注释*/</span>
|
||
</span></span></code></pre></div><p>注释是代码之母, smartchart编辑中你可以使用CTRL+/快捷注释</p>
|
||
<p>CSS的几种引入方式
|
||
行内样式
|
||
行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。</p>
|
||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#f92672">p</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"color: red"</span>>Hello world.</<span style="color:#f92672">p</span>>
|
||
</span></span></code></pre></div><p>内部样式
|
||
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：</p>
|
||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#f92672">head</span>>
|
||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">style</span>>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#f92672">p</span>{
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-color</span>: <span style="color:#ae81ff">#2b99ff</span>;
|
||
</span></span><span style="display:flex;"><span> }
|
||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">style</span>>
|
||
</span></span><span style="display:flex;"><span></<span style="color:#f92672">head</span>>
|
||
</span></span></code></pre></div><p>外部样式
|
||
外部样式就是将css写在一个单独的文件中</p>
|
||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#f92672">link</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"mystyle.css"</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">"stylesheet"</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">"text/css"</span>/>
|
||
</span></span></code></pre></div><h3 id="css选择器">
|
||
CSS选择器
|
||
<a class="anchor" href="#css%e9%80%89%e6%8b%a9%e5%99%a8">#</a>
|
||
</h3>
|
||
<p>基本选择器</p>
|
||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#75715e">/*元素选择器*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">p</span> {<span style="color:#66d9ef">color</span>: <span style="color:#e6db74">"red"</span>;}
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*ID选择器*/</span>
|
||
</span></span><span style="display:flex;"><span>#i1 {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-color</span>: <span style="color:#66d9ef">red</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*类选择器*/</span>
|
||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">c1</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-size</span>: <span style="color:#ae81ff">14</span><span style="color:#66d9ef">px</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">p</span> .<span style="color:#a6e22e">c1</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#66d9ef">red</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span></code></pre></div><p>注意：
|
||
样式类名不要用数字开头（有的浏览器不认）。
|
||
标签中的class属性如果有多个，要用空格分隔。</p>
|
||
<p>通用选择器</p>
|
||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#f92672">*</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#66d9ef">white</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span></code></pre></div><p>组合选择器</p>
|
||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#75715e">/*后代选择器*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*li内部的a标签设置字体颜色*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">li</span> <span style="color:#f92672">a</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#66d9ef">green</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*儿子选择器*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*选择所有父级是 <div> 元素的 <p> 元素*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">div</span><span style="color:#f92672">></span><span style="color:#f92672">p</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#e6db74">"Arial Black"</span>, arial-black, <span style="color:#66d9ef">cursive</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*毗邻选择器*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*选择所有紧接着<div>元素之后的<p>元素*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">div</span><span style="color:#f92672">+</span><span style="color:#f92672">p</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*弟弟选择器*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*i1后面所有的兄弟p标签*/</span>
|
||
</span></span><span style="display:flex;"><span>#i1<span style="color:#f92672">~</span><span style="color:#f92672">p</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border</span>: <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span> <span style="color:#66d9ef">solid</span> <span style="color:#66d9ef">royalblue</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*属性选择器*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*用于选取带有指定属性的元素。*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">p</span><span style="color:#f92672">[</span><span style="color:#f92672">title</span><span style="color:#f92672">]</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#66d9ef">red</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*用于选取带有指定属性和值的元素。*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">p</span><span style="color:#f92672">[</span><span style="color:#f92672">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">"213"</span><span style="color:#f92672">]</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#66d9ef">green</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*找到所有title属性以hello开头的元素*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">[</span><span style="color:#f92672">title</span><span style="color:#f92672">^=</span><span style="color:#e6db74">"hello"</span><span style="color:#f92672">]</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#66d9ef">red</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*找到所有title属性以hello结尾的元素*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">[</span><span style="color:#f92672">title</span><span style="color:#f92672">$=</span><span style="color:#e6db74">"hello"</span><span style="color:#f92672">]</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#66d9ef">yellow</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*找到所有title属性中包含（字符串包含）hello的元素*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">[</span><span style="color:#f92672">title</span><span style="color:#f92672">*=</span><span style="color:#e6db74">"hello"</span><span style="color:#f92672">]</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#66d9ef">red</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">[</span><span style="color:#f92672">title</span><span style="color:#f92672">~=</span><span style="color:#e6db74">"hello"</span><span style="color:#f92672">]</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#66d9ef">green</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span></code></pre></div><p>分组和嵌套</p>
|
||
<pre tabindex="0"><code>分组
|
||
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
|
||
例如：
|
||
div, p {
|
||
color: red;
|
||
}
|
||
上面的代码为div标签和p标签统一设置字体为红色。
|
||
|
||
嵌套
|
||
多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。
|
||
.c1 p {
|
||
color: red;
|
||
}
|
||
</code></pre><p>伪类选择器</p>
|
||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#75715e">/* 未访问的链接 */</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">a</span>:<span style="color:#a6e22e">link</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#ae81ff">#FF0000</span>
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/* 鼠标移动到链接上 */</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">a</span>:<span style="color:#a6e22e">hover</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#ae81ff">#FF00FF</span>
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/* 选定的链接 */</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">a</span>:<span style="color:#a6e22e">active</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#ae81ff">#0000FF</span>
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/* 已访问的链接 */</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">a</span>:<span style="color:#a6e22e">visited</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#ae81ff">#00FF00</span>
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*input输入框获取焦点时样式*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">input</span>:<span style="color:#a6e22e">focus</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">outline</span>: <span style="color:#66d9ef">none</span>;
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-color</span>: <span style="color:#ae81ff">#eee</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span></code></pre></div><p>伪元素选择器</p>
|
||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#75715e">/*first-letter*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*常用的给首字母设置特殊样式：*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">p</span>:<span style="color:#a6e22e">first-letter</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-size</span>: <span style="color:#ae81ff">48</span><span style="color:#66d9ef">px</span>;
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#66d9ef">red</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">before</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*在每个<p>元素之前插入内容*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">p</span>:<span style="color:#a6e22e">before</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">content</span>:<span style="color:#e6db74">"*"</span>;
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>:<span style="color:#66d9ef">red</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">after</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*在每个<p>元素之后插入内容*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*before和after多用于清除浮动。*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">p</span>:<span style="color:#a6e22e">after</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">content</span>:<span style="color:#e6db74">"[?]"</span>;
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>:<span style="color:#66d9ef">blue</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span></code></pre></div><h3 id="选择器的优先级">
|
||
选择器的优先级
|
||
<a class="anchor" href="#%e9%80%89%e6%8b%a9%e5%99%a8%e7%9a%84%e4%bc%98%e5%85%88%e7%ba%a7">#</a>
|
||
</h3>
|
||
<pre tabindex="0"><code>CSS继承
|
||
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。
|
||
body {
|
||
color: red;
|
||
}
|
||
此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
|
||
我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。
|
||
p {
|
||
color: green;
|
||
}
|
||
</code></pre><p>选择器的优先级
|
||
我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？
|
||
其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：
|
||
|
||
<img referrerpolicy="no-referrer" src="https://images.gitee.com/uploads/images/2022/0329/164541_b51f067f_5500438.png" alt="" title="屏幕截图.png"/>
|
||
除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。
|
||
因为如果过多的使用!important会使样式文件混乱不易维护。
|
||
万不得已可以使用!important</p>
|
||
<h3 id="css属性相关">
|
||
CSS属性相关
|
||
<a class="anchor" href="#css%e5%b1%9e%e6%80%a7%e7%9b%b8%e5%85%b3">#</a>
|
||
</h3>
|
||
<p>宽和高</p>
|
||
<pre tabindex="0"><code>width属性可以为元素设置宽度。
|
||
height属性可以为元素设置高度。
|
||
块级标签才能设置宽度，内联标签的宽度由内容来决定。
|
||
</code></pre><p>字体属性</p>
|
||
<pre tabindex="0"><code>文字字体
|
||
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
|
||
简单实例：
|
||
body {
|
||
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
|
||
}
|
||
字体大小
|
||
p {
|
||
font-size: 14px;
|
||
}
|
||
如果设置成inherit表示继承父元素的字体大小值。
|
||
|
||
字重（粗细）
|
||
font-weight用来设置字体的字重（粗细）。
|
||
值描述normal默认值，标准粗细bold粗体bolder更粗lighter更细100~900设置具体粗细，400等同于normal，而700等同于boldinherit继承父元素字体的粗细值
|
||
|
||
文本颜色
|
||
color
|
||
颜色是通过CSS最经常的指定：
|
||
十六进制值 - 如: ＃FF0000
|
||
一个RGB值 - 如: RGB(255,0,0)
|
||
颜色的名称 - 如: red
|
||
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
|
||
</code></pre><p>文字属性</p>
|
||
<pre tabindex="0"><code>文字对齐
|
||
text-align 属性规定元素中的文本的水平对齐方式。
|
||
值描述left左边对齐 默认值right右对齐center居中对齐justify两端对齐
|
||
|
||
文字装饰
|
||
text-decoration 属性用来给文字添加特殊效果。
|
||
值描述none默认。定义标准的文本。underline定义文本下的一条线。overline定义文本上的一条线。line-through定义穿过文本下的一条线。inherit继承父元素的text-decoration属性的值。
|
||
|
||
常用的为去掉a标签默认的自划线：
|
||
a {
|
||
text-decoration: none;
|
||
}
|
||
首行缩进
|
||
将段落的第一行缩进 32像素：
|
||
p {
|
||
text-indent: 32px;
|
||
}
|
||
</code></pre><p>背景属性</p>
|
||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#75715e">/*背景颜色*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">background-color</span><span style="color:#f92672">:</span> <span style="color:#f92672">red</span><span style="color:#f92672">;</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*背景图片*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">background-image</span><span style="color:#f92672">:</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">'1.jpg'</span><span style="color:#f92672">);</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*
|
||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"> 背景重复
|
||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"> repeat(默认):背景图片平铺排满整个网页
|
||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"> repeat-x：背景图片只在水平方向上平铺
|
||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"> repeat-y：背景图片只在垂直方向上平铺
|
||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"> no-repeat：背景图片不平铺
|
||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">background-repeat</span><span style="color:#f92672">:</span> <span style="color:#f92672">no-repeat</span><span style="color:#f92672">;</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*背景位置*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">background-position</span><span style="color:#f92672">:</span> <span style="color:#f92672">left</span> <span style="color:#f92672">top</span><span style="color:#f92672">;</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*background-position: 200px 200px;*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">支持简写</span><span style="color:#960050;background-color:#1e0010">：</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">background</span><span style="color:#f92672">:</span>#336699 <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">'1.png'</span><span style="color:#f92672">)</span> <span style="color:#f92672">no-repeat</span> <span style="color:#f92672">left</span> <span style="color:#f92672">top</span><span style="color:#f92672">;</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上</span><span style="color:#960050;background-color:#1e0010">，</span><span style="color:#f92672">然后根据位置去显示图片</span><span style="color:#960050;background-color:#1e0010">。</span><span style="color:#f92672">减少频繁的图片请求</span><span style="color:#960050;background-color:#1e0010">。</span>
|
||
</span></span></code></pre></div><p>边框</p>
|
||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#75715e">/*边框属性*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">border-width</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">border-style</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">border-color</span>
|
||
</span></span><span style="display:flex;"><span>#i1 {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-width</span>: <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span>;
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-style</span>: <span style="color:#66d9ef">solid</span>;
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-color</span>: <span style="color:#66d9ef">red</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*通常使用简写方式：*/</span>
|
||
</span></span><span style="display:flex;"><span>#i1 {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border</span>: <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span> <span style="color:#66d9ef">solid</span> <span style="color:#66d9ef">red</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*边框样式 值描述none无边框。dotted点状虚线边框。dashed矩形虚线边框。solid实线边框。*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：*/</span>
|
||
</span></span><span style="display:flex;"><span>#i1 {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-top-style</span>:<span style="color:#66d9ef">dotted</span>;
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-top-color</span>: <span style="color:#66d9ef">red</span>;
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-right-style</span>:<span style="color:#66d9ef">solid</span>;
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-bottom-style</span>:<span style="color:#66d9ef">dotted</span>;
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-left-style</span>:<span style="color:#66d9ef">none</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*border-radius属性能实现圆角边框的效果。*/</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*将border-radius设置为长或高的一半即可得到一个圆形。*/</span>
|
||
</span></span></code></pre></div><p>display属性</p>
|
||
<pre tabindex="0"><code>用于控制HTML元素的显示效果。
|
||
值意义display:"none"HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。display:"block"默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。display:"inline"按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。display:"inline-block"使元素同时具有行内元素和块级元素的特点。
|
||
display:"none"与visibility:hidden的区别：
|
||
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
|
||
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
|
||
</code></pre><p>CSS盒子模型</p>
|
||
<pre tabindex="0"><code>margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
|
||
padding: 用于控制内容与边框之间的距离；
|
||
Border(边框): 围绕在内边距和内容外的边框。
|
||
Content(内容): 盒子的内容，显示文本和图像。
|
||
</code></pre><p>
|
||
<img referrerpolicy="no-referrer" src="https://images.gitee.com/uploads/images/2022/0329/164748_7448d386_5500438.png" alt="输入图片说明" title="屏幕截图.png"/></p>
|
||
<pre tabindex="0"><code>margin外边距
|
||
.margin-test {
|
||
margin-top:5px;
|
||
margin-right:10px;
|
||
margin-bottom:15px;
|
||
margin-left:20px;
|
||
}
|
||
推荐使用简写：
|
||
.margin-test {
|
||
margin: 5px 10px 15px 20px;
|
||
}
|
||
顺序：上右下左
|
||
|
||
常见居中：
|
||
.mycenter {
|
||
margin: 0 auto;
|
||
}
|
||
padding内填充
|
||
.padding-test {
|
||
padding-top: 5px;
|
||
padding-right: 10px;
|
||
padding-bottom: 15px;
|
||
padding-left: 20px;
|
||
}
|
||
推荐使用简写：
|
||
.padding-test {
|
||
padding: 5px 10px 15px 20px;
|
||
}
|
||
顺序：上右下左
|
||
|
||
补充padding的常用简写方式：
|
||
提供一个，用于四边；
|
||
提供两个，第一个用于上－下，第二个用于左－右；
|
||
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
|
||
提供四个参数值，将按上－右－下－左的顺序作用于四边；
|
||
</code></pre><p>float</p>
|
||
<pre tabindex="0"><code>在 CSS 中，任何元素都可以浮动。
|
||
浮动元素会生成一个块级框，而不论它本身是何种元素。
|
||
关于浮动的两个特点：
|
||
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
|
||
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
|
||
三种取值
|
||
left：向左浮动
|
||
right：向右浮动
|
||
none：默认值，不浮动
|
||
</code></pre><p>overflow溢出属性</p>
|
||
<pre tabindex="0"><code>值描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。
|
||
overflow（水平和垂直均设置）
|
||
overflow-x（设置水平方向）
|
||
overflow-y（设置垂直方向）
|
||
</code></pre><p>定位（position）</p>
|
||
<pre tabindex="0"><code>static
|
||
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
|
||
relative（相对定位）
|
||
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
|
||
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
|
||
absolute（绝对定位）
|
||
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
|
||
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
|
||
另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
|
||
fixed（固定）
|
||
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
|
||
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
|
||
</code></pre><p>z-index</p>
|
||
<pre tabindex="0"><code>#i2 {
|
||
z-index: 999;
|
||
}
|
||
设置对象的层叠顺序。
|
||
z-index 值表示谁压着谁，数值大的压盖住数值小的，
|
||
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
|
||
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
|
||
从父现象：父亲怂了，儿子再牛逼也没用
|
||
</code></pre><p>opacity
|
||
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。</p>
|
||
</article>
|
||
|
||
|
||
|
||
<footer class="book-footer">
|
||
|
||
<div class="flex flex-wrap justify-between">
|
||
|
||
|
||
|
||
|
||
<div>
|
||
<a class="flex align-center" href="https://gitee.com/smartchart/smartchart/docs/content/docs/6.%e8%bf%9b%e9%98%b6%e5%bc%80%e5%8f%91PRO/%e4%bd%8e%e4%bb%a3%e7%a0%81%e5%bc%80%e5%8f%91/%e6%a0%b7%e5%bc%8f%e5%bf%ab%e9%80%9f%e4%b8%8a%e6%89%8b.md" target="_blank" rel="noopener">
|
||
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
|
||
<span>Edit this page</span>
|
||
</a>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<script>(function(){function e(e){const t=window.getSelection(),n=document.createRange();n.selectNodeContents(e),t.removeAllRanges(),t.addRange(n)}document.querySelectorAll("pre code").forEach(t=>{t.addEventListener("click",function(){if(window.getSelection().toString())return;e(t.parentElement),navigator.clipboard&&navigator.clipboard.writeText(t.parentElement.textContent)})})})()</script>
|
||
|
||
|
||
|
||
|
||
</footer>
|
||
|
||
|
||
|
||
<div class="book-comments">
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<label for="menu-control" class="hidden book-menu-overlay"></label>
|
||
</div>
|
||
|
||
|
||
<aside class="book-toc">
|
||
<div class="book-toc-content">
|
||
|
||
|
||
<nav id="TableOfContents">
|
||
<ul>
|
||
<li>
|
||
<ul>
|
||
<li><a href="#样式操作">样式操作:</a></li>
|
||
<li><a href="#基础样式入门">基础样式入门:</a>
|
||
<ul>
|
||
<li><a href="#css介绍">CSS介绍</a></li>
|
||
<li><a href="#css语法">CSS语法</a></li>
|
||
<li><a href="#css选择器">CSS选择器</a></li>
|
||
<li><a href="#选择器的优先级">选择器的优先级</a></li>
|
||
<li><a href="#css属性相关">CSS属性相关</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
|
||
|
||
</div>
|
||
</aside>
|
||
|
||
</main>
|
||
|
||
|
||
</body>
|
||
</html>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|