<!DOCTYPE html> <html> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"> <title>网点数据</title> <script src=""></script> <link rel="stylesheet" href="dist/layui/css/layui.css"> <script src="dist/layui/layui.js"></script> <style> #title{ text-align: center; line-height:60px; height: 50px; font-size: large; font-family: "微软雅黑"; } #backimage{ display: inline; float: left; margin-top: 20px; height: 20px; margin-left: 15px; } .container{ width: 100%; overflow-x: hidden; overflow-y: hidden; white-space: nowrap; margin-top: 5px; font-family: "微软雅黑"; } .container .item{ display:inline-block; box-sizing: border-box; width:33%; } #icon1{ margin-left: 15px; height: 20px; } .content{ float: left; display: inline; font-family: "微软雅黑"; } img{ border-radius:5px } #icon2{ margin-left: 15px; height: 20px; } .key{ border: none; float: left; margin-top: -5px; margin-left: 20px; padding-top: 20px; } .value{ border: none; float: right; margin-top: -5px; width: 100px; font-family: "微软雅黑"; } #submit{ background: #27B1A4; color: #FFFFFF; width: 200px; height: 40px; } </style> </head> <body> <!--最上方--> <div><div id="title"><img src="src/img/btn_back.png" id="backimage"/>网点数据</div></div> <!--灰色分割线--> <hr class="layui-bg-gray"> <!--图片展示区--> <div style="height: 20px;"> <div style="float: left;"> <img id="icon1" class="content" src="src/img/icon1.png"/> 图片 </div> <div class="content" style="float: right;margin-right: 10px;">4张 <img src="src/img/btn1.png" onclick="editPic()"></div> </div> <div class="container"> <div id="picdiv"> <img src="src/img/macsierra-012.jpg" class="item" style="margin-left: 12px;"/> <img src="src/img/jinmao.jpg" class="item"/> <img src="src/img/184.jpg" class="item"> <img src="src/img/41.jpg" class="item"/> </div> </div> <!--灰色分割线--> <hr class="layui-progress"> <!--下方表格--> <div><img id="icon2" src="src/img/icon2.png"> 字段</div> <!--表格--> <form action="" method="post" target="_blank"> <input type="text" name="key01" class="key" value="名称"/><br> <input type="text" name="value01" class="value"value="请输入..."/><br> <!--灰色分割线--> <hr class="layui-bg-gray"> <input type="text" name="key02" class="key" value="名称"/><br> <input type="text" name="value02" class="value"value="请输入..."/><br> <hr class="layui-bg-gray"> <input type="text" name="key03" class="key" value="名称"/><br> <input type="text" name="value03" class="value"value="请输入..."/><br> <hr class="layui-bg-gray"> <input type="text" name="key04" class="key" value="名称"/><br> <input type="text" name="value04" class="value"value="请输入..."/><br> <hr class="layui-bg-gray"><br> <p style=" margin:5px; text-align:center;"><input type="submit" value="保 存" id="submit"/></p> </form> </body> <script> function editPic(){ alert(123); } </script> </html>