liijunwei/quick-links.html

## quick-links.html
<!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>
	<!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>
No results found