vivo响应式官网

1.准备工作

1.引入各种文件

网页图标

Bootstrap CSS

Bootstrap JS
Bootstrap icons 首页CSS文件

2.TDK网页优化标签

当加上标签后，是通过搜索看到的

3.具体过程

3.1 顶部导航栏制作

1.先在BS中看有没有合适的先复制一个大框架，里面的主题色可以根据提示修改，其余的细节再重新设置一下

注意文字阴影text-shadow和盒子阴影box-shadow的区别
导航栏下划线的制作：是通过after盒子来制作的，利用绝对定位操作

3.2 轮播图的制作

制作前，一定要先设置一个大盒子，给出高度，宽度

3.3热门产品模块

1.标题样式，加粗，文字大小，都可以直接复制类名；display主要针对于标题设置大小

2.它其中的卡片可以观察到其断点为768即md

3.卡片框：预设按钮和现成按钮不同，可以将按钮宽度设为100%

3.4 未来科技模块

1.想让背景图片淡一点，可以加一个半透明的效果的盒子，可以用::before,不要忘了加绝对定位，里面的内容如果被盖住了，可以加一个相对定位

2.大盒子均为行row，规定一行放几个，一共放几个盒子即可

3.5 底部部分

1.一个footer盒子里面有一个padding值；container里面放上下两个盒子，再用row包含第一行，第一行前三个是dl这种，先考虑响应式，增加断点，刚开始一行4个，lg之后一行放2个，md之后一行放一个

2.直接引入表单时，背景颜色，边框颜色，里面的文字颜色都可以通过引用类名来修改

最后设置一下媒体查询，调整一下细节

4. 图片遮罩

给大盒子添加

5. 自定义滚动条

6.index代码

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vivo智能手机官方网站 - X200s 影像旗舰</title>
  <meta name="keywords"  
    content="vivo，vivo官网，vivo智能手机大全，vivo手机最新报价，vivo手机图片，X200系列、S20系列、X Fold3、vivo Pad5 Pro、vivo WATCH 5、iQOO 13">
  <meta name="description" content="手机领域的国际化品牌，vivo官网提供手机资讯、售前咨询、在线购买、售后服务等功能；vivo当季明星...">
  <!-- 1. 先加载Bootstrap -->
  <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">

  <!-- 2. 再加载Bootstrap图标 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

  <!-- 3. 最后加载自定义CSS -->
  <link rel="stylesheet" href="./css/index1.css">

  <!-- 网页图标放在最后 -->
  <link rel="stylesheet" href="./favicon.ico">
</head>

<body>
  <!-- 顶部导航栏的制作 -->
  <nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top" data-bs-theme="dark">
    <!-- 导航栏的容器改变成有版心的那种 -->
    <!-- <div class="container-fluid"> -->
    <div class="container">
      <a class="navbar-brand" href="#">vivo</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">智能手机</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">智能生态</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">云服务</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">会员中心</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">支持</a>
          </li>


        </ul>
        <!-- 右侧图标 -->
        <div class="icons">
          <a href="#"><i class="bi bi-search"></i></a>
          <a href="#"><i class="bi bi-person"></i></a>
          <a href="#"><i class="bi bi-cart"></i></a>
        </div>
      </div>
    </div>
  </nav>
  <!-- 轮播图的制作 -->
  <section class="banner">
    <div id="carouselExampleIndicators" class="carousel slide">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
          aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
          aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
          aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="./img/banner1.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>First slide label</h5>
            <p>Some representative placeholder content for the first slide.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="./img/banner2.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>First slide label</h5>
            <p>Some representative placeholder content for the first slide.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="./img/banner3.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>First slide label</h5>
            <p>Some representative placeholder content for the first slide.</p>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
        data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
        data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </section>
  <!-- 热门产品模块 -->
  <section class="hot-product py-5">
    <div class="container py-5">
      <h2 class="text-center fw-bold display-4">热门产品</h2>
      <p class="text-center fs-6 mt-3 display-4 info">
        我们的热门产品，为您提供最有价值的智能体验。
      </p>
      <!-- 行卡片组 -->
      <!-- 一个卡片组包含3个卡片 -->
      <div class="row mt-5">
        <div class="col-md-4">
          <div class="card">
            <div class="card-img">
              <img src="./img/pic1.webp" class="card-img-top" alt="...">
            </div>
            <div class="card-body">
              <h5 class="card-title">vivo V50</h5>
              <p class="card-text">苋薄设计，卓越人像摄影体验</p>
              <p class="price">2499起</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-img">
              <img src="./img/pic2.jpg" class="card-img-top" alt="...">
            </div>
            <div class="card-body">
              <h5 class="card-title">vivo V50</h5>
              <p class="card-text">苋薄设计，卓越人像摄影体验</p>
              <p class="price">2499起</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-img">
              <img src="./img/pic3.jpg" class="card-img-top" alt="...">
            </div>
            <div class="card-body">
              <h5 class="card-title">vivo V50</h5>
              <p class="card-text">苋薄设计，卓越人像摄影体验</p>
              <p class="price">2499起</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- 未来科技模块 -->
  <section class="future-tech py-5">
    <div class="container py-5 position-relative">
      <h2 class="text-center fw-bold display-4">未来科技</h2>
      <p class="text-center fs-6 mt-3 display-4 info">
        我们的未来科技，为您带来最先进的智能体验。
      </p>
      <div class="row">
        <div class="col-md-4 text-center mt-5">
          <i class="bi bi-camera future-icon"></i>
          <h3 class="fs-6 mt-2 future-title">智能摄影</h3>
          <p class="fs-6 mt-2 future-text">利用先进的摄影技术，为您带来最专业的照片。</p>
        </div>
        <div class="col-md-4 text-center mt-5">
          <i class="bi bi-camera future-icon"></i>
          <h3 class="fs-6 mt-2 future-title">智能摄影</h3>
          <p class="fs-6 mt-2 future-text">利用先进的摄影技术，为您带来最专业的照片。</p>
        </div>
        <div class="col-md-4 text-center mt-5">
          <i class="bi bi-camera future-icon"></i>
          <h3 class="fs-6 mt-2 future-title">智能摄影</h3>
          <p class="fs-6 mt-2 future-text">利用先进的摄影技术，为您带来最专业的照片。</p>
        </div>
        <div class="col-md-4 text-center mt-5">
          <i class="bi bi-camera future-icon"></i>
          <h3 class="fs-6 mt-2 future-title">智能摄影</h3>
          <p class="fs-6 mt-2 future-text">利用先进的摄影技术，为您带来最专业的照片。</p>
        </div>
        <div class="col-md-4 text-center mt-5">
          <i class="bi bi-camera future-icon"></i>
          <h3 class="fs-6 mt-2 future-title">智能摄影</h3>
          <p class="fs-6 mt-2 future-text">利用先进的摄影技术，为您带来最专业的照片。</p>
        </div>
        <div class="col-md-4 text-center mt-5">
          <i class="bi bi-camera future-icon"></i>
          <h3 class="fs-6 mt-2 future-title">智能摄影</h3>
          <p class="fs-6 mt-2 future-text">利用先进的摄影技术，为您带来最专业的照片。</p>
        </div>
      </div>
    </div>
  </section>
  <!-- 底部制作 -->
  <section class="footer">
    <div class="container">
      <!-- 行 -->
      <div class="row">
        <!-- lg之前一行4个，md之前一行2个 -->
        <dl class="col-lg-3 col-md-6">
          <dt>产品系列</dt>
          <dd><a href="#">X系列</a></dd>
          <dd><a href="#">Y系列</a></dd>
          <dd><a href="#">Z系列</a></dd>
          <dd><a href="#">折叠屏系列</a></dd>
          <dd><a href="#">智能配件</a></dd>
        </dl>
        <dl class="col-lg-3 col-md-6">
          <dt>产品系列</dt>
          <dd><a href="#">X系列</a></dd>
          <dd><a href="#">Y系列</a></dd>
          <dd><a href="#">Z系列</a></dd>
          <dd><a href="#">折叠屏系列</a></dd>
          <dd><a href="#">智能配件</a></dd>
        </dl>
        <dl class="col-lg-3 col-md-6">
          <dt>产品系列</dt>
          <dd><a href="#">X系列</a></dd>
          <dd><a href="#">Y系列</a></dd>
          <dd><a href="#">Z系列</a></dd>
          <dd><a href="#">折叠屏系列</a></dd>
          <dd><a href="#">智能配件</a></dd>
        </dl>
        <dl class="col-lg-3 col-md-6">
          <dt>关注我们</dt>
          <dd>
            <div class="icons mt-4">
              <a href="#"><i class="bi bi-facebook"></i></a>
              <a href="#"><i class="bi bi-twitter"></i></a>
              <a href="#"><i class="bi bi-instagram"></i></a>
              <a href="#"><i class="bi bi-youtube"></i></a>
              <a href="#"><i class="bi bi-wechat"></i></a>
            </div>
            <p class="mt-4 news">关注我们，了解最新动态！</p>
            <div class="input-group mb-3">
              <input type="email" class="form-control bg-dark text-light border-dark" placeholder="请输入邮箱"
                aria-label="Recipient's username" aria-describedby="button-addon2">
              <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
            </div>
          </dd>
        </dl>
        <div class="copyright text-center py-5 mt-5">
          @ 2023 vivo 移动通讯技术有限公司
        </div>
      </div>
    </div>
  </section>
  <!-- 引入Bootstrap JS文件 -->

  <script src="./bootstrap/bootstrap.min.js"></script>
</body>

</html>

7.CSS代码

css 复制代码

 /* 定义全局变量 */
 :root {
   --vivo-blue: #1976d2;
   --vivo-cyan: #00e5ff;
   --vivo-purple: #7b1fa2;
   --vivo-dark: #121212;
   --vivo-card-bg: #1e1e1e;
   --neon-glow: 0 0 10px rgba(0, 229, 255, 0.7),
     0 0 20px rgba(0, 229, 255, 0.5),
     0 0 30px rgba(0, 229, 255, 0.3);
 }

 body {
   font-family: 'Montserrat', sans-serif;
   background-color: var(--vivo-dark);
   color: #fff;
   overflow-x: hidden;
 }

 .navbar {
   background-color: rgba(18, 18, 18, 0.65) !important;
   backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   padding: 15px 0;
 }

 .icons a {
   font-size: 1.4rem;
   color: rgba(255, 255, 255, 0.9);
   padding: 0 10px;
 }

 .nav-link {
   color: rgba(255, 255, 255, 0.9);
   margin: 0 12px;
   /* 子绝父相 */
   position: relative;
 }

 .nav-link::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: -5px;
   width: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--vivo-blue), var(--vivo-cyan));
   transition: all 0.3s;
 }

 .nav-link:hover::after {
   width: 100%;
 }

 /* 设置鼠标经过的效果 */
 .nav-link:hover {
   color: var(--vivo-cyan);
   text-shadow: var(--neon-glow);
 }

 .icons a:hover {
   color: var(--vivo-cyan);
   text-shadow: var(--neon-glow);
 }

 .navbar-brand,
 .navbar-brand:hover {
   font-size: 28px;
   font-weight: 700px;
   background: linear-gradient(45deg, var(--vivo-blue), var(--vivo-cyan));
   /* 文字裁剪 */
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 .banner {
   width: 100%;
   height: 50vw;
   mask-image: linear-gradient(囗rgb(0, 0, 0)80%, 囗rgba(0, 0, 0，0)100%);
 }

 .carousel-item img {
   height: 50vw;
   width: 100%;
 }

 .carousel-caption {
   bottom: 15rem;
 }

 .carousel-indicators {
   margin-bottom: 14rem;
 }

 body {
   height: 5000px;
 }

 .hot-product .info {
   color: rgba(255, 255, 255, 0.7);
 }

 .row .card {
   background-color: var(--vivo-card-bg);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 15px;
   transition: all 0.3s;
   overflow: hidden;
 }

 .card:hover {
   transform: translateY(-10px);
   border-color: rgba(0, 229, 255, 0.3);
 }

 .row .card .card-img {
   padding: 30px;
   background-color: #292929;
 }

 .card .card-img img {
   animation: move 5s ease-in-out infinite;
 }

 /* 图片做一个动画效果 */
 @keyframes move {
   0% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(-15px);
   }

   100% {
     transform: translateY(0);
   }
 }

 .card-body .card-title {
   font-size: 1.4rem;
   color: #fff;
   font-weight: 600;

 }

 .card-body .card-text {
   font-size: 0.9rem;
   color: rgba(255, 255, 255, 0.7);
 }

 .card-body .price {
   font-size: 1.5rem;
   color: var(--vivo-cyan);
   font-weight: 600;
 }

 .card-body .btn {
   width: 100%;
   border: 2px solid var(--vivo-cyan);
   border-radius: 30px;
   background-color: none;
   background: none;
   padding: 10px 0;
   color: var(--vivo-cyan);
   font-weight: 600;
 }

 /* 鼠标经过按钮的效果 */
 .card-body .btn:hover {
   box-shadow: var(--neon-glow);
 }

 .future-tech {
   background: url(../img/bg1.avif) no-repeat;
   background-size: cover;
   background-position: center;
   /* 图片固定定位 */
   background-attachment: fixed;

   position: relative;
 }

 /* 加一个滤镜效果，让背景图片暗一点 */
 .future-tech::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(18, 18, 18, 0.9);
 }

 .row .future-icon {
   font-size: 3rem;
   color: var(--vivo-cyan);
   margin-bottom: 20px;
   /* 文字阴影 */
   text-shadow: var(--neon-glow);
 }

 .row .future-title {
   font-size: 1.5rem;
   color: #fff;
   font-weight: 600;
   margin-bottom: 15px;
 }

 .row .future-text {

   color: rgba(255, 255, 255, 0.7);
 }

 .footer {
   background-color: #0a0a0a;
   padding-top: 80px;
 }

 .footer .row dt {
   font-size: 1.2rem;
   padding-bottom: 10px;
   font-weight: 600;
   margin-bottom: 15px;
   position: relative;
 }

 .footer .row dt::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 40px;
   height: 2px;
   background: linear-gradient(90deg, var(--vivo-blue), var(--vivo-cyan));
   /* transition: all 0.3s; */
 }



 .footer .row dd>a {
   /* 必须先转为块级元素 */
   display: block;
   color: rgba(255, 255, 255, 0.7);
   text-decoration: none;
   transition: all 0.3s;
 }

 .footer .row dd>a:hover {
   color: var(--vivo-cyan);
   transform: translateX(5px);
 }

 .footer .icons {
   display: flex;
 }

 .footer .icons a {
   width: 40px;
   height: 40px;
   line-height: 40px;
   text-align: center;
   border-radius: 50%;

   color: rgba(255, 255, 255, 1.1);
   margin-right: 10px;
   transition: all 0.3s;
 }

 .footer .icons a:hover {
   color: #fff;
   text-shadow: var(--neon-glow);
   background-color: linear-gradient(45deg, var(--vivo-blue), var(--vivo-cyan));
   transform: translateY(-3px);
 }

 .footer .news {
   font-size: 1.2rem;
   color: rgba(255, 255, 255, 0.7);
 }

 .form-control::placeholder {
   color: rgba(255, 255, 255, 0.7);
 }

 .btn-outline-secondary {
   background: linear-gradient(45deg, var(--vivo-blue), var(--vivo-cyan));
   font-weight: 600;
   border: 0;
   border-radius: 30px;
   padding: 12px 30px;
   color: #fff;
   transition: all 0.3s;
 }

 .btn-outline-secondary:hover {
   box-shadow: var(--neon-glow);
   transform: translateY(-3px);
 }

 .copyright {
   color: rgba(255, 255, 255, 0.7);
   border-top: 1px solid rgba(255, 255, 255, 0.1);
 }