帮助自己上班的零件数量查询器(2) - 网页骨骼 html

html造就构造、css填肉美化、javascript动作
这样类似的叙述再学习网页的初期应该会常常看到，甚至会有很多类似的迷因。

你是不是在想我怎么不插个谜因，我才不要，你自己查。

最简单的架构应该就不用再说了，在google查html就有一大堆

head

    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>零件查询器</title>    <link rel="stylesheet" href="./style.css">

body

首先从最上方的input列开始

你可能有注意到，设计中input像label的字是压在input框上，这并不是用position : absolute强制移动位置，而是使用fieldset搭配legend所做的样式

    <fieldset>        <legend>ID</legend>        <input type="text" id="position" placeholder="Enter PositionID">    </fieldset>

不用任何css就已经有点好看了所以就不用搂

排序方面需要利用select与option做下拉表单选择排序的依据

    <fieldset>        <legend>Order</legend>        <select name="order" id="order">            <option value="Date">Date</option>            <option value="OKOK">OK</option>            <option value="NGNG">NG</option>            <option value="Total">Total</option>        </select>    </fieldset>

演示没有预设文字的样子，此图有经过css后的样式。
结果没有预设辅助文字，在input如text、textarea可以使用placeholder预设辅助文字(不是预先填入)，但是在select并不会起作用，要使用的话可以在select内再加入一项不可选的option

    <fieldset>        <legend>Order</legend>        <select name="order" id="order">            <option value="" disabled>Select Order</option>            <option value="Date">Date</option>            <option value="OKOK">OK</option>            <option value="NGNG">NG</option>            <option value="Total">Total</option>        </select>    </fieldset>

最后的送出按钮非常简单，由于之后会使用Vue，因此先不要管他能不能动。

    <input type="submit" id="btn" value="submit">

input 完成之后就轮到底下的资料清单了

    <fieldset id="text">         <legend>             <p class="textname">plant</p> <p>plant</p>             <p class="textname">line</p> <p>line</p>             <p class="textname">product</p> <p>product</p>             <p class="textname">type</p> <p>type</p>             <p class="textname">position</p> <p>position</p>         </legend>        <div id="container">            <ul>                <li><p class="textname">Date </p> <p>Date</p> </li>                <li><p class="textname">NG   </p> <p>NG</p> </li>                <li><p class="textname">OK   </p> <p>OK</p> </li>                <li><p class="textname">OUT  </p> <p>OUT</p> </li>                <li><p class="textname">Total</p> <p>Total</p> </li>            </ul>        </div>     </fieldset>

在这边都是记录以往我还没碰到、不是那么了解或是还没深入了解使用的内容，因此会省略很多基础的步骤。