码多多AI编程问答网

设计一个以陶瓷大师为主题的网站，主要用于手机端，自适应布局，头部展示网站logo然后一个导航栏分别为：首页、大师、非遗、作品。轮播图区域下面统计了总共后台上传了多少位：国家级大师、省级大师、市级大师、非遗传承人和作品，然后再下面展示了三位国家级大师，三位省级大师，三位市级大师和很多大师作品，每种展示之间相对的级别隔开。要看起来有权威性，更真实大气。

以下是一个基本的HTML和CSS代码示例，你可以根据需要进一步调整和扩展：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陶瓷大师网站</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #f8f9fa;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo img {
            height: 40px;
        }
        nav ul {
            list-style: none;
            padding: 0;
            display: flex;
        }
        nav ul li {
            margin: 0 15px;
        }
        nav ul li a {
            text-decoration: none;
            color: #343a40;
        }
        .carousel {
            background-color: #e9ecef;
            padding: 20px;
            text-align: center;
        }
        .stats {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
        }
        .stat {
            text-align: center;
        }
        .master-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .master-item {
            width: 30%;
            margin: 10px;
            padding: 20px;
            background-color: #f8f9fa;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">
            <img src="logo.png" alt="网站Logo">
        </div>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#masters">大师</a></li>
                <li><a href="#heritage">非遗</a></li>
                <li><a href="#works">作品</a></li>
            </ul>
        </nav>
    </header>
    <div class="carousel">
        <!-- 轮播图区域 -->
        <img src="carousel1.png" alt="轮播图1">
        <img src="carousel2.png" alt="轮播图2">
        <img src="carousel3.png" alt="轮播图3">
    </div>
    <div class="stats">
        <div class="stat">
            <h2>国家级大师</h2>
            <p>数量: 10</p>
        </div>
        <div class="stat">
            <h2>省级大师</h2>
            <p>数量: 20</p>
        </div>
        <div class="stat">
            <h2>市级大师</h2>
 <p>数量: 30</p>
        </div>
    </div>
    <div class="master-list" id="masters">
        <!-- 三位国家级大师 -->
        <div class="master-item">
            <img src="master1.png" alt="大师1">
            <h3>张三</h3>
            <p>国家级大师</p>
        </div>
        <div class="master-item">
            <img src="master2.png" alt="大师2">
            <h3>李四</h3>
            <p>国家级大师</p>
        </div>
        <div class="master-item">
            <img src="master3.png" alt="大师3">
            <h3>王五</h3>
            <p>国家级大师</p>
        </div>
        <!-- 三位省级大师 -->
        <div class="master-item">
            <img src="master4.png" alt="大师4">
            <h3>赵六</h3>
            <p>省级大师</p>
        </div>
        <div class="master-item">
            <img src="master5.png" alt="大师5">
            <h3>孙七</h3>
            <p>省级大师</p>
        </div>
        <div class="master-item">
            <img src="master6.png" alt="大师6">
            <h3>周八</h3>
            <p>省级大师</p>
        </div>
        <!-- 三位市级大师 -->
        <div class="master-item">
            <img src="master7.png" alt="大师7">
            <h3>吴九</h3>
            <p>市级大师</p>
        </div>
        <div class="master-item">
            <img src="master8.png" alt="大师8">
            <h3>郑十</h3>
            <p>市级大师</p>
        </div>
        <div class="master-item">
            <img src="master9.png" alt="大师9">
            <h3>陈十一</h3>
            <