2023【黑马程序员】移动 Web 第五天（综合案例）

2024-02-26 03:20:08 分类：前端 热度：36 评论： 0

alloyTeam综合案例部分

最终目标页面的布局效果图：

1、准备工作

 项目目录

在 index.less 中调整输出文件路径 

//out: ../css/

在 index.html 中 link 所有需要导入的文件（ link 的顺序不可调整）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯全端</title>
    <link rel="stylesheet" href="favicon.ico">
    <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>


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

</html>

 2、导航区域

复制链接中对应样式的代码：Navbar · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网 (bootcss.***)

黏贴到 index.html 的 body中 

<body>
    <!-- 导航 -->
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled">Disabled</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

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

</html>

更改背景色：（index.less)

目标背景色为透明，但因为目前我们的字体颜色为白色，会不明显，所以先暂时改为测试颜色（天蓝色） 

// 导航
.bg-body-tertiary {
    background-color: skyblue !important;
}

固定位置：（index.html)

可以自己写

也可以到链接中复制 “固定到顶部” 的类名（fixed-top)，将其黏贴到 nav 的最外层的 class 中

定位 · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网 (bootcss.***)

    <!-- 导航 -->
    <nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">

版心居中：（index.html)

检查导航元素，发现 -fluid 是 with:100% 的效果，去除后得到版心居中效果

    <!-- 导航 -->
    <nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
        <div class="container">

内容位置：（index.less)

将导航内容的不同内容的位置进行修改

检查导航元素，发现 flex-grow 取值为1 ，和 flex 取值为1类似，所以我们将其更改为0

//out: ../css/
// 导航
.bg-body-tertiary {
    background-color: skyblue !important;

    .navbar-collapse {
        flex-grow: 0;
    }
}

内容填充：（index.html)

将 Navbar 更改为 img ，加上 logo 路径；将英文名称也更改为和网页中相同的名称

<body>
    <!-- 导航 -->
    <nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#"><img src="./assets/images/logo.png" alt=""></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <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="#">Github</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">TWeb Conf</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">SuperStar</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Web前端导航</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">关于</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

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

 3、轮播图区域

复制链接中对应样式的代码：

Carousel · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网 (bootcss.***)

 黏贴到 index.html 的 body中（导航下方）

<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="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </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>

更改实现方式：

为了写代码更方便，为了响应式效果更方便，在 index.html 中删除所有 img ，更改为背景图实现（index.less)

    <!-- 轮播图 -->
    <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">

            </div>
            <div class="carousel-item">

            </div>
            <div class="carousel-item">

            </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>
//轮播图
.carousel {
    .carousel-item {
        height: 500px;
        background-image: url(../assets/uploads/banner_1.jpg);
    }
}

调整轮播图数量： ( index.html)

<!-- 轮播图 -->
    <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>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
                aria-label="Slide 4"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">

            </div>
            <div class="carousel-item">

            </div>
            <div class="carousel-item">

            </div>
            <div class="carousel-item">

            </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>

 更改轮播图背景图：( index.less)

//轮播图
.carousel {
    .carousel-item {
        height: 500px;
        background-size: cover;
        background-position: center 0;
    }

    .carousel-item:nth-child(1) {
        background-image: url(../assets/uploads/banner_1.jpg);
    }

    .carousel-item:nth-child(2) {
        background-image: url(../assets/uploads/banner_2.jpg);
    }

    .carousel-item:nth-child(3) {
        background-image: url(../assets/uploads/banner_3.jpg);
    }

    .carousel-item:nth-child(4) {
        background-image: url(../assets/uploads/banner_4.jpg);
    }
}

轮播图响应式效果制作：（ index.less )

小于768图片高度250；大于等于768图片高度400；大于等于992图片高度500

//轮播图: 小于768图片高度250；大于等于768图片高度400；大于等于992图片高度500
.carousel {
    @media(max-width:768px) {
        .carousel-item {
            height: 250px;
        }
    }

    @media(min-width:768px) {
        .carousel-item {
            height: 400px;
        }
    }

    @media(min-width:992px) {
        .carousel-item {
            height: 500px;
        }
    }

    .carousel-item {
        // height: 500px;
        background-size: cover;
        background-position: center 0;
    }

    .carousel-item:nth-child(1) {
        background-image: url(../assets/uploads/banner_1.jpg);
    }

    .carousel-item:nth-child(2) {
        background-image: url(../assets/uploads/banner_2.jpg);
    }

    .carousel-item:nth-child(3) {
        background-image: url(../assets/uploads/banner_3.jpg);
    }

    .carousel-item:nth-child(4) {
        background-image: url(../assets/uploads/banner_4.jpg);
    }
}

 4、开源项目区域

测试：( index.html )

    <!-- 开源项目 -->
    <div class="project container">1</div>

空白间隙&&版心居中：( index.less )

// 开源项目
.project {
    margin-top: 60px;
    text-align: center;
}

 标题：( index.html)

    <!-- 开源项目 -->
    <div class="project container">
        <div class="title">
            <h2>OpenSource / 开源项目</h2>
            <p>种类众多的开源项目，让你爱不释手</p>
        </div>
    </div>

 

内容区域：（ index.html )

视口宽度大于992：一行排4个盒子；视口宽度大于768：一行排2个盒子；

    <!-- 开源项目 -->
    <div class="project container">
        <div class="title">
            <h2>OpenSource / 开源项目</h2>
            <p>种类众多的开源项目，让你爱不释手</p>
        </div>
        <div class="content">
            <div class="row">
                <!-- 视口宽度大于992：一行排4个盒子 col-lg-3 -->
                <!-- 视口宽度大于768：一行排2个盒子 col-md-6 -->
                <div class="col-lg-3 col-md-6">1</div>
                <div class="col-lg-3 col-md-6">2</div>
                <div class="col-lg-3 col-md-6">3</div>
                <div class="col-lg-3 col-md-6">4</div>
            </div>
        </div>
    </div>

美化盒子：（ index.less)

// 开源项目
.project {
    margin-top: 60px;
    text-align: center;

    .row {
        div {
            height: 200px;
            margin-bottom: 10px;

            a {
                display: block;
                height: 200px;
                // background-color: skyblue;
                border-radius: 4px;
            }

            &:nth-child(1) a {
                background-color: #70c3ff;
            }

            &:nth-child(2) a {
                background-color: #fd6a7f;
            }

            &:nth-child(3) a {
                background-color: #7f8ea0;
            }

            &:nth-child(4) a {
                background-color: #89d04f;
            }
        }
    }
}

5、核心源码（布局+所有内容）

 index.less

// out: "../css/"
@import './base.less';

/** 导航栏 */
.navbar {
  height: 70px;
  transition: .5s;

  &-brand {
    transition: .5s;

    .logo {
      width: 200px;
      height: 40px;
      background: url(../assets/images/logo.svg) no-repeat center / contain;
      font-size: 0;
      margin-bottom: 0;
    }
  }

  &-toggler {
    outline: none;
    border: none;
    box-shadow: none;

    &:focus {
      box-shadow: none;
    }
  }

  &-nav {
    width: 100%;
    display: flex;
    justify-content: flex-end;

    .nav-item {
      padding-top: 10px;
      margin-left: 20px;
      transition: .5s;

      .nav-link {
        font-size: 16px;

        &:hover, 
        &.active {
          color: #f2b535;
          background-color: transparent;
        }

        &.hot {
          background-image: linear-gradient(
            to right,
            #cddc39,
            #ff9800 25%,
            #cddc39 50%,
            #ff9800 75%,
            #cddc39
          );
          -webkit-text-fill-color: transparent;
          -webkit-background-clip: text;
          background-clip: text;
    
          &:before {
            content: '';
            display: inline-block;
            width: 13px;
            height: 15px;
            background-image: url(../assets/images/fire.png);
            background-size: 100% 100%;
            position: relative;
            top: 2px;
            right: 2px;
          }
        }
      }
    }
  }

  /** 卷曲动画 */
  &.scrolled {
    background-color: #26282c;
    height: 60px;
    padding-top: 0;
    padding-bottom: 0;
    
    .nav-item {
      padding-top: 0;
    }
  }
}

@media (max-width: 992px) {
  .navbar {
    &-collapse {
      border-top: none;
      box-shadow: none;
      width: 100%;
      left: 0;
      top: 60px;
      position: absolute;
      background: #26282c;
      z-index: 40;
      text-align: center;
    }

    .nav-item {
      margin-left: 0;
      padding-top: 0;
    }
  }
}


/** 轮播图 */
.carousel {

  &-item {
    height: 500px;
    background-size: cover;
    background-position: center;

    /** 背景 */
    &:nth-child(1) {
      background-image: url("../assets//uploads/banner_1.jpg");
    }
    &:nth-child(2) {
      background-image: url("../assets//uploads/banner_2.jpg");
    }
    &:nth-child(3) {
      background-image: url("../assets//uploads/banner_3.jpg");
    }
    &:nth-child(4) {
      background-image: url("../assets//uploads/banner_4.jpg");
    }

    /** 内容 */
    .hire-info {
      position: relative;
      height: 100%;

      .hire-name {
        position: absolute;
        right: 60px;
        bottom: 160px;
        font-size: 40px;
        color: rgba(255,255,255,.9);
        text-align: center;
        letter-spacing: 3px;
        line-height: 60px;
        opacity: 0;
        transform: translateX(100%);
        transition: .5s;
      }

      .hire-title {
        position: absolute;
        bottom: 50px;
        font-size: 50px;
        color: hsla(0,0%,100%,.8);
        left: 50px;
        letter-spacing: 10px;
        opacity: 0;
        transform: translateX(-100%);
        transition: .5s;
      }
    }

    .item-info {
      color: #fff;
      text-align: center;
      width: 100%;
      height: 100%;
      padding-top: 180px;
      overflow: hidden;

      .title-name {
        font-size: 70px;
        padding-bottom: 20px;
        opacity: 0;
        transform: translateY(-200%);
        transition: .5s;
      }

      .title-desc {
        font-size: 40px;
        letter-spacing: 5px;
        opacity: 0;
        transform: translateY(200%);
        transition: .5s;
      }
    }

    /** 激活 */
    &.active {
      .hire-name, 
      .hire-title, 
      .title-name, 
      .title-desc {
        opacity: 1;
        transform: none;
      }
    }
  }
}

@media (max-width: 992px) {
  .carousel {
    &-item {
      height: 400px;
      .item-info {
        padding-top: 120px;
        .title-name {
          font-size: 56px;
        }
        .title-desc {
          font-size: 28px;
        }
      }
      .hire-info {
        .hire-name {
          bottom: 120px;
          font-size: 30px;
        }
        .hire-title {
          font-size: 36px;
          left: 0;
        }
      }
    }
  }
}
@media (max-width: 576px) {
  .carousel {
    &-item {
      height: 250px;
      .item-info {
        padding-top: 80px;
        .title-name {
          font-size: 35px;
        }
        .title-desc {
          font-size: 20px;
        }
      }
      .hire-info {
        .hire-name {
          bottom: 60px;
          right: 0;
          width: 100%;
          line-height: 36px;
          text-align: center;
        }
        .hire-title {
          display: none;
        }
      }
    }
  }
}

// 版块（公共部分）
.section {
  padding-bottom: 40px;

  .items {
    margin-top: 20px;
  }

  .title {
    text-align: center;
    line-height: 2em;

    small {
      display: block;
      font-size: 16px;
      line-height: 2em;
      color: #919191;
      font-weight: 500;
    }
  }

  .more {
    display: flex;
    justify-content: center;
    padding: 10px 0;

    a {
      display: block;
      padding: 10px 16px;
      line-height: 1;
      font-size: 14px;
      border-radius: 6px;
      color: #616161;
      background-color: #e1e1e1;
      border: 1px solid #***c;

      &:hover {
        color: #333;
        background-color: #e6e6e6;
        border-color: #adadad;
      }
    }
  }
}

// 版块（开源项目）
.project {
  margin-top: 40px;

  .items {

    a {
      display: block;
      text-align: center;
      padding: 20px 10px;
      margin-bottom: 10px;
      border-radius: 4px;
      color: #fff;
      position: relative;
      top: 0;
      overflow: hidden;
      transition: all .3s ease;

      &:after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;

        background-image: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, .5),
          rgba(255, 255, 255, 0)
        );

        transform: skew(-25deg);

        position: absolute;
        left: -110%;
        top: 0;
      }

      &:hover {
        box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
        top: -6px;

        &:after {
          left: 110%;
          transition: all .3s ease;
        }
      }
    }

    img {
      height: 60px;
    }
  }

  .omi {
    background-color: #70c3ff;
  }

  .omi {
    background-color: #70c3ff;
  }

  .alloyimage {
    background-color: #fd6a7f;
  }

  .alloytouch {
    background-color: #7f8ea0;
  }

  .soda {
    background-color: #89d04f;
  }
}

// 版块（作品）
.product {

  .item {
    display: block;
    border-radius: 4px;
    border: 1px solid #e4ecf3;
    margin-bottom: 10px;
    overflow: hidden;

    transition: all .3s ease;

    &:hover {
      transform: translate(0, -6px);
      box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
    }

    &:hover img {
      transform: scale(1.2);
    }
  }

  .img-wrap {
    overflow: hidden;
  }

  img {
    width: 100%;
    transition: all .3s ease;
  }

  p {
    text-align: center;
    margin: 10px;
    font-size: 14px;
    color: #313131;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// 版块（博客）
.blog {

  .inner {
    min-height: 325px;
    padding: 0 10px;
    border: 1px solid #e4ecf3;
    border-radius: 4px;
    margin-bottom: 10px;
  }

  h3 {
    line-height: 1.1;
    padding: 15px 0;
    margin: 0;
    font-size: 16px;
    color: #616161;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;

    a {
      color: #337ab7;
      font-size: 16px;
      transform: scale(1.5);
      transform-origin: center bottom;

      &:hover {
        color: #f2b535;
      }
    }
  }

  ul {
    padding: 15px 0 0 5px;
    margin: 0;

    li {
      margin-bottom: 35px;
    }
    
    a {
      display: flex;
      line-height: 1;
      justify-content: space-between;
      align-items: center;
    }

    h5 {
      flex: 1;
      font-size: 16px;
      margin: 0;
    }

    span {
      display: block;
      width: 80px;
      margin-left: 10px;
    }

    h5, span {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    a {
      color: #616161;

      &:hover h5 {
        color: #f2b535;
      }
    }
  }

  .type {
    padding: 18px 10px;
    overflow: hidden;
  }

  .name {
    font-size: 16px;
    color: #333;
    margin: 10px 0 0;

    &:hover {
      color: #f2b535;
      cursor: pointer;
    }
  }

  .brief {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #c1c1c1;
  }

  img {
    width: 60px;
    height: 60px;
    margin-right: 5px;
    float: left;
  }
}

// 版块（明星）
.stars {

  .profile {
    border: 1px solid #e4ecf3;
    border-radius: 4px;
    text-align: center;
    padding: 20px 10px 0;
    margin-bottom: 10px;
    transition: all .3s ease;
    background-color: #f5f8fa;

    &:hover {
      transform: translateY(-6px);
      box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .3);
    }
  }

  .img-wrap {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;

    img {
      width: 100%;
    }
  }

  h5 {
    font-size: 18px;
    font-weight: 400;
    padding: 0 20px;
    margin: 20px 0 10px;
  }

  p {
    height: 60px;
    line-height: 60px;
    color: #919191;
    margin: 20px -10px 0 -10px;
    background-color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// 底部（版权、推广链接）
.footer {
  padding: 30px 0;
  background-color: #26282c;
  color: rgba(255, 255, 255, .4);

  .logo {
    margin-top: 10px
  }

  .slogan {
    font-size: 16px;
    margin: 20px 0 0;
  }

  .copyright {
    margin: 40px 0 0;
  }

  .title {
    font-size: 14px;
    color: rgba(255, 255, 255, .7);
  }

  a {
    display: block;
    line-height: 24px;
    color: rgba(255, 255, 255, .4);

    &:hover {
      text-decoration: underline;
      color: #f2b535;
    }
  }

  .social {
    margin-top: 25px;
    padding: 0 2px;
    text-align: center;
    font-size: 12px;

    img {
      max-width: 100%;
      width: 120px;
      height: 120px;
      margin-bottom: 10px;
    }
  }
}

@media (max-width: 992px) {
  .footer {
    .webmeta {
      text-align: center;
    }
    .copyright {
      margin-top: 10px;
    }
  }
}

 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-***patible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>AlloyTeam|腾讯全端 AlloyTeam 团队</title>
  <meta name="keywords" content="AlloyTeam 前端 腾讯 腾讯前端">
  <meta name="description" content="腾讯全端AlloyTeam团队">
  <link rel="shortcut icon" href="./favicon.ico">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <!-- 主导航 -->
  <nav class="navbar navbar-dark navbar-expand-lg fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">
        <h1 class="logo">AlloyTeam</h1>
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" href="javascript:;">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">博客</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">Github</a>
          </li>
          <li class="nav-item">
            <a class="nav-link hot" href="javascript:;">TWeb Conf</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">SuperStar</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">Web前端导航</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">关于</a>
          </li>
        </ul>
      </div>
    </div>  
  </nav>

  <!-- 轮播图 -->
  <div class="carousel slide" id="alloyCarousel" data-bs-ride="carousel" data-bs-interval="5000">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-bs-target="#alloyCarousel" data-bs-slide-to="0" class="active"></li>
      <li data-bs-target="#alloyCarousel" data-bs-slide-to="1"></li>
      <li data-bs-target="#alloyCarousel" data-bs-slide-to="2"></li>
      <li data-bs-target="#alloyCarousel" data-bs-slide-to="3"></li>
    </ol>
    <!-- Slides -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <a href="#">
          <div class="container hire-info">
            <p class="hire-name">腾讯AlloyTeam招聘Web+工程师<br>2023</p>
            <p class="hire-title">征不平凡的你</p>
          </div>
        </a>
      </div>
      <div class="carousel-item"></div>
      <div class="carousel-item">
        <a href="#">
          <div class="container item-info">
            <p class="title-name">Alloy前端周刊</p>
            <p class="title-desc">为您带来精彩有料的前端好文</p>
          </div>
        </a>
      </div>
      <div class="carousel-item">
        <a href="#">
          <div class="container item-info special">
            <p class="title-name">Omi</p>
            <p class="title-desc">开放现代的web组件化框架</p>
          </div>
        </a>
      </div>
    </div>
  </div>

  <!-- 版块（开源项目） -->
  <div class="container section project">
    <!-- 标题 -->
    <h2 class="title">OpenSource / 开源项目<small>种类众多的开源项目，让你爱不释手</small></h2>
    <div class="row items">
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <a href="#" class="omi">
          <img src="./assets/images/omi.png" alt="">
          <h3>OMI</h3>
          <p>开放现代的Web组件化框架</p>
        </a>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <a href="#" class="alloyimage">
          <img src="./assets/images/alloyimage.png" alt="">
          <h3>OMI</h3>
          <p>开放现代的Web组件化框架</p>
        </a>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <a href="#" class="alloytouch">
          <img src="./assets/images/alloytouch.png" alt="">
          <h3>OMI</h3>
          <p>开放现代的Web组件化框架</p>
        </a>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <a href="#" class="soda">
          <img src="./assets/images/soda.png" alt="">
          <h3>OMI</h3>
          <p>开放现代的Web组件化框架</p>
        </a>
      </div>
    </div>
    <div class="more">
      <a href="#">更多开源 &gt;</a>
    </div>
  </div>

  <!-- 版块（作品） -->
  <section class="container section product">
    <!-- 标题 -->
    <h2 class="title">Product / 作品<small>新奇好玩的作品，让你欲罢不能</small></h2>
    <div class="row items">
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <a href="javascript:;" class="item">
          <div class="img-wrap">
            <img src="./assets/uploads/codetank.jpg" alt="">
          </div>
          <p>Code Tank</p>
          <p>全世界首个Javascript程序员的在线编程对战游戏</p>
        </a>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <a href="javascript:;" class="item">
          <div class="img-wrap">
            <img src="./assets/uploads/alloyphoto.jpg" alt="">
          </div>
          <p>AlloyPhoto</p>
          <p>专业在线图像处理App</p>
        </a>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <a href="javascript:;" class="item">
          <div class="img-wrap">
            <img src="./assets/uploads/alloydesigner.png" alt="">
          </div>
          <p>AlloyDesigner</p>
          <p>新概念web开发工具</p>
        </a>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <a href="javascript:;" class="item">
          <div class="img-wrap">
            <img src="./assets/uploads/alloystick.jpg" alt="">
          </div>
          <p>AlloyStick</p>
          <p>HTML5骨骼动画引擎</p>
        </a>
      </div>
    </div>
    <div class="more">
      <a href="#">更多作品 &gt;</a>
    </div>
  </section>

  <!-- 版块（博客） -->
  <section class="container section blog">
    <!-- 标题 -->
    <h2 class="title">Blog / 博客<small>最新技术发展，业界前沿博客</small></h2>
    <div class="row items">
      <div class="col-lg-6">
        <div class="inner">
          <h3>最新博客 <a href="#">...</a></h3>
          <ul class="list-unstyled">
            <li>
              <a href="#">
                <h5>Web Worker 文献综述</h5>
                <span>TAT. ***tchen</span>
              </a>
            </li>
            <li>
              <a href="#">
                <h5>线程入门</h5>
                <span>TAT.vorshen</span>
              </a>
            </li>
            <li>
              <a href="#">
                <h5>给 JavaScript 插上多线程的翅膀 —— Web Worker 的 Promise 化实践</h5>
                <span>TAT.Duang</span>
              </a>
            </li>
            <li>
              <a href="#">
                <h5>脚本错误量极致优化-定位压缩且无 SourceMap 文件的脚本错误</h5>
                <span>TAT.joeyguo</span>
              </a>
            </li>
            <li>
              <a href="#">
                <h5>CSS Pixels</h5>
                <span>TAT.oliverzli</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="inner">
          <h3>博客分类 <a href="#">...</a></h3>
          <div class="row">
            <div class="type col-md-6">
              <img src="./assets/images/javascript.png" alt="">
              <p class="name">Javascript</p>
              <p class="brief">没看过这些，怎么敢说懂js</p>
            </div>
            <div class="type col-md-6">
              <img src="./assets/images/css.png" alt="">
              <p class="name">CSS</p>
              <p class="brief">神奇的CSS在哪里？</p>
            </div>
            <div class="type col-md-6">
              <img src="./assets/images/nodejs.png" alt="">
              <p class="name">Nodejs</p>
              <p class="brief">亿万级数据服务的秘密</p>
            </div>
            <div class="type col-md-6">
              <img src="./assets/images/mobile.png" alt="">
              <p class="name">移动Web开发</p>
              <p class="brief">PC转向移动，这是个问题</p>
            </div>
            <div class="type col-md-6">
              <img src="./assets/images/users.png" alt="">
              <p class="name">用户体验设计</p>
              <p class="brief">震惊！原来应用还可以这样设计</p>
            </div>
            <div class="type col-md-6">
              <img src="./assets/images/performance.png" alt="">
              <p class="name">Web性能优化</p>
              <p class="brief">丝般柔顺体验背后的真相</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 版块（超级明星） -->
  <section class="container section stars">
    <!-- 标题 -->
    <h2 class="title">SuperStar / 超级明星俱乐部<small>技术达人，最强大脑，前端先驱</small></h2>
    <div class="row items">
      <div class="col-lg-4">
        <div class="profile">
          <div class="img-wrap">
            <img src="./assets/uploads/jetyu.jpg" alt="">
          </div>
          <h5>JetYu 于涛</h5>
          <p>AlloyTeam 创始人</p>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="profile">
          <div class="img-wrap">
            <img src="./assets/uploads/dntzhang.jpg" alt="">
          </div>
          <h5>DntZhang 张磊</h5>
          <p>知名博主，多个开源框架作者</p>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="profile">
          <div class="img-wrap">
            <img src="./assets/uploads/dorsywang.jpg" alt="">
          </div>
          <h5>DorsyWang 王斌</h5>
          <p>数学达人，图像处理专家</p>
        </div>
      </div>
    </div>
    <div class="more">
      <a href="#">更多明星 ></a>
    </div>
  </section>

  <!-- 底部（版权、推广链接） -->
  <section class="footer">
    <div class="container">
      <div class="row">
        <div class="col-lg-5 webmeta">
          <img class="logo" src="./assets/images/logo.png" alt="">
          <h6 class="slogan">成为地球卓越的Web团队</h6>
          <p class="copyright">Copyright© 2023 AlloyTeam. All Rights Reserved.</p>
        </div>
        <div class="col-lg-2 d-none d-lg-block ">
          <h6 class="title">兄弟团队</h6>
          <a href="#">腾讯CDC</a>
          <a href="#">腾讯ISUX</a>
          <a href="#">腾讯TGideas</a>
          <a href="#">腾讯FERD</a>
          <a href="#">百度FEX</a>
          <a href="#">淘宝FED</a>
        </div>
        <div class="col-lg-2 d-none d-lg-block ">
          <h6 class="title">友情链接</h6>
          <a href="#">腾讯CDC</a>
          <a href="#">腾讯ISUX</a>
          <a href="#">腾讯TGideas</a>
          <a href="#">腾讯FERD</a>
          <a href="#">百度FEX</a>
          <a href="#">淘宝FED</a>
        </div>
        <div class="col-lg-3">
          <div class="row">
            <div class="col-md-6 col-xs-6 social">
              <img src="./assets/uploads/hm.jpg" alt="">
              <p>QQ群：162225981</p>
            </div>
            <div class="col-md-6 col-xs-6 social">
              <img src="./assets/uploads/hm.jpg" alt="">
              <p>微信公众号:AlloyTeam</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/index.js"></script>
</body>
</html>
转载请说明出处内容投诉
CSS教程_站长资源网 » 2023【黑马程序员】移动 Web 第五天（综合案例）
清道夫环保网

清道夫环保网

分享到：

发表评论

欢迎 访客 发表评论

一个令你着迷的主题！

查看演示 官网购买