通用自适应文章列表

✅ PC端自动两列布局 ✅ 平板自动适配 ✅ 手机端单列显示 ✅ 包含文章标题、发布日期、文章摘要 ✅ Hover动画效果 ✅ 卡片阴影、圆角设计，美观简洁 ✅ 纯HTML+CSS，无任何依赖...

✅ PC端自动两列布局

✅ 平板自动适配

✅ 手机端单列显示

✅ 包含文章标题、发布日期、文章摘要

✅ Hover动画效果

✅ 卡片阴影、圆角设计，美观简洁

✅ 纯HTML+CSS，无任何依赖

<!DOCTYPE html>
<html>
<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:"PingFang SC","Microsoft YaHei",sans-serif;
    background:#f5f7fb;
    color:#333;
    padding:30px 15px;
}

.article-list{
    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.article-item{
    background:#fff;
    border-radius:14px;
    padding:22px;
    transition:.3s;
    border:1px solid #eef1f5;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.article-item:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.article-title{
    font-size:20px;
    font-weight:600;
    line-height:1.5;
    margin-bottom:14px;
}

.article-title a{
    color:#222;
    text-decoration:none;
    transition:.25s;
}

.article-title a:hover{
    color:#1677ff;
}

.article-date{
    display:inline-block;
    font-size:14px;
    color:#888;
    background:#f5f8fc;
    padding:6px 12px;
    border-radius:30px;
    margin-bottom:16px;
}

.article-desc{
    font-size:15px;
    color:#666;
    line-height:1.8;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* 平板 */
@media (max-width:992px){

.article-list{
    gap:18px;
}

.article-title{
    font-size:18px;
}

}

/* 手机 */
@media (max-width:768px){

body{
    padding:15px;
}

.article-list{
    grid-template-columns:1fr;
    gap:15px;
}

.article-item{
    padding:18px;
    border-radius:12px;
}

.article-title{
    font-size:17px;
}

.article-date{
    font-size:13px;
    padding:5px 10px;
}

.article-desc{
    font-size:14px;
    line-height:1.7;
}

}
</style>
</head>

<body>

<div class="article-list">

    <article class="article-item">
        <h2 class="article-title">
            <a href="#">如何选择适合企业的网站建设方案，提高品牌竞争力</a>
        </h2>

        <div class="article-date">2026-08-06</div>

        <p class="article-desc">
            企业官网不仅是品牌展示窗口，更是客户获取信息的重要渠道。本文将从网站定位、设计风格、SEO优化、用户体验等多个方面介绍企业网站建设的关键要点。
        </p>
    </article>

    <article class="article-item">
        <h2 class="article-title">
            <a href="#">SEO优化有哪些技巧？提升网站排名的实用方法分享</a>
        </h2>

        <div class="article-date">2026-08-05</div>

        <p class="article-desc">
            搜索引擎优化能够帮助网站获得更多自然流量，包括关键词布局、内容原创、外链建设、页面速度优化以及移动端适配等多个优化方向。
        </p>
    </article>

    <article class="article-item">
        <h2 class="article-title">
            <a href="#">企业为什么需要响应式网站设计？</a>
        </h2>

        <div class="article-date">2026-08-03</div>

        <p class="article-desc">
            随着移动互联网的发展，响应式网站已经成为企业建站的标准配置，可以兼容手机、平板、电脑等多终端设备，提高用户体验和搜索引擎友好度。
        </p>
    </article>

    <article class="article-item">
        <h2 class="article-title">
            <a href="#">内容营销如何结合SEO实现精准获客</a>
        </h2>

        <div class="article-date">2026-08-01</div>

        <p class="article-desc">
            高质量原创内容配合合理的关键词布局，可以持续提升网站权重和用户转化率，同时增强品牌专业形象，实现长期稳定的自然流量增长。
        </p>
    </article>
</div>
</body>
</html>