buyfakett/reference
1
0
Fork 0
mirror of https://github.com/jaywcjlove/reference.git synced 2025-06-19 05:31:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix show number line issue. 8586f8a212

Browse Source
This commit is contained in:
jaywcjlove
2022-10-31 01:46:31 +00:00
parent 986f8bd429
commit 53cf1c63da
66 changed files with 874 additions and 940 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
docs/css.html
View File

@ -1,6 +1,6 @@
<!doctype html><html lang="en" data-color-mode="dark"><head></head><body>
<!doctype html>
<html lang="en" data-color-mode="dark">
<head>
<meta charset="utf-8">
<title>CSS 备忘清单
&#x26; css cheatsheet &#x26; Quick Reference</title>
@ -9,8 +9,8 @@
<meta keywords="Quick,Reference,cheatsheet,css">
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
<link rel="stylesheet" href="../style/style.css">
<nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
</head>
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
@ -46,7 +46,7 @@
<!--rehype:wrap-class=row-span-3-->
<p>CSS 功能丰富，不仅仅是布局页面</p>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="外部样式表"><a aria-hidden="true" tabindex="-1" href="#外部样式表"><span class="icon icon-link"></span></a>外部样式表</h4><div class="wrap-body">
<pre class="wrap-text"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>link</span>
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>link</span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./path/to/stylesheet/style.css<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span>
@ -61,7 +61,7 @@
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>style</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="内联样式"><a aria-hidden="true" tabindex="-1" href="#内联样式"><span class="icon icon-link"></span></a>内联样式</h4><div class="wrap-body">
<pre class="wrap-text"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h2</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h2</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> 居中文本
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h2</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">18</span><span class="token unit">px</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
@ -1016,7 +1016,7 @@
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="align-content"><a aria-hidden="true" tabindex="-1" href="#align-content"><span class="icon icon-link"></span></a>align-content</h3><div class="wrap-body">
<pre class="wrap-text"><code class="language-css code-highlight"><span class="code-line"><span class="token property">align-content</span><span class="token punctuation">:</span> flex-start | flex-end | center | space-between | space-around | stretch<span class="token punctuation">;</span>
<pre class="wrap-text "><code class="language-css code-highlight"><span class="code-line"><span class="token property">align-content</span><span class="token punctuation">:</span> flex-start | flex-end | center | space-between | space-around | stretch<span class="token punctuation">;</span>
</span></code></pre>
<!--rehype:className=wrap-text -->
<hr>
@ -1199,7 +1199,7 @@
</span></code></pre>
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="minmax-函数"><a aria-hidden="true" tabindex="-1" href="#minmax-函数"><span class="icon icon-link"></span></a>minmax() 函数</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<pre class="wrap-text"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.grid</span></span> <span class="token punctuation">{</span>
<pre class="wrap-text "><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.grid</span></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">px</span> <span class="token function">minmax</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token unit">px</span><span class="token punctuation">)</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token punctuation">}</span>
@ -1329,7 +1329,7 @@
</span></code></pre>
<p>有助于在不同的浏览器之间强制样式一致性，并为样式元素提供干净的盒子</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="使用图像作为光标"><a aria-hidden="true" tabindex="-1" href="#使用图像作为光标"><span class="icon icon-link"></span></a>使用图像作为光标</h3><div class="wrap-body">
<pre class="wrap-text"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">div</span> <span class="token punctuation">{</span>
<pre class="wrap-text "><code class="language-css code-highlight"><span class="code-line"><span class="token selector">div</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">cursor</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'path-to-image.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'path-to-fallback-image.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">,</span> auto<span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token comment">/* 表情符号作为光标 */</span>
</span><span class="code-line"> <span class="token property">cursor</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"data:image/svg+xml;utf8,&#x3C;svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'>&#x3C;text y='50%'>🚀&#x3C;/text>&#x3C;/svg>"</span><span class="token punctuation">)</span></span><span class="token punctuation">,</span> auto<span class="token punctuation">;</span>
@ -1434,6 +1434,5 @@ anchor.forEach((item) => {
updateAnchor()
})
})
</script>
</body></html>
</script></body>
</html>