AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【Vue3从零开始-实战】S3：使用CSS技巧实现首页布局

2022-09-27 324
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【Vue3从零开始-实战】S3：使用CSS技巧实现首页布局

@@DVBVTGC2D7ROIYF4YK_@O.png


前言


实战已经开始了！在前面两篇文章中，我们把tabbar和顶部地址栏走了布局，而且还把部分公共的SCSS做了封装。在本章节中，会将首页剩余的内容样式布局都写完，由于样式部分没什么重点去说的，所以文章会比较精简，其中部分CSS的技巧会单独说明。


搜索栏


%85XN$RC]EY6XB]HR$L0U`R.png


根据稿图的效果，我们直接开始编写DOM元素和样式了。


<div class="search">
  <span class="iconfont">&#xe632;</span>
  <span class="search__text">山姆会员商店优惠商品</span>
</div>
复制代码


  • icon图标还是和上一章节一样，在iconfont网站直接搜索并把下载下来的字体文件覆盖到assets下面的font文件夹中。


5}5Z1XQQCA7K{H){AM{C38U.png


.search {
  margin-bottom: .12rem;
  line-height: .32rem;
  background: #F5F5F5;
  color: #B7B7B7;
  border-radius: .16rem;
  .iconfont {
    display: inline-block;
    padding: 0 .08rem 0 .16rem;
    font-size: .16rem;
  }
  &__text {
    display: inline-block;
    font-size: .14rem;
  }
}
复制代码


  • 首页的搜索栏并不是一个input输入框，大家也可以用input框去实现哦。


6DLPKBDPUMIA_WKV6TYOCRK.png


banner


TWA(LD1BV@GA[GF%PWUN8M6.png


由于稿图中没有切图，所以我们可以自己去网上找一张图片即可。


<div class="banner">
      <img class="banner__img" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a8a16cef-f2b9-4644-b216-3b95bcb12602/a2320262-1180-40ac-b9ca-5c26af3c3ffd.jpg" />
</div>
复制代码
.banner {
  height: 0;
  overflow: hidden;
  padding-bottom: 22%;
  &__img {
    width: 100%;
    height: 0.86rem;
  }
}
复制代码


  • 在banner样式中，我们给banner设置了高度为0，overflow为hidden，并给了一个padding值。


  • 这是为了图片加载延迟导致页面抖动。


  • padding值是banner尺寸的宽高比。


~N5IKPO[`LU~`~GT7SU]XAX.png


图标列表


EFZB%[$AIW3(71{T)KE851L.png


<div class="icons">
    <div class="icons__item">
        <img class="icons__item__img" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a8a16cef-f2b9-4644-b216-3b95bcb12602/32b200e6-9af9-474d-865b-e11ae4709a68.png" />
        <p class="icons__item__desc">超市便利</p>
    </div>
</div>
复制代码


  • 这里是直接将icons__item的DOM元素复制粘贴了10次，为了文章过长，这里只粘贴部分代码。


.icons {
  display: flex;
  flex-wrap: wrap;
  margin-top: .16rem;
  &__item {
    width: 20%;
    &__img {
      display:block;
      width: .4rem;
      height: .4rem;
      margin: 0 auto;
    }
    &__desc {
      margin: .06rem 0 .16rem 0;
      text-align: center;
      color: $content-font-color;
    }
  }
}
复制代码


X3YGFTP{H8)@RH@3DYGEDCG.png


分隔条


LS{(7~PQCY}VC{P%Q62O__L.png


<div class="gap"></div>
复制代码
.gap {
  margin: 0 -.18rem;
  height: .1rem;
  background: $content-bgColor;
}
复制代码


  • 这一块就不细说了~~~


店铺列表


G3_S~C%W6[P`2WTZF$VYPTH.png

8M`67FD])@ZKQ~7`BB0~(MX.png


根据稿图我们需要把店铺列表进行布局，由于列表时需要滚动的，所以会复制粘贴许多一样的DOM元素去撑开列表。 但是文章中贴出来的代码还是只有一部分。


<div class="nearby">
    <h3 class="nearby__title">附近店铺</h3>
    <div class="nearby__item">
      <img
        src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a8a16cef-f2b9-4644-b216-3b95bcb12602/e9e2929d-f491-489d-8fa5-bd6223e67b06.png"
        class="nearby__item__img"
      >
      <div class="nearby__content">
        <div class="nearby__content__title">沃尔玛</div>
        <div class="nearby__content__tags">
          <span class="nearby__content__tag">月售1万+</span>
          <span class="nearby__content__tag">月售1万+</span>
          <span class="nearby__content__tag">月售1万+</span>
        </div>
        <p class="nearby__content__highlight">VIP尊享满89元减4元运费券（每月3张）</p>
      </div>
    </div>
</div>
复制代码
.nearby {
  &__title {
    margin: .16rem 0 .02rem 0;
    font-size: .18rem;
    font-weight: normal;
    color: $content-font-color;
  }
  &__item {
    display: flex;
    padding-top: .12rem;
    &__img {
      margin-right: .16rem;
      width: .56rem;
      height: .56rem;
    }
  }
  &__content {
    flex: 1;
    padding-bottom: .12rem;
    border-bottom: 1px solid #f1f1f1;
    &__title {
      line-height: .22rem;
      font-size: .16rem;
      color: $content-font-color;
    }
    &__tags {
      margin-top: .08rem;
      line-height: .18rem;
      font-size: .13rem;
      color: $content-font-color;
    }
    &__tag {
      margin-right: .16rem;
    }
    &__highlight {
      margin: .08rem 0 0 0;
      line-height: .18rem;
      font-size: .13rem;
      color: #E93B3B;
    }
  }
}
复制代码


O2L(S5G%W6HI7A[R`N`(KIW.png


  • 当我们去滚动内容元素时，会发现内容超出了，而且tabbar也移位了。


  • 这时候我们就需要手动添加滚动方向的样式。


.wrapper {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0.5rem;
  right: 0;
  padding: 0 0.18rem;
  overflow-y: auto;
}
复制代码
  • 在wrapper样式中，添加overflow-y: auto;即可。


~_(DZ)OKJ01G5U~J5`R4_1F.png


问题


按照首页这样的开发方式来看，App.vue页面里面的模板元素和样式就有大约300多行代码了，每次修改样式或者操作DOM元素的时候，就要上下翻很多次。


如果后期加上接口调用或者数据渲染的代码，一个页面起码超千行代码了。


所以我们需要进行代码拆分和精简。


在下一篇文章中，我们会对首页的代码进行优化，组件进行合理的拆分，然后使用v-for这样的vue指令来精简页面代码。


总结


本篇文章的内容主要是完善首页的代码，并没有做过多的说明。包括前面两篇文章的内容，主要是对布局和样式做了一些操作，如果大家已经对布局和样式有了很深的了解，可以忽略不看的，关键点就从下一篇文章开始正式使用vue的框架进行页面渲染的操作。

文章标签：
JavaScript
前端开发
关键词：
CSS布局
CSS实战
CSS vue3
实战CSS
vue3实战CSS
蜡笔小心_
目录
相关文章
Yaiba123
|
4天前
|
前端开发 JavaScript
使用Vue+CSS实现汉堡图标过渡为叉号图标，有点意思
本文分享了如何使用Vue和CSS实现一个汉堡图标在点击时过渡为叉号图标的动画效果，并提供了详细的实现代码和效果演示。
Yaiba123
11 0
使用Vue+CSS实现汉堡图标过渡为叉号图标，有点意思
热爱技术的小郑
|
4天前
|
JavaScript
Vue中组件化编码 完成任务的添加、删除、统计、勾选需求（实战练习三完结）
这篇文章展示了如何在Vue中实现任务添加、删除、勾选和统计功能，通过组件间参数传递和方法实现，提供了App.vue、TheList.vue、TheItem.vue、TheHeader.vue和TheFooter.vue组件的主要代码示例。
热爱技术的小郑
11 0
Vue中组件化编码 完成任务的添加、删除、统计、勾选需求（实战练习三完结）
热爱技术的小郑
|
4天前
|
JavaScript
Vue中组件化编码使用（实战练习一）
这篇文章是关于Vue中组件化编码的实战练习，介绍了组件化编码的流程、组件间参数传递的方法以及如何通过组件配合完成一个需求。内容包括了组件拆分、动态组件实现、交互绑定事件的步骤，以及使用props进行父子组件通信的注意事项。文章还提供了一个待办事项列表的静态页面效果和相关代码示例，包括TheFooter.vue、TheHeader.vue、TheItem.vue、TheList.vue和App.vue等组件的代码。
热爱技术的小郑
4 0
Vue中组件化编码使用（实战练习一）
李木子2024
|
15天前
|
前端开发 JavaScript Serverless
揭秘CSS布局神器：vw/vh、rem、%与px大PK，掌握它们，让你的网页设计秒变高大上，面试难题迎刃而解！
【8月更文挑战第4天】在Web开发中，合理选择CSS单位对响应式布局至关重要。本文探索viewport单位（vw/vh）、rem、百分比（%）及像素（px）的基础知识与应用场景。通过代码示例，展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后，模拟面试题，介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
李木子2024
46 8
热爱技术的小郑
|
4天前
|
数据采集 JavaScript
Vue中组件化编码使用、实现组件之间的参数传递（实战练习二）
这篇文章介绍了Vue中组件化编码的实现和组件间参数传递的方法，通过实战练习展示了从App.vue向TheList.vue和TheItem.vue传递数据的流程和代码示例。
热爱技术的小郑
10 0
白如意i
|
5天前
|
前端开发
CSS Grid 布局：span 关键字
CSS Grid 布局：span 关键字
白如意i
14 0
刘志辉~
|
7天前
|
前端开发 容器
css中弹性布局使用方法
css中弹性布局使用方法
刘志辉~
16 0
刘志辉~
|
7天前
|
编解码 前端开发 容器
CSS弹性布局：打造响应式与灵活的网页设计
CSS弹性布局：打造响应式与灵活的网页设计
刘志辉~
19 0
啊猪是的读来过倒
|
30天前
|
存储 JavaScript API
Vue 全局状态管理新宠：Pinia实战指南
 随着Vue.js项目的日益复杂，高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库，以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia，从安装到应用，轻松实现Vue.js项目的全局状态管理，提升开发效率和项目可维护性。
啊猪是的读来过倒
75 2
1941623231718325
|
1月前
|
编解码 前端开发 容器
CSS Flex布局实战案例：构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤，我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码，还让我们能够轻松实现复杂的布局效果，如响应式设计。在实战中，掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
1941623231718325
35 2