vue项目学习：19-detail页面的路由跳转及banner的布局

网页布局与线性渐变

最新推荐文章于 2024-10-26 11:56:42 发布

最新推荐文章于 2024-10-26 11:56:42 发布 · 1k 阅读

web前端专栏收录该内容

51 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的网页布局方法，重点讲解了如何通过线性渐变来增强页面视觉效果。文章提供了一个具体的例子，展示了包含图片、标题和数字等元素的布局，并详细说明了CSS样式设置。

首先：路由的设置

banner布局如下：

<div class="banner">
    <img class="banner-img" src="http://img1.qunarzz.com/sight/p0/1803/7b/7b023b9728f0834fa3.img.jpg_600x330_5f4c76f7.jpg">
    <div class="desc">
      <div class="desc-title">世界花卉大观园AAAA景区</div>
      <div class="desc-num">
        <span class="iconfont desc-icon"></span>
        <span class="number">39</span>
      </div>
    </div>
  </div>

<style lang="stylus" scoped>
.banner
  position relative
  overflow hidden
  height 0
  padding-bottom 53.3%
  .banner-img
    width 100%
  .desc
    display flex
    position absolute
    left 0
    right 0
    bottom 0
    line-height .6rem
    color #fff
    background linear-gradient(top, rgba(0, 0, 0, 0),rgba(0, 0, 0, .8))
    .desc-title
      flex 1
      padding 0 .2rem
      font-size .32rem
    .desc-num
      height .4rem
      line-height .4rem
      padding 0 .4rem
      background rgba(0, 0, 0, .8)
      border-radius .2rem
      margin-top .1rem
      font-size .24rem
      .desc-icon
        font-size .24rem
</style>

这里用到了线性渐变。