vue首页多模块布局(标题布局)

这篇具有很好参考价值的文章主要介绍了vue首页多模块布局(标题布局)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue首页多模块布局(标题布局),vue

<template>

    <div class="box">

      <div class="content">
        <div class="box1" style="background-color: rgb(245,23,156)">第一个</div>
        <div class="box2" style="background-color: rgb(12,233,3)">第二个</div>
        <div class="box3" style="background-color: rgb(109,5,255)">第三个</div>
        <div class="box4" style="background-color: rgb(233,187,3)">第四个</div>
        <div class="box5" style="background-color: rgb(233,3,34)">第五个</div>
        <div class="box6" style="background-color: rgb(245,23,156)">第六个</div>
        <div class="box7" style="background-color: rgb(3,179,233)">第七个</div>
        <div class="box8" style="background-color: rgb(233,187,3)">第八个</div>
      </div>

    </div>

</template>

<script>
export default {
  components: {//组件

  },
  provide() {
    return {};
  },
  data() {
    return {};
  },
  created() { //创建时

  },
  methods: {}
};
</script>

<style scoped>
  .box{
    height: calc(100% - 40px);
    background-color: red;
    padding: 20px;
  }
  .content{
    width: 100%;
    height: 100%;
    background-color: #fff;

    /*  设置网格布局  */
    display: grid;
    /*  设置列数 每个行岁站的份数  */
    grid-template-columns: repeat(3,1fr);
    /*  设置行数 每个行所占的份数  */
    grid-template-rows: repeat(3,1fr);
    /*  网格间距  */
    gap: 10px;

  }
  /*  跨列  */
  .box7{
    grid-column: span 2;
  }

</style>

vue首页多模块布局(标题布局),vue文章来源地址https://www.toymoban.com/news/detail-718334.html

<template>

    <div class="box">

      <div class="content">
        <div class="box0" style="background-color: #409EFF">
          此处未标题
        </div>
        <div class="box1" style="background-color: rgb(245,23,156)">第一个</div>
        <div class="box2" style="background-color: rgb(12,233,3)">第二个</div>
        <div class="box3" style="background-color: rgb(109,5,255)">第三个</div>
        <div class="box4" style="background-color: rgb(233,187,3)">第四个</div>
        <div class="box5" style="background-color: rgb(233,3,34)">第五个</div>
        <div class="box6" style="background-color: rgb(245,23,156)">第六个</div>
        <div class="box7" style="background-color: rgb(3,179,233)">第七个</div>
        <div class="box8" style="background-color: rgb(233,187,3)">第八个</div>
      </div>

    </div>

</template>

<script>
export default {
  components: {//组件

  },
  provide() {
    return {};
  },
  data() {
    return {};
  },
  created() { //创建时

  },
  methods: {}
};
</script>

<style scoped>
  .box{
    height: calc(100% - 40px);
    background-color: red;
    padding: 20px;
  }
  .content{
    width: 100%;
    height: 100%;
    background-color: #fff;

    /*  设置网格布局  */
    display: grid;
    /*  设置列数 每个行岁站的份数  */
    grid-template-columns: repeat(3,1fr);
    /*  设置行数 每个行所占的份数  这种是统一样式固定排列
    grid-template-rows: repeat(3,1fr);*/

    grid-template-rows: 50px 1fr 1fr 1fr;/* 解读: 第一行50px高度 后面默认统一 */


    /*  网格间距  */
    gap: 10px;

  }
  /*  跨列  */
  .box7{
    grid-column: span 2;
  }
  .box0{
    grid-column: span 3;
  }

</style>

到了这里,关于vue首页多模块布局(标题布局)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 移动端布局之流式布局1(百分比布局):流式布局基础、案例:京东移动端首页1

    流式布局,就是百分比布局,也称非固定像素布局 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充 流式布局方式是移动web开发使用的比较常见的布局方式 max-width 最大宽度(max-height 最大高度) min-width 最小宽度(min-height

    2024年02月07日
    浏览(50)
  • 详解织梦dedecms做的网站首页标题篡改跳转赌博网站解决方案

    织梦dedecms因其强大功能,简单实用的优点常常被用来做企业网站,程序开源使用的人多了网站漏洞多会有中毒的情况,常见的有一种,首页标题描述被篡改,百度快照收录点击后跳转的赌博网站,怎么解决这个问题呢? 首页要做的是搜索程序里的恶意php文件,对比官

    2024年02月02日
    浏览(42)
  • 小程序搭建OA项目首页布局界面

    首先让我们来学习以下Flex布局 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 display: ‘flex’ 容器默认存在两根轴:水平的主

    2024年02月08日
    浏览(42)
  • “Flex弹性布局、轮播图mock遍历数据和首页布局解析与实践“

    在现代网页开发中,灵活性和响应式布局是至关重要的。为了实现这一目标,前端开发人员需要掌握各种先进的技术。本篇博客将深入介绍和讨论三个主要主题:Flex弹性布局、轮播图mock遍历数据和首页布局。我们将逐步展示这些技术的使用方法,并提供丰富的实例和信息。

    2024年02月07日
    浏览(47)
  • 【无标题】C++内存布局

    内核空间  ZONE_HIGHMEM  高端内存 32bit映射高于1G的物理内存 内核空间  ZONE_NORMAL   内核空间  ZONE_DMA  直接内存访问 加快磁盘和内存数据交互速度 环境变量 命令行参数 栈区 共享库加载区 堆区 .bss     未初始化 和 初始化为零  (未初始化和初始化为0 全局变量) .data   

    2024年02月10日
    浏览(55)
  • 【小程序从0到1】首页布局案例的实现

    欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了 【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥 R e a c t / 小程序 React/小程序 R e a c t / 小程序 🔥,中间穿插了一些基础知识的回顾 🌈博客主

    2024年02月03日
    浏览(27)
  • 微信小程序首页-----布局(详细教程赶快收藏吧)

                                                      🎬 艳艳耶✌️:个人主页                                                   🔥 个人专栏 :《Spring与Mybatis集成整合》《Vue.js使用》                                                   ⛺️ 越努力 ,越幸运

    2024年02月04日
    浏览(50)
  • 微信小程序首页、界面布局、功能简洁(示例三)

    直接上具体代码: 1、js代码 2、wxml代码 3、wxss代码 4、json代码 界面中包含的图片地址可自行修改。页面布局简洁,功能简单,没有写具体的监听事件,只是简单的将监听进行了绑定,如需要具体的监听功能事件,需要根据自己的需求进行修改呦,如需更多示例,进我主页呦

    2024年01月24日
    浏览(58)
  • 微信小程序首页、界面布局、自定义顶部(示例一)

    具体界面见下图: 如需界面中引用的图片文件和更多功能,请滑动至底部查看下载链接,可下载完整版,下载后直接使用微信开发者工具打开即可,完整版功能更详细呦。当前界面的布局样式代码如下(如存在不足之处,请根据具体需求,自行修改): 1、js代码: 2、wxml代

    2024年02月12日
    浏览(42)
  • draggable + grid 拖拽插件 + 网格布局 动态生成首页模版

    背景:         1、首页模板由多个子组件组成,如图表、新闻、公告、轮播图等,一般都由前端引入子组件,写在固定的位置上,最终形成一个固定的首页模板;         2、像这样直接在代码中写死的首页没有灵活性,不同用户想展示出来的首页模板千篇一律;        

    2024年02月01日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包