HTML 小型进销库存界面模板

已于 2022-10-17 12:56:35 修改
阅读量1.1k 收藏 13
点赞数 3
分类专栏： HTML+CSS 文章标签： html css css3
于 2022-05-18 18:20:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68548138/article/details/124848095
版权

文章目录

登陆界面

在这里插入图片描述

<title>登陆</title>
    <style>
        *{
            margin: 0 auto;
            padding: 0;
        }
        div{
            margin-top: 40px;
            text-align: center;
            width: 400px;
            height:170px;
            background-color: #94EE94;
            vertical-align: middle;
            line-height: 65px;
        }
        form p{
            line-height: 25px;
        }
    </style>
</head>
<body>
    <div>
        <h2>小型进销存系统</h2>
        <form action="主界面.html">
            <p>用户名: <input type="text" name="userName" required pattern="[a~z]{3}" /></p>
            <p>密&nbsp;&nbsp;&nbsp;码: <input type="password" name="password" pattern="[a~z]{3}"/></p>
            <p><input type="submit" value="登陆"></p>
        </form>
    </div>
</body>

主界面

在这里插入图片描述

<title>主界面</title>
    <style>
        *{
            margin: 0 auto;
            padding: 0;
        }
        body{
            width: 700px;
            height: 270px;
            position: relative;
        }
        /* 头部 */
        .top{
            margin-top: 100px;
            line-height: 30px;
            text-indent: 1em;
            width: 700px;
            height: 30px;
        }
        /* 左侧导航 */
        .left{
            line-height: 50px;
            width: 146px;
            height: 240px;
            float: left;
        }
        li{
            list-style: none;
            text-indent: 1em;
        }
        /* 右侧界面 */
        .right{
            border: 2px solid blue;
            width: 550px;
            height: 240px;
            float: left;
        }
        .right1 h2{
            line-height: 240px;
            text-align: center;
        }
        
    </style>
</head>
<body>
    <div class="top">
        欢迎,李四,<a href="登陆.html">退出登陆</a>
    </div>
    <div class="left">
        <ul>
            <li><a href="销售.html" target="main">销售</a></li>
            <li><a href="销售信息查询.html" target="main">销售信息查询</a></li>
            <li><a href="库存.html" target="main">查看库存</a></li>
        </ul>
    </div>
    <div class="right">
        <div class="right1">
            <h2>欢迎使用小型进销存系统</h2>
            <iframe name="main" frameborder="0" src="销售.html" width="550" height="250" >欢迎使用小型进销存系统</iframe>
        </div>
    </div>
</body>

销售界面

在这里插入图片描述

    <title>销售</title>
    <style>
        *{
            margin: 0 auto;
            padding: 0;
        }
        div{
            margin-top:20px ;
            width: 430px;
            height: 220px;
        }
        tr td{
            padding: 5px 5px 5px ;
            line-height: 20px;
        }
      
    </style>
</head>
<body>
    <div>
        
        <form action="">
            <table border="0">
                <tr><td colspan="2"><h3>添加销售:</h3></td></tr>
                <tr>
                    <td>商品名称:</td><td><select name="" id="">
                        <option value="">--请选择商品--</option>
                        <option value="1">咖啡</option>
                        <option value="2">纯净水</option>
                        <option value="3">绿茶</option>
                        <option value="4">冰红茶</option>
                        <option value="5">纯牛奶</option>
                        <option value="6">纯牛奶</option>
                        <option value="7">可口可乐</option>
                    </select></td>
                </tr>
                <tr><td>销售单价:</td><td><input type="text" placeholder="格式*.**" required pattern="\d?\.\d{2}"/></td></tr>
                <tr><td>销售数量: </td><td><input type="number" name="" id="" required ></td></tr>
                <tr><th colspan="2"><input type="submit" value="保存"/></th></tr>
            </table>
        </form>
    </div>
</body>

库存界面

在这里插入图片描述

<title>库存</title>
    <style>
        *{
            margin: 0 auto;
            padding: 0;
        }
        div{
            width: 450px;
            height: 240px;
            position: relative;
        }
        .div:after{
            content: " ";
            display: block;
            clear: both;
        }
        h3{
            position: absolute;
            text-indent: 1em;
        }
        p{
            position: absolute;
            left: 40%;
        }
        h3,p{
            height: 40px;
            line-height: 40px;
            width: 220px;
        }
        h1{
            height: 240px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
         <h3>查看库存</h3>
         <form action="">
             <p>商品名称:</td><td><select name="" id="">
                <option value="">--请选择商品--</option>
                <option value="1">咖啡</option>
                <option value="2">纯净水</option>
                <option value="3">绿茶</option>
                <option value="4">冰红茶</option>
                <option value="5">纯牛奶</option>
                <option value="6">纯牛奶</option>
                <option value="7" selected>可口可乐</option>
            </select>
            <input type="submit" value="查询">
        </p>
         </form>
         <h1>
             该商品的库存数量是:43
        </h1>
    </div>
</body>

库存界面

在这里插入图片描述

    <title>销售信息查询</title>
    <style>
        *{
            margin: 0 auto;
            padding: 0;
        }
        div{
            margin-top:10px;
            position: relative;
            width: 550px;
            height: 240px;
        }
        p,h3{
            padding: 1px 5px 5px;
            font-size: 15px;
        }
        h3{
            position: relative;
            float: left;
            line-height: 20px;
            width: 120px;
            text-indent: 1em;
        }
        p{
            position: absolute;
            float: right;
            left: 50%;
            top: -1%;
        }
       table{
           width: 540px;
           height: 200px;
       }
        tr td,th{
            font-size: 14px;

        }
        tr td{
            text-align: center;
            padding: 0px 6px 0px;
        }
        tr th{
            background-color: #ADDBE7;
        }
        tr:nth-child(2n+3){
            background-color: #96EB94;
        }
        tr:nth-of-type(7){
            background-color: #fff;
        }

    </style>
</head>
<body>
    <div>
        <form action="">
        <h3>销售信息查询:</h3>
        <p>排序方式
            <select name="" id="">
                <option value="">商品</option>
                <option value="">单价</option>
                <option value="">数量</option>
                <option value="">总价</option>
                <option value="" selected>销售日期</option>
                <option value="" >销售员</option>
            </select>
            <input type="submit" value="提交">
        </p>
        <table border="1">
            <tr><th>ID</th><th>商品</th><th>单价</th><th>数量</th><th>总价</th><th>销售日期</th><th>销售员</th></tr>
            <tr><td>7</td><td>可口可乐</td><td>28.00</td><td>1000</td><td>28000.00</td><td>2012-08-09</td><td>李四</td></tr>
            <tr><td>6</td><td>纯牛奶</td><td>25.00</td><td>100</td><td>2500.00</td><td>2012-08-07</td><td>赵六</td></tr>
            <tr><td>5</td><td>纯牛奶</td><td>25.00</td><td>50</td><td>1250.00</td><td>2012-08-06</td><td>赵六</td></tr>
            <tr><td>4</td><td>冰红茶</td><td>27.00</td><td>500</td><td>13500.00</td><td>2012-07-31</td><td>赵六</td></tr>
            <tr><td>3</td><td>绿茶</td><td>27.00</td><td>400</td><td>10800.00</td><td>2012-07-29</td><td>李四</td></tr>
            <tr><td colspan="7"><a href="">首页</a>|<a href="">上一页</a>|<a href="">下一页</a>|<a href="">末页</a>&nbsp;第1页/共2页(7条记录)</td></tr>
        </table>
        </form>
    </div>
</body>
[微信紅包]恭喜发財，大吉大利！
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML页面模板代码
weixin_30498807的博客
01-12 1万+
作者声明：本博客中所写的文章，都是博主自学过程的笔记，参考了很多的学习资料，学习资料和笔记会注明出处，所有的内容都以交流学习为主。有不正确的地方，欢迎批评指正 HTML页面模板代码 常用的页面模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...
进销存管理系统静态前端页面
01-02
完整的进销存前端页面，包括css js 等文件，以蓝色为主的前端界面。
蓝色简洁进销存管理系统HTML模板
11-17
一款蓝色简洁进销存管理系统HTML模板
前端纯html模板（销售管理系统）
02-21
前端开发可以借鉴，后台开发可以直接使用的html代码，包括基础信息的样式及框架。
ERP管理系统静态模板 HTML模板
01-02
商品销售企业ERP管理系统模板，商品库存ERP管理模板，简单实用，全套模板，包括首页、库房管理、产品管理、订单管理、财务管理、客户管理、员工管理等后台管理页面模板。
[附源码]JAVA+ssm基于HTML的企业进销存管理系统（程序+Lw)
苏南学长
03-21 367
项目运行环境配置：Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：SSM + mybatis + Maven + Vue 等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。
Python仓库管理系统源代码，库存管理系统源码，基于flask，内含数据库文件，已实现出入库、库存预警，库存搜索等功能
Python代码大全
12-01 5178
Python仓库管理系统源代码，库存管理系统源码，基于flask，内含数据库文件，已实现出入库、库存预警，库存搜索等功能。已实现三大功能：库存管理（出库、入库、低库存预警、物品搜索），预算统计，出入库记录导出。
基于SpringBoot的网页版进销存-2.0版本
chenjian723122704的专栏
06-10 3137
在去年，刚刚开始学习java web开发的时候开发了一版网页版的进销存。
使用web写一个库存管理系统的页面
weixin_42598278的博客
02-13 245
如果要使用web开发一个库存管理系统的页面，可以使用HTML、CSS、JavaScript三种技术。 HTML：用于定义页面的结构和内容，包括文本、图像、表格等。 CSS：用于定义页面的样式，例如字体、颜色、背景等。 JavaScript：用于实现页面的交互和动态效果，例如弹出提示框、读取数据库内容等。 通过使用这三种技术，可以实现库存管理系统的页面，以实现对库存信息的管理和操作。 ...
用CSS和HTML写一个水果库存静态页面
最新发布
捉只树袋熊的博客
07-30 1224
用CSS和HTML写一个水果库存静态页面
蓝色简洁进销存管理系统HTML模板.zip
05-24
蓝色简洁进销存管理系统HTML模板，DIV CSS布局设计，全套模板，包括分类管理、添加分类、库存管理、添加商品、入库管理、商品入库、预警信息设置、添加预警、出库管理、商品出库、用户管理、添加用户、修改密码等HTML后台模板页面。
进销存系统模板，整个网站系统
05-03
可用，源代码，整个系统的代码，进销存系统
企业进销存管理系统
07-25
一整套的企业进销存管理系统，包括登录界面，进货，缺货，各种网页设计页面，可以直接打开使用，还有原代码，是前端开发部分，采用html编程。
生成静态HTML企业站带进销存管理系统.rar
03-21
生成静态HTML企业站带进销存管理系统，asp的
仓库管理系统 HTML页面设计
08-21
仓库管理系统 HTML页面设计 基本信息模块：为管理员提供实现对客户信息、供货商信息、货品信息以及仓库信息的管理维护，包括对信息查询、添加、修改和删除等操作。 ☆权限管理模块：为仓库部门的其他两个角色(搬运工、货检员)提供权限管理。 ☆入库信息管理模块：为管理员提供查询、添加、修改和删除入库流向单的操作、其中添加和删除操作后的入库流向单要交由管理部审核
小型进销存
03-19
利用SSM写的一个小型进销存系统,包含了登录和数据库的增删改查
小型超市进销存管理系统.zip
04-03
小型超市进销存管理系统.zip
小型超市进销存管理系统数据库课程设计
05-16
小型超市进销存管理系统数据库课程设计
进销库存管理系统excel版.zip
05-31
进销库存管理系统excel版，简单的出入库管理软件，小型企业足够使用
小型进销存管理的国内研究现状
05-22
当前国内小型进销存管理研究已经取得了一定的进展，主要集中在以下几个方面： 1. 基于传统桌面应用程序的研究。这类应用程序通常运行在单机上，具有一定的数据处理和报表生成功能，但缺乏与互联网的连接以及移动端的支持。 2. 基于云计算技术的研究。这类应用程序通常是基于SAAS模式提供的，可以实现跨平台、多用户、数据共享等功能，但需要用户支付一定的服务费用。 3. 基于移动端的研究。这类应用程序通常运行在移动设备上，具有便捷操作、随时随地查看库存等特点，但相对于传统桌面应用程序功能较为简单。 4. 基于人工智能技术的研究。这类应用程序通过分析历史销售数据和库存情况，提供智能化的库存管理和销售预测功能，但需要大量的数据支持和算法优化。 总体来说，国内小型进销存管理研究还处于起步阶段，需要进一步探索和完善。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

[微信紅包]恭喜发財，大吉大利！

你的鼓励将是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值