mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-18 21:21:21 +08:00
website: adjust the layout. f60826e6da
This commit is contained in:
jaywcjlove
@ -45,7 +45,7 @@
|
||||
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist row-span-3"><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">
|
||||
<!--rehype:wrap-class=row-span-3-->
|
||||
<p>CSS 功能丰富，不仅仅是布局页面</p>
|
||||
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><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">
|
||||
</div></div><div class="h3wrap-body"><h4 id="外部样式表"><a aria-hidden="true" tabindex="-1" href="#外部样式表"><span class="icon icon-link"></span></a>外部样式表</h4>
|
||||
<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"><</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>
|
||||
@ -53,14 +53,14 @@
|
||||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<!--rehype:className=wrap-text -->
|
||||
</div></div></div><div class="wrap h4body-not-exist"><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">
|
||||
<h4 id="内部样式表"><a aria-hidden="true" tabindex="-1" href="#内部样式表"><span class="icon icon-link"></span></a>内部样式表</h4>
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token selector">body</span> <span class="token punctuation">{</span>
|
||||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">linen</span><span class="token punctuation">;</span>
|
||||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token punctuation">}</span>
|
||||
</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"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap h4body-not-exist"><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">
|
||||
<h4 id="内联样式"><a aria-hidden="true" tabindex="-1" href="#内联样式"><span class="icon icon-link"></span></a>内联样式</h4>
|
||||
<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"><</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"></</span>h2</span><span class="token punctuation">></span></span>
|
||||
@ -69,7 +69,7 @@
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<!--rehype:className=wrap-text -->
|
||||
</div></div></div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="添加-class-类"><a aria-hidden="true" tabindex="-1" href="#添加-class-类"><span class="icon icon-link"></span></a>添加 class 类</h3><div class="wrap-body">
|
||||
</div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="添加-class-类"><a aria-hidden="true" tabindex="-1" href="#添加-class-类"><span class="icon icon-link"></span></a>添加 class 类</h3><div class="wrap-body">
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>classname<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>class1 ... classn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
@ -164,34 +164,34 @@
|
||||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="css-选择器"><a aria-hidden="true" tabindex="-1" href="#css-选择器"><span class="icon icon-link"></span></a>CSS 选择器</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist row-span-2"><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">
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><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">
|
||||
</div></div><div class="h3wrap-body"><h4 id="组选择器"><a aria-hidden="true" tabindex="-1" href="#组选择器"><span class="icon icon-link"></span></a>组选择器</h4>
|
||||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">h1<span class="token punctuation">,</span> h2</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap h4body-not-exist"><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">
|
||||
<h4 id="链选择器"><a aria-hidden="true" tabindex="-1" href="#链选择器"><span class="icon icon-link"></span></a>链选择器</h4>
|
||||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">h3<span class="token class">.section-heading</span></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap h4body-not-exist"><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">
|
||||
<h4 id="属性选择器"><a aria-hidden="true" tabindex="-1" href="#属性选择器"><span class="icon icon-link"></span></a>属性选择器</h4>
|
||||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">div<span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">attribute</span><span class="token operator">=</span><span class="token attr-value">"SomeValue"</span><span class="token punctuation">]</span></span></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap h4body-not-exist"><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">
|
||||
<h4 id="第一个子选择器"><a aria-hidden="true" tabindex="-1" href="#第一个子选择器"><span class="icon icon-link"></span></a>第一个子选择器</h4>
|
||||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">p<span class="token pseudo-class">:first-child</span></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap h4body-not-exist"><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">
|
||||
<h4 id="无子选择器"><a aria-hidden="true" tabindex="-1" href="#无子选择器"><span class="icon icon-link"></span></a>无子选择器</h4>
|
||||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.box</span><span class="token pseudo-class">:empty</span></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token color">lime</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">80</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">80</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="wrap h3body-not-exist"><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">
|
||||
</div></div><div class="wrap h3body-not-exist"><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">
|
||||
|
||||
|
||||
|
||||
@ -1173,12 +1173,12 @@
|
||||
<ul>
|
||||
<li>grid-row: grid-row-start / grid-row-end;</li>
|
||||
</ul>
|
||||
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><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">
|
||||
</div></div><div class="h3wrap-body"><h4 id="实例"><a aria-hidden="true" tabindex="-1" href="#实例"><span class="icon icon-link"></span></a>实例</h4>
|
||||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.item</span></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token property">grid-row</span><span class="token punctuation">:</span> <span class="token number">1</span> <span class="token operator">/</span> span <span class="token number">2</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="css-块级网格"><a aria-hidden="true" tabindex="-1" href="#css-块级网格"><span class="icon icon-link"></span></a>CSS 块级网格</h3><div class="wrap-body">
|
||||
</div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="css-块级网格"><a aria-hidden="true" tabindex="-1" href="#css-块级网格"><span class="icon icon-link"></span></a>CSS 块级网格</h3><div class="wrap-body">
|
||||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token id">#grid-container</span></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
@ -1212,11 +1212,11 @@
|
||||
<li>grid-row-start: auto|row-line;</li>
|
||||
<li>grid-row-end: auto|row-line|span n;</li>
|
||||
</ul>
|
||||
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="实例-1"><a aria-hidden="true" tabindex="-1" href="#实例-1"><span class="icon icon-link"></span></a>实例</h4><div class="wrap-body">
|
||||
</div></div><div class="h3wrap-body"><h4 id="实例-1"><a aria-hidden="true" tabindex="-1" href="#实例-1"><span class="icon icon-link"></span></a>实例</h4>
|
||||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token property">grid-row-start</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token property">grid-row-end</span><span class="token punctuation">:</span> span <span class="token number">2</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="wrap h3body-not-exist"><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">
|
||||
</div></div><div class="wrap h3body-not-exist"><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="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token id">#container</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">justify-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||||
|
||||
Reference in New Issue
Block a user