补充调整一些展示的样式

docs/assets/css/extra.css

@@ -42,23 +42,18 @@
     content: "文档更新";
 }
 
-/*图片格式设置*/
-/*默认样式 会修改所有的表情包*/
-/* img:not(.md-header__button.md-logo img) {
-    box-shadow: 2px 2px 10px #666;
-    border-radius: 4px;
-    width: 80%;
-    height: 80%;
-    display: block;
-    margin: 10px auto;
-
-} */
-
-/*样式 1 同默认样式*/
-/* img[src*="pic1"] {
-    box-shadow: 4px 4px 15px #666;
+/* 图片的样式 */
+img {
     border-radius: 10px;
-} */
+    position: relative;
+    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
+}
+
+img:hover {
+    filter: brightness(1.15) saturate(1.1) 
+    drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.2));
+    transform: scale(1.03);
+}
 
 /* beat like a heart */
 @keyframes heart {
@@ -133,12 +128,13 @@ span.hll {
     overflow-y: hidden;
 }
 
+/* 各个标题样式 */
 h1 {
     text-align: center;
 }
 
 h2 {
-    color: #deb887;
+    color: #f8bc31;
     text-align: center;
 }
 
@@ -207,22 +203,20 @@ md-footer__inner md-grid {
 }
 
 .navigation {
-    text-align: center;
     font-size: 23px;
 }
 
 .navigation:hover {
     text-decoration: underline;
 }
 
-/*花哨首页的css*/
-/*.special-effects:hover span {*/
-/*    text-decoration: underline;*/
-/*}*/
-
-/*.special-effects:hover img {*/
-/*    !* box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); *!*/
-/*    filter: brightness(1.2);*/
-/*    transform: scale(1.05);*/
-/*    transition: transform 0.3s ease;*/
-/*}*/
+/* 引用的设置 */
+blockquote {
+    padding: 10px 0px 10px 15px;
+    background-color: rgba(66, 185, 131, 0.1);
+    position: relative;
+    /* 右上角圆角 */
+    border-top-right-radius: 5px;
+    /* 右下角圆角 */
+    border-bottom-right-radius: 5px;
+}

docs/开始阅读/网站所有样式/demo.md

@@ -32,10 +32,23 @@ status: new
 
 <span style="text-decoration: underline wavy;">这里是下划波浪线文本</span>
 
+<span style="border-bottom: 2px dashed;">这是带有虚线下划线的文本。1</span><br>
+<span style="border-bottom: 2px dotted;">这是带有虚线下划线的文本。2</span><br>
+<span style="border-bottom: 4px double;">这是带有虚线下划线的文本。3</span><br>
+
 [这是本站的超链接](https://971230.github.io/)
 
 [鼠标放上来](https://example.com "就会有提示，还可以点击")
 
+- ==This was marked (highlight)==
+- ^^This was inserted (underline)^^
+- ~~This was deleted (strikethrough)~~
+
+- H~2~O
+- A^T^A
+
+++ctrl+alt+del++
+
 ------
 
 > 这是一段引用
@@ -60,14 +73,20 @@ status: new
 
 ![图片的样式](./img/pic_demo.jpg)
 
+<!-- 想让这个图片变成它原来的样子，就设置width:auto -->
+<figure markdown="span">
+  ![Image title](./img/pic_demo.jpg){ width="300" }
+  <figcaption>图片标题</figcaption>
+</figure>
+
 这是一个带有脚注的句子[^1]。
 [^1]: 这是一段脚注-不是很会使用脚注
 
 [链接引用]: 971230.github.com	"链接引用的标题"
 
 ------
 
-###水平分割线就是使用五个-符号就行了 ------
+水平分割线就是使用五个-符号就行了 ------
 
 ------
 
@@ -90,9 +109,33 @@ status: new
 
 -----
 
+`Lorem ipsum dolor sit amet`
+
+:   Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus
+    tellus non sem sollicitudin, quis rutrum leo facilisis.
+
+`Cras arcu libero`
+
+:   Aliquam metus eros, pretium sed nulla venenatis, faucibus auctor ex. Proin
+    ut eros sed sapien ullamcorper consequat. Nunc ligula ante.
+
+    Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis.
+    Nam vulputate tincidunt fringilla.
+    Nullam dignissim ultrices urna non auctor.
+
+-----
+
 代码片段
-```java
-public class Hello {
+```java title="HelloWorld.java"
+public class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+
+```java title="HelloWorld.java" linenums="1" hl_lines="2 3 4"
+public class HelloWorld {
     public static void main(String[] args) {
         System.out.println("Hello, World!");
     }
@@ -117,6 +160,12 @@ public class demo {
 
 $$ e^{i\pi} + 1 = 0 $$
 
+傅里叶变换
+
+$$
+F(\omega) = \mathcal{F}\{f(t)\} = \int_{-\infty}^{\infty} f(t) e^{-i \omega t} \, dt
+$$
+
 
 内容目录
 
@@ -195,6 +244,9 @@ $$ e^{i\pi} + 1 = 0 $$
 !!! Abstract
     参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。
 
+!!! Abstract ""
+    参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。
+
 !!! Abstract "参天大树充满生命力"
     参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。