烟魂查看:6 回复:4 评论:6 创建时间:2023-10-20T23:34:29用户:烟魂查看:6 回复:4 评论:6 创建时间:2023-10-20T23:34:29
本人只写了布局 原理不会大家慢慢研究和自己写原理 代码： <!DOCTYPEhtml> <htmllang="en"> <head> <title>Box3地形生成器</title> <metacharset="utf-8"> <metaname="viewport"content="width=device-width,initial-scale=1"> <linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <scriptsrc="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .fakeimg{ height:200px; background:#aaa; } span{ display:inline-block; width:850px; height:530px; margin:6px; background-color:#f8f9fa; } canvas{ width:512px; height:512px; background-color:cornflowerblue; float:left; position:relative; left:50%; margin-top:1%; transform:translateX(-50%); } </style> </head> <body> <divclass="container"> <divclass="row"> <divclass="col-md-9"><br> <ulclass="navnav-pills"> <liclass="nav-item"> <aclass="nav-linkactive"href="#">地形生成器</a> </li> <liclass="nav-item"> <aclass="nav-link"href="#">操作指南</a> </li> <liclass="nav-item"> <aclass="nav-linkdisabled"href="#">开发者soul</a> </li> </ul> <spanclass="rounded"> <canvasid="canvas"width="256"height="256"></canvas> </span> </div> <divclass="col-md-3"> <br> <divclass="card"> <divclass="card-footer"> <h7class="card-title">信息面板</h7> <p>鼠标坐标：{}</p> <p>高度：{}</p> <p>画笔大小：{}</p> </div> <divclass="card-footer"> <h7class="card-title">地形大小调节面板</h7> <p>X:</p><inputtype="text"placeholder="输入X坐标"> <p>Z:</p><inputtype="text"placeholder="输入Z坐标"> </div> <divclass="card-footer"> <h7class="card-title">操作面板</h7> <divclass="row"> <divclass="col-md-6"> <buttontype="button"class="btnbtn-喵btn-primary">增加高度</button> </div> <divclass="col-md-6"> <buttontype="button"class="btnbtn-喵btn-primary">随机高度</button> </div> <divclass="col-md-6"> <buttontype="button"class="btnbtn-喵btn-primary">高度平移</button> </div> <divclass="col-md-6"> <buttontype="button"class="btnbtn-喵btn-primary">重设水平面</button> </div> </div> </div> <divclass="card-footer"> <h7class="card-title">项目操作面板</h7> <divclass="row"> <divclass="col-md-6"> <buttontype="button"class="btnbtn-喵btn-primary">新建项目</button> </div> <divclass="col-md-6"> <buttontype="button"class="btnbtn-喵btn-primary">打开高度图</button> </div> <divclass="col-md-6"> <buttontype="button"class="btnbtn-喵btn-primary">导出高度图</button> </div> <divclass="col-md-6"> <buttontype="button"class="btnbtn-喵btn-primary">导出项目</button> </div> </div> </div> </div> </div> </div> </div> </body> </html>
