|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | + <meta charset="UTF-8"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | + <title>About Discrete Mathematics | Math Notes</title> |
| 7 | + <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Merriweather:wght@400;700&display=swap" rel="stylesheet"> |
| 8 | + <style> |
| 9 | + /* 基础重置 */ |
| 10 | + * { |
| 11 | + margin: 0; |
| 12 | + padding: 0; |
| 13 | + box-sizing: border-box; |
| 14 | + } |
| 15 | + |
| 16 | + body { |
| 17 | + background: linear-gradient(135deg, #f8f9ff 0%, #e6f0ff 100%); |
| 18 | + min-height: 100vh; |
| 19 | + font-family: 'Inter', sans-serif; |
| 20 | + color: #2c3e50; |
| 21 | + line-height: 1.8; |
| 22 | + padding: 2rem; |
| 23 | + } |
| 24 | + |
| 25 | + /* 内容容器 */ |
| 26 | + #write { |
| 27 | + max-width: 800px; |
| 28 | + margin: 0 auto; |
| 29 | + padding: 2rem; |
| 30 | + background: rgba(255, 255, 255, 0.95); |
| 31 | + border-radius: 16px; |
| 32 | + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); |
| 33 | + backdrop-filter: blur(8px); |
| 34 | + border: 1px solid rgba(255, 255, 255, 0.3); |
| 35 | + } |
| 36 | + |
| 37 | + /* 标题样式 */ |
| 38 | + h1, h2, h3 { |
| 39 | + font-family: 'Merriweather', serif; |
| 40 | + margin-top: 2rem; |
| 41 | + margin-bottom: 1.5rem; |
| 42 | + position: relative; |
| 43 | + padding-bottom: 0.5rem; |
| 44 | + } |
| 45 | + |
| 46 | + h1 { |
| 47 | + font-size: 2.5rem; |
| 48 | + color: #2c3e50; |
| 49 | + border-bottom: 2px solid #4a90e2; |
| 50 | + } |
| 51 | + |
| 52 | + h2 { |
| 53 | + font-size: 2rem; |
| 54 | + color: #34495e; |
| 55 | + border-bottom: 1px solid #dfe6e9; |
| 56 | + } |
| 57 | + |
| 58 | + h3 { |
| 59 | + font-size: 1.5rem; |
| 60 | + color: #4a5568; |
| 61 | + } |
| 62 | + |
| 63 | + /* 段落样式 */ |
| 64 | + p { |
| 65 | + margin: 1.2rem 0; |
| 66 | + font-size: 1.1rem; |
| 67 | + color: #4a5568; |
| 68 | + } |
| 69 | + |
| 70 | + /* 按钮样式 */ |
| 71 | + .Button { |
| 72 | + background: linear-gradient(135deg, #4a90e2 0%, #6c5ce7 100%); |
| 73 | + border: none; |
| 74 | + border-radius: 12px; |
| 75 | + color: white; |
| 76 | + padding: 15px 32px; |
| 77 | + text-align: center; |
| 78 | + text-decoration: none; |
| 79 | + display: inline-block; |
| 80 | + font-size: 16px; |
| 81 | + margin: 2rem 0; |
| 82 | + cursor: pointer; |
| 83 | + transition: all 0.3s ease; |
| 84 | + box-shadow: 0 4px 6px rgba(74, 144, 226, 0.2); |
| 85 | + } |
| 86 | + |
| 87 | + .Button:hover { |
| 88 | + transform: translateY(-2px); |
| 89 | + box-shadow: 0 7px 14px rgba(74, 144, 226, 0.3); |
| 90 | + } |
| 91 | + |
| 92 | + .Button:active { |
| 93 | + transform: translateY(0); |
| 94 | + box-shadow: 0 4px 6px rgba(74, 144, 226, 0.2); |
| 95 | + } |
| 96 | + |
| 97 | + /* 响应式设计 */ |
| 98 | + @media (max-width: 768px) { |
| 99 | + body { |
| 100 | + padding: 1rem; |
| 101 | + } |
| 102 | + |
| 103 | + #write { |
| 104 | + padding: 1.5rem; |
| 105 | + } |
| 106 | + |
| 107 | + h1 { |
| 108 | + font-size: 2rem; |
| 109 | + } |
| 110 | + |
| 111 | + h2 { |
| 112 | + font-size: 1.5rem; |
| 113 | + } |
| 114 | + |
| 115 | + h3 { |
| 116 | + font-size: 1.2rem; |
| 117 | + } |
| 118 | + |
| 119 | + p { |
| 120 | + font-size: 1rem; |
| 121 | + } |
| 122 | + } |
| 123 | + |
| 124 | + /* 动画效果 */ |
| 125 | + @keyframes fadeIn { |
| 126 | + from { |
| 127 | + opacity: 0; |
| 128 | + transform: translateY(20px); |
| 129 | + } |
| 130 | + to { |
| 131 | + opacity: 1; |
| 132 | + transform: translateY(0); |
| 133 | + } |
| 134 | + } |
| 135 | + |
| 136 | + #write { |
| 137 | + animation: fadeIn 0.8s ease-out; |
| 138 | + } |
| 139 | + </style> |
| 140 | +</head> |
| 141 | +<body> |
| 142 | + <div id="write"> |
| 143 | + <h1>1. About Discrete Mathematics</h1> |
| 144 | + |
| 145 | + <h2>What is discrete mathematics?</h2> |
| 146 | + <p>Discrete mathematics is a branch of mathematics that can solve various problems. These include set problems, tree problems, and graph problems. While these problems may seem very difficult, using discrete mathematics makes solving them relatively easy. This effectiveness in addressing complex challenges is why discrete mathematics emerged as an important field.</p> |
| 147 | + |
| 148 | + <h2>How do we use discrete mathematics?</h2> |
| 149 | + <p>First, you must know that should belong a branch of mathematics. Then you can use discrete mathematics.</p> |
| 150 | + |
| 151 | + <h2>At the end of this article.</h2> |
| 152 | + <p>You should visit next word.</p> |
| 153 | + </div> |
| 154 | + |
| 155 | + <div style="text-align: center;"> |
| 156 | + <a href="javascript:history.back(-1)"> |
| 157 | + <button class="Button">Back to the Previous Page</button> |
| 158 | + </a> |
| 159 | + </div> |
| 160 | +</body> |
| 161 | +</html> |
0 commit comments