• 日期: 2026-11-17
  • 标签: 常规
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
  <meta charset='UTF-8'>
  <title>小米官网</title>
  <link rel='stylesheet' href='https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css'>
  <link rel='stylesheet' href='https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css'>
  <style>
    body {
      font-family: 'Microsoft YaHei', sans-serif;
      background-color: #f4f4f4;
    }
    .navbar {
      background-color: #fff;
      border: none;
    }
    .navbar-brand {
      font-size: 30px;
      color: #ff6700;
      font-weight: bold;
    }
    .navbar-right li {
      margin-left: 10px;
      margin-right: 10px;
    }
    .navbar-right li a {
      color: #333;
      font-size: 16px;
      font-weight: bold;
    }
    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
      width: 100%;
      margin: auto;
      height: 500px;
    }
    .carousel-caption {
      top: 50%;
      transform: translateY(-50%);
      text-align: center;
    }
    .carousel-caption h3 {
      font-size: 60px;
      font-weight: bold;
      color: #fff;
      text-shadow: 2px 2px 4px #000000;
      margin-bottom: 30px;
    }
    .carousel-caption p {
      font-size: 20px;
      color: #fff;
      margin-bottom: 30px;
    }
    .section-title {
      text-align: center;
      margin: 80px 0;
    }
    .section-title h2 {
      font-size: 36px;
      font-weight: bold;
      text-transform: uppercase;
      margin-bottom: 30px;
    }
    .section-title p {
      font-size: 18px;
      margin-bottom: 30px;
    }
    .product-item {
      background-color: #fff;
      margin-top: 40px;
      margin-bottom: 40px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
      transition: all 0.3s ease-in-out;
    }
    .product-item:hover {
      box-shadow: 0 0 20px rgba(0,0,0,0.4);
    }
    .product-item img {
      width: 100%;
      height: auto;
      transition: all 0.3s ease-in-out;
    }
    .product-item:hover img {
      transform: scale(1.1);
    }
    .product-item .product-info {
      padding: 20px;
    }
    .product-item h3 {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .product-item p {
      font-size: 16px;
      margin-bottom: 20px;
    }
    .product-item button {
      background-color: #ff6700;
      color: #fff;
      border: none;
      font-size: 16px;
      font-weight: bold;
      padding: 10px 20px;
      transition: all 0.3s ease-in-out;
    }
    .product-item button:hover {
      background-color: #333;
    }
    .footer {
      background-color: #f6f6f6;
      padding: 40px 0;
    }
    .footer p {
      font-size: 16px;
      margin-bottom: 20px;
    }
    .footer ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .footer ul li {
      display: inline-block;
      margin-right: 10px;
    }
    .footer ul li a {
      font-size: 20px;
      color: #333;
    }
    .footer ul li a:hover {
      color: #ff6700;
    }
  </style>
</head>
<body>
  <nav class='navbar navbar-default'>
    <div class='container'>
      <div class='navbar-header'>
        <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar-collapse'>
          <span class='sr-only'>Toggle navigation</span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
        </button>
        <a class='navbar-brand' href='#'>小米</a>
      </div>
      <div class='collapse navbar-collapse' id='navbar-collapse'>
        <ul class='nav navbar-nav navbar-right'>
          <li><a href='#'>手机</a></li>
          <li><a href='#'>电视</a></li>
          <li><a href='#'>笔记本</a></li>
          <li><a href='#'>家电</a></li>
          <li><a href='#'>路由器</a></li>
          <li><a href='#'>智能硬件</a></li>
          <li><a href='#'>服务</a></li>
          <li><a href='#'>社区</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div id='myCarousel' class='carousel slide' data-ride='carousel'>
    <ol class='carousel-indicators'>
      <li data-target='#myCarousel' data-slide-to='0' class='active'></li>
      <li data-target='#myCarousel' data-slide-to='1'></li>
      <li data-target='#myCarousel' data-slide-to='2'></li>
    </ol>
    <div class='carousel-inner'>
      <div class='item active'>
        <img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9d9cc1c5a5d5d77b5b5e5a5c5b5d5a5f.jpg' alt='手机'>
        <div class='carousel-caption'>
          <h3>小米10 Pro</h3>
          <p>5G双模 · 50倍变焦</p>
        </div>
      </div>
      <div class='item'>
        <img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2f8e596e841bcf114a09d66a1e9e9b3c.jpg' alt='电视'>
        <div class='carousel-caption'>
          <h3>小米电视5</h3>
          <p>4K · 人工智能语音</p>
        </div>
      </div>
      <div class='item'>
        <img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1d02c2aa8f9d6a08f6d4f36c1e4a4d6e.jpg' alt='笔记本'>
        <div class='carousel-caption'>
          <h3>小米笔记本</h3>
          <p>强悍性能 · 轻薄便携</p>
        </div>
      </div>
    </div>
    <a class='left carousel-control' href='#myCarousel' role='button' data-slide='prev'>
      <span class='glyphicon glyphicon-chevron-left' aria-hidden='true'></span>
      <span class='sr-only'>Previous</span>
    </a>
    <a class='right carousel-control' href='#myCarousel' role='button' data-slide='next'>
      <span class='glyphicon glyphicon-chevron-right' aria-hidden='true'></span>
      <span class='sr-only'>Next</span>
    </a>
  </div>
  <div class='container'>
    <div class='row'>
      <div class='col-md-12'>
        <div class='section-title'>
          <h2>热门产品</h2>
          <p>选购小米明星产品，畅享科技生活</p>
        </div>
      </div>
    </div>
    <div class='row'>
      <div class='col-md-4'>
        <div class='product-item'>
          <img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bfa0a7f0d9e6a7e9a9b9e7aea1c0a197.jpg' alt='小米10'>
          <div class='product-info'>
            <h3>小米10</h3>
            <p>骁龙865 · 1亿像素相机</p>
            <button>立即购买</button>
          </div>
        </div>
      </div>
      <div class='col-md-4'>
        <div class='product-item'>
          <img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7d6d4a6db7a1d8f8d7e6e2d6c3f3d9a9.jpg' alt='小米电视4A'>
          <div class='product-info'>
            <h3>小米电视4A</h3>
            <p>4K超高清 · 人工智能语音</p>
            <button>立即购买</button>
          </div>
        </div>
      </div>
      <div class='col-md-4'>
        <div class='product-item'>
          <img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7f1d9a9a7a2e2e2b2e7f2a2a6d7a6b1d.jpg' alt='小米手环5'>
          <div class='product-info'>
            <h3>小米手环5</h3>
            <p>0.95英寸AMOLED · 智能心率监测</p>
            <button>立即购买</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class='footer'>
    <div class='container'>
      <div class='row'>
        <div class='col-md-4'>
          <p><i class='fa fa-phone'></i> 客服热线：400-100-5678</p>
          <p><i class='fa fa-envelope'></i> 客服邮箱：service@mi.com</p>
        </div>
        <div class='col-md-4'>
          <ul>
            <li><a href='#'>关于小米</a></li>
            <li><a href='#'>联系我们</a></li>
            <li><a href='#'>加入小米</a></li>
            <li><a href='#'>隐私政策</a></li>
            <li><a href='#'>用户协议</a></li>
          </ul>
        </div>
        <div class='col-md-4'>
          <ul>
            <li><a href='#'>小米商城</a></li>
            <li><a href='#'>MIUI</a></li>
            <li><a href='#'>米家</a></li>
            <li><a href='#'>多看阅读</a></li>
            <li><a href='#'>小米路由器</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <script src='https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js'></script>
  <script src='https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>
小米官网首页 HTML 页面代码 - PC 端

原文地址: https://www.cveoy.top/t/topic/mXZk 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录