Home >Web Front-end >HTML Tutorial >Key interface design issues (the interface should be designed like this. Or similar. Is there an open source interface? Is there a reference? Or any hero can help design it... and get paid)_html/css_WEB-ITnose
Key interface design issues (the interface should be designed like this. Or similar. Is there an open source interface? Is there a reference? Or any hero can help design it... and get paid)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:18:171229browse
Interface design
How to design the interface?
Reply to the discussion (solution)
You have to find a ready-made UI,
try extjs
extjs has never done it. . .
If you have the skills, you can put them together one by one. The drag is the troublesome one.
<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>无标题页</title> <style type="text/css"> body { text-align:center; font-size:62.5%; background:#f80; } #wrapper { margin:0 auto; text-align:left; width:100em; } #left { float:left; width:45%; } #right { float:right; width:55%; } fieldset { margin:0; background: transparent; border:0; } #left label { width:10em; text-align:right; float:left; line-height:1.8em; margin-right:0.5em; } #location { margin-top: 1.2em; } #untLable { margin-left: 1.2em; } </style></head><body> <div id="wrapper"> <div id="left"> <fieldset> <legend>Contactor</legend> <div> <label for="Category">Category</label> <select id="Category" > <option value="1">Costactors</option> </select> </div> <div> <label for="menufacture">Menufacture</label> <select id="menufacture"> <option value="1">SEMENS</option> </select> </div> <div> <label for="item">Item</label> <input type="text" id="item" value="Contactor"></input> </div> <div> <label for="Esctec">Esctec Number</label> <input id="Esctec" type="text" value="ESS-123456"/> </div> <div > <label for="PartNumber">PartNumber</label> <input type="text" id="PartNumber"value="3RT"/> </div> <div> <label for="ModelYear">Model Year</label> <input type="text" id="ModelYear" value="2012"/> </div> <div> <label for="Drmensore">Drmensore</label> <input type="text" id="Drmensore" value="60*40"/> </div> <div > <label for="Wegiht">Weight</label> <input type="text" id="Weight" value="1.3kg"></input> </div> <div> <label for="BarCode">BarCode</label> <input type="text" id="BarCode" value="123456789"/> </div> <div id="location"> <label for="loca">Location</label> <input type="text" id="loca" value="H.7"/> </div> <div> <label for="unt">Unt Cont</label> <input type="text" value="108" id="unt"/> <span id="untLable">Tacbie</span> </div> </fieldset> </div> <div id="right"> <div> <label for="date">Data Entered</label> <!--日期控件--> </div> <div style="height:10em;border:1px solid #ccc;"> <!--选项卡-->选项卡 </div> <div style="height:10em;border:1px solid #ccc;"> <table> <thead> <tr> <th>Date</th> <th>LetNumber</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>2012/09/01</td> <td>20</td> <td><input type="text" value="test"/></td> </tr> </tbody> </table> </div> </div> </div></body></html>细节的地方 调调
<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>无标题页</title> <style type="text/css"> body { text-align:center; font-size:62.5%; background:#FFE4CA; } #wrapper { margin:0 auto; text-align:left; width:100em; } #left { float:left; width:45%; } #right { float:right; width:55%; } fieldset { margin:0; background: transparent; border:0; } #left label { width:8em; text-align:right; float:left; line-height:1.8em; margin-right:0.5em; } #location { margin-top: 1.2em; } #untLable { margin-left: 1.2em; } #left select { width:10em; } #left input[type="text"] { width:15em; } </style></head><body> <div id="wrapper"> <div id="left"> <fieldset> <legend>Contactor</legend> <div> <label for="Category">Category</label> <select id="Category" > <option value="1">Costactors</option> </select> </div> <div> <label for="menufacture">Menufacture</label> <select id="menufacture"> <option value="1">SEMENS</option> </select> </div> <div> <label for="item">Item</label> <input type="text" id="item" value="Contactor"></input> </div> <div> <label for="Esctec">Esctec Number</label> <input id="Esctec" type="text" value="ESS-123456"/> </div> <div > <label for="PartNumber">PartNumber</label> <input type="text" id="PartNumber"value="3RT"/> </div> <div> <label for="ModelYear">Model Year</label> <input type="text" id="ModelYear" value="2012"/> </div> <div> <label for="Drmensore">Drmensore</label> <input type="text" id="Drmensore" value="60*40"/> </div> <div > <label for="Wegiht">Weight</label> <input type="text" id="Weight" value="1.3kg"></input> </div> <div> <label for="BarCode">BarCode</label> <input type="text" id="BarCode" value="123456789"/> </div> <div id="location"> <label for="loca">Location</label> <input type="text" id="loca" value="H.7"/> </div> <div> <label for="unt">Unt Cont</label> <input type="text" value="108" id="unt"/> <span id="untLable">Tacbie</span> </div> </fieldset> </div> <div id="right"> <div> <label for="date">Data Entered</label> <!--日期控件--> </div> <div style="height:10em;border:1px solid #ccc;"> <!--选项卡-->选项卡 </div> <div style="height:10em;border:1px solid #ccc;"> <table> <thead> <tr> <th>Date</th> <th>LetNumber</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>2012/09/01</td> <td>20</td> <td><input type="text" value="test"/></td> </tr> </tbody> </table> </div> <div> <input type="button" value="+Add Transaction"/> </div> </div> </div></body></html> Date space, tab Go cuddle with these on the Internet
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn