css实现win10开始菜单布局

CSS实现Win10开始菜单布局

Win10的开始菜单一直以来都是一个受欢迎的界面布局。下面将介绍如何使用CSS实现相似的布局。

/* 开始菜单的容器 */#start-menu {
      width: 300px;
      height: 400px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
/* 开始菜单中的头部 */#start-menu .header {
      width: 100%;
      height: 50px;
      background-color: #0078d7;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
}
/* 开始菜单中的内容 */#start-menu .content {
      width: 100%;
      height: 350px;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      overflow-y: auto;
}
/* 开始菜单中的内容项 */#start-menu .item {
      width: calc(33.33% - 14px);
      height: 80px;
      margin: 7px;
      background-color: #f2f2f2;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      cursor: pointer;
}
/* 开始菜单中的内容项图标 */#start-menu .icon {
      font-size: 30px;
      margin-bottom: 5px;
}
/* 开始菜单中的内容项名称 */#start-menu .name {
      font-size: 14px;
      text-align: center;
}
    

HTML的主要结构应该像这样：

div id="start-menu">
      div class="header">
        span>
    Windows/span>
        i class="fa fa-times-circle">
    /i>
      /div>
      div class="content">
        div class="item">
          i class="fa fa-windows icon">
    /i>
          span class="name">
    我的电脑/span>
        /div>
        div class="item">
          i class="fa fa-file-text-o icon">
    /i>
          span class="name">
    我的文档/span>
        /div>
        !-- 其他内容项 -->
      /div>
    /div>
    

这里只用了FontAwesome的图标来代替Win10菜单项的图标。你可以使用其他的图标库或使用自己的图片。

希望这篇文章可以帮助你实现自己的Win10开始菜单布局。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！