前端:卡片风格的Table

实现点击栏目,对应切换到该栏目并且显示内容,比如下图:
前端:卡片风格的Table_第1张图片
这里我应用了:layUI经典模块化前端框架官网

需要我们下载layui对应的css和js框架,代码中我也加上了对应的注释

直接看代码:


<html>
<head>
  <meta charset="utf-8">
  <title>卡片风格的Tabtitle>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="C:\Users\Administrator\Desktop\layui-v2.4.5\layui\css\layui.css"  media="all">
  
head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>卡片风格的Tablegend>
fieldset>
<div class="layui-tab layui-tab-card">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置li>
    <li>用户管理li>
    <li>权限分配li>
    <li>商品管理li>
    <li>订单管理li>
  ul>
  <div class="layui-tab-content" style="height: 100px;">
    <div class="layui-tab-item layui-show">默认宽度是相对于父元素100%适应的,你也可以固定宽度。div>
    <div class="layui-tab-item">用户管理内容div>
    <div class="layui-tab-item">权限分配内容div>
    <div class="layui-tab-item">商品管理内容div>
    <div class="layui-tab-item">订单管理内容div>
  div>
div>
<script src="C:\Users\Administrator\Desktop\layui-v2.4.5\layui\layui.js" charset="utf-8">script>

<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
});
script>
body>
html>

你可能感兴趣的:(前端)