企业网站固定宽度单色圆角框样式代码

日期 : 2026-09-22 18:00:49

本次网站设计为企业官网专用固定宽度单色圆角框，风格简约商务、干净高级，无花哨特效，适配企业简介、服务展示、案例展示、资讯卡片、数据统计等官网通用模块。采用固定宽度、纯色填充、统一圆角设计，适配PC端企业网站布局，代码精简、兼容性好、可直接复用。

一、设计核心参数（企业官网适配）

固定宽度：1200px（企业官网主流标准宽度，适配主流PC屏幕）
样式风格：单色纯色背景 / 单色细边框两种方案，无渐变、无复杂配色
圆角参数：12px（商务适中圆角，不尖锐不浮夸，贴合企业正式调性）

二、完整可复用代码（HTML+CSS）

方案一：纯色背景单色圆角框（常用：内容展示、板块容器）

适合企业官网首页板块、关于我们、企业优势、荣誉资质等模块，干净整洁，高级商务风。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>企业固定宽度单色圆角框</title>
    <style>
        /* 企业通用固定宽度圆角容器 */
        .enterprise-box-solid {
            /* 固定宽度 企业官网标准尺寸 */
            width: 1200px;
            /* 居中对齐 */
            margin: 40px auto;
            /* 单色背景 浅灰商务底色 百搭所有企业主题色 */
            background-color: #f8f9fa;
            /* 统一圆角 */
            border-radius: 12px;
            /* 内边距 上下左右留白均匀 */
            padding: 40px 30px;
            /* 极简柔和阴影 提升质感不浮夸 */
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
            /* 防止内容溢出 */
            box-sizing: border-box;
        }

        /* 可选 hover 轻微动效 适配官网交互 */
        .enterprise-box-solid:hover {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }
    </style>
</head>
<body>
    <!-- 企业圆角框内容区域 -->
    <div class="enterprise-box-solid">
        <h3>企业板块标题</h3>
        <p>企业官网展示内容，可放置企业介绍、服务详情、案例信息、企业优势等文字或图文内容，样式简洁大气，适配企业品牌形象。</p>
    </div>
</body>
</html>

方案二：单色边框圆角框（常用：卡片、列表、详情模块）

适合产品卡片、新闻资讯、合作案例、客户评价等模块，留白通透，视觉层次清晰。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>企业单色边框圆角框</title>
    <style>
        .enterprise-box-border {
            /* 固定标准宽度 */
            width: 1200px;
            margin: 40px auto;
            /* 单色细边框 低调商务色 */
            border: 1px solid #e5e7eb;
            /* 统一圆角 */
            border-radius: 12px;
            padding: 40px 30px;
            box-sizing: border-box;
            background-color: #ffffff;
            transition: all 0.3s ease;
        }

        .enterprise-box-border:hover {
            /* hover 边框微加深 极简交互 */
            border-color: #d1d5db;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
        }
    </style>
</head>
<body>
    <div class="enterprise-box-border">
        <h3>企业卡片标题</h3>
        <p>适用于企业网站产品展示、新闻资讯、合作案例、荣誉展示等场景，边框简约，整体干净大气，符合企业官网正式、专业的视觉风格。</p>
    </div>
</body>
</html>