Created
August 7, 2025 01:00
-
-
Save liijunwei/677b52a9b3145f10be3edf4a75e5286e to your computer and use it in GitHub Desktop.
quick link template
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>自动布局的框格链接页面</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| line-height: 1.6; | |
| padding: 20px; | |
| background-color: #f0f2f5; | |
| } | |
| h1 { | |
| text-align: center; | |
| color: #333; | |
| margin-bottom: 30px; | |
| } | |
| /* 关键修改:使用auto-fill实现自动布局 */ | |
| .grid-container { | |
| display: grid; | |
| /* 每个框格最小250px,自动填充剩余空间 */ | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| gap: 20px; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 10px; | |
| } | |
| .grid-item { | |
| background-color: white; | |
| border-radius: 8px; | |
| padding: 20px; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.1); | |
| } | |
| .grid-item h2 { | |
| color: #2c3e50; | |
| margin-bottom: 15px; | |
| font-size: 1.2rem; | |
| } | |
| .link-list { | |
| list-style: none; | |
| padding-left: 0; | |
| } | |
| .link-list li { | |
| margin: 10px 0; | |
| } | |
| .link-list a { | |
| color: #3498db; | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .link-list a:hover { | |
| color: #2980b9; | |
| text-decoration: underline; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>自动布局的框格链接页面</h1> | |
| <div class="grid-container"> | |
| <!-- 框格1 --> | |
| <div class="grid-item"> | |
| <h2>框格一</h2> | |
| <ul class="link-list"> | |
| <li><a href="#" target="_blank">链接 1-1</a></li> | |
| <li><a href="#" target="_blank">链接 1-2</a></li> | |
| </ul> | |
| </div> | |
| <!-- 框格2 --> | |
| <div class="grid-item"> | |
| <h2>框格二</h2> | |
| <ul class="link-list"> | |
| <li><a href="#" target="_blank">链接 2-1</a></li> | |
| <li><a href="#" target="_blank">链接 2-2</a></li> | |
| </ul> | |
| </div> | |
| <!-- 框格3 --> | |
| <div class="grid-item"> | |
| <h2>框格三</h2> | |
| <ul class="link-list"> | |
| <li><a href="#" target="_blank">链接 3-1</a></li> | |
| <li><a href="#" target="_blank">链接 3-2</a></li> | |
| </ul> | |
| </div> | |
| <!-- 框格4 --> | |
| <div class="grid-item"> | |
| <h2>框格四</h2> | |
| <ul class="link-list"> | |
| <li><a href="#" target="_blank">链接 4-1</a></li> | |
| <li><a href="#" target="_blank">链接 4-2</a></li> | |
| </ul> | |
| </div> | |
| <!-- 新增框格5 --> | |
| <div class="grid-item"> | |
| <h2>框格五</h2> | |
| <ul class="link-list"> | |
| <li><a href="#" target="_blank">链接 5-1</a></li> | |
| <li><a href="#" target="_blank">链接 5-2</a></li> | |
| </ul> | |
| </div> | |
| <!-- 你可以继续添加更多框格,它们会自动排列 --> | |
| <div class="grid-item"> | |
| <h2>框格六</h2> | |
| <ul class="link-list"> | |
| <li><a href="#" target="_blank">链接 6-1</a></li> | |
| <li><a href="#" target="_blank">链接 6-2</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment