分块显示的页面布局

最新推荐文章于 2024-07-23 20:15:47 发布

原创最新推荐文章于 2024-07-23 20:15:47 发布 · 408 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文探讨了HTML中的分块显示技术，如何通过CSS实现灵活的页面布局。内容包括块级元素的理解、浮动布局、Flexbox和Grid布局的使用，以及在不同浏览器间的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="category-info">
    <div class="menu-left">
      <ul>
        <li class="menu-item" v-for="(menu, index) in menus" :key="index" :class="{current: currentIndex == index}"
          @click="select(index)">
          {{ menu.name }}
        </li>
      </ul>
    </div>
    <div class="menu-right" ref="itemList">
      <ul>
        <li class="cate" v-for="cate in menus" :key="cate.id" ref="cate">
          <div class="title">{{ cate.name }}</div>
          <ul class="cate-item-box">
            <li class="cate-item" v-for="item in cate.sub" :key="item.id">
              <router-link :to="'/goodslist/' + item.id">
                <img :src="item.image">
                <span>{{ item.name }}</span>
              </router-link>
            </li>
          </ul>
        </li>
        <li class="cate-bottom"></li>
      </ul>
    </div>
  </div>