超市订单管理系统

乌索普-

于 2020-10-15 13:53:07 发布

阅读量654

点赞数

分类专栏：练习项目文章标签： css html html5 css3 less

本文链接：https://blog.csdn.net/weixin_47000135/article/details/109095553

版权

练习项目专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这个项目比较简单，目前还在完善，根据下面这张图自己写的界面
在这里插入图片描述

首页

这里主要有两部分，nav和container部分，container部分用缩略图就很快写出来了，排版用弹性盒（display：flex， justify-content: space-between;）
在这里插入图片描述
代码如下：用的是boostrap的缩略图进行排版

  <!-- 导航条 -->
    <nav class="navbar navbar-default">
      <div class="">
        <h3 class="navbar-text">超市订单管理系统</h3>
        <span><a href="/web/login.html"><i class="fas fa-user"></i> 请先登录 </a></span>
      </div>
    </nav>
    <!-- 内容区 container -->
    <div class="container row">
        <div class="col-sm-5 col-md-3">
          <div class="thumbnail">
            <img src="./image/01.jpg" alt="七彩祥云">
            <div class="caption">
              <h4 class="text-center">七彩祥云便利贴 <small>good luck</small></h4>
              <p class="text-center">价格：5￥</p>
            </div>
          </div>
        </div>
        <div class="col-sm-5 col-md-3">
          <div class="thumbnail">
            <img src="./image/02.jpg" alt="七彩祥云">
            <div class="caption">
              <h4 class="text-center">铲屎的去哪了 <small>朕乏了</small></h4>
              <p class="text-center">价格：5￥</p>
            </div>
          </div>
        </div>

        <div class="col-sm-5 col-md-3">
          <div class="thumbnail">
            <img src="./image/03.jpg" alt="七彩祥云">
            <div class="caption">
              <h4 class="text-center">复古贴纸 <small>cute</small></h4>
              <p class="text-center">价格：5￥</p>
            </div>
          </div>
        </div>

        <div class="col-sm-5 col-md-3">
          <div class="thumbnail">
            <img src="./image/04.jpg" alt="七彩祥云">
            <div class="caption">
              <h4 class="text-center">搞怪书签 <small>快逃！</small></h4>
              <p class="text-center">价格：5￥</p>
            </div>
          </div>
        </div>
    </div>

1.登录界面

在这里插入图片描述
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>login</title>
  <link rel="stylesheet" href="../font/bootstrap.min.css">
  <link rel="stylesheet" href="../css/login.css">
</head>
<body>
  <div class="container row">
    <h3 class="text-center">超市订单管理系统</h3>
    <hr>
    <!-- 右边登录表单 -->
    <div class="col-sm-4"></div>
   <div class="Form  col-sm-4">
    <form action="" class="form-horizontal">
      <h3 class="text-center">登录</h3>
      <hr>
      <div class="form-group">
        <div>
          <input type="text" class="form-control" placeholder="Name">
        </div>
      </div>

      <div class="form-group">
          <input type="password" class="form-control" placeholder="Password">
          <a href="#"><p class="text-right text-primary">忘记密码</p></a>
        </div>

        <div class="form-group">
          <div class="btns">
            <button class="btn btn-primary btn-block">登录</button>
            <button class="btn btn-info btn-block">取消</button>
          </div>
      </div>
    </form>
   </div>
   <div class="col-sm-4"></div>
  </div>
  
</body>
</html>



······························less················
body{
/*关掉Window的滚动条*/
  overflow-y: hidden;
  overflow-x: hidden;
}
/* 整体样式 */
.container{
  width: 100%;
  height: 600px;
  background-image: url(../image/login.jpg);

/*登录表单 */
.Form{

  form{
    margin-top: 30px;
    height: 400px;
  
    }
}

}

2.首页

登录成功后有三个选择，这一块用的面板写的，代码在下方
在这里插入图片描述
点击下方三个链接都可进入对应的操作，代码如下：

   <!-- 导航条 -->
    <nav class="navbar navbar-default">
      <div class="">
        <h3 class="navbar-text">超市订单管理系统</h3>
      </div>
    </nav>
    <!-- 内容区 container -->
    <div class="container">
     <div class="work">
      <h2 class="text-center">登录成功</h2>
      <br>
      <div class="panel panel-primary">
        <div class="panel-heading"><h4>请选择您要进行的操作：</h4></div>
        <div class="panel-body">
          <a href="./user.html" class="btn-group btn-group-justified" role="group">用户管理</a>
          <a href="./supplier.html" class="btn-group btn-group-justified" role="group">供应商管理</a>
          <a href="./order.html" class="btn-group btn-group-justified" role="group">订单管理</a>
        </div>
      </div>
     </div>
    </div>
    
    下面是less代码
······························index.less·················
body{
  overflow-y: hidden;
  overflow-x: hidden;
}
.container{
  height: 600px;
  width: 100%;
  margin-top: -20px;
  background-image: url(../image/login.jpg);
  .work{
    width: 400px;
    margin:0 auto;
    margin-top: 50px;
  }
}

用户管理

在这里插入图片描述
其主要代码如下：

 <!--  导航条 -->
 <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- 头部 -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">超市管理系统</a>
    </div>    
    <!-- 导航链接 -->
    <div class="collapse navbar-collapse" >
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">用户管理 <span class="sr-only">(current)</span></a></li>
        <li><a href="./supplier.html">供应商管理</a></li>
        <li><a href="./order.html">订单管理</a></li>
        <li><a href="./index.html">返回主页</a></li>
      </ul>
       <!-- 搜索框 -->
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
      </form>
       <!-- 登录 -->
      <ul class="nav navbar-nav navbar-right">
        <span><a href="#"><i class="fas fa-user"></i> 风流倜傥 </a>您好！</span>
      </ul>
    </div>
  </div>
</nav>
  <!-- 大容器container -->
  <div class="container">
    <table class="table table-light table-hover ">
      <tbody>
        <thead>
          <tr>
            <th>id</th>
            <th>用户名</th>
            <th>密码</th>
            <th>性别</th>
            <th colspan="2">电话</th>
          </tr>
        </thead>

        <tr>
          <td>001</td>
          <td>周杰伦</td>
          <td>12345</td>
          <td>男</td>
          <td>123456789</td> 
          <td><a href="./userInfo.html">用户具体信息</a></td>
        </tr>
        
        <tr>
          <td>002</td>
          <td>宋仲基</td>
          <td>67890</td>
          <td>男</td>
          <td>34567890</td>
          <td><a href="./userInfo.html">用户具体信息</a></td>
        </tr>

        <tr>
          <td>003</td>
          <td>朴宝剑</td>
          <td>34567</td>
          <td>男</td>
          <td>2345623</td>
          <td><a href="./userInfo.html">用户具体信息</a></td>
        </tr>

        <tr>
          <td>004</td>
          <td>石原里美</td>
          <td>12345</td>
          <td>女</td>
          <td>123423456</td>     
          <td><a href="./userInfo.html">用户具体信息</a></td>
        </tr>
      </tbody>
    </table>
    <div class="btns">
      <a href="./orderInfo.html" class="btn btn-primary btn-sm">修改 <i class="fas fa-marker"></i></a>
      <button class="btn btn-danger btn-sm">删除 <i class="fas fa-eraser"></i></button>
      <button class="btn btn-success btn-sm">添加 <i class="fas fa-plus"></i></button>
    </div>
    <button class="btn btn-default password ">修改密码 <i class="fas fa-edit"></i></button>
  </div>