Hunan Cuisine

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是为代码添加侧边栏的示例代码: ``` <div style="display: flex;"> <div style="width: 20%;"> <ul> <li><a href="#">菜品分类1</a></li> <li><a href="#">菜品分类2</a></li> <li><a href="#">菜品分类3</a></li> <li><a href="#">菜品分类4</a></li> </ul> </div> <div style="width: 80%;"> <h3>菜系列表</h3> <button onclick="addCuisine()" class="btn btn1 btn1">添加</button>     <button onclick="updateCuisine()" class="btn btn2 btn2"> 修改</button>     <button onclick="deleteCuisineById()" class="btn btn3 btn3">删除</button>     <input type="text" name="name" id="name" style="width: 10ch" class="inputText"> <button onclick="searchCuisineByName()" class="btn btn4 btn4">按姓名查询</button><br><br> <table border="1" cellspacing="0" cellpadding="5"> <thead> <tr> <th></th> <th>序号</th> <th>菜名</th> <th>所属地</th> <th>口味</th> </tr> </thead> <tbody id="tbody"> <tr th:each="cuisine:${cuisines}"> <td><input type="radio" th:value="${cuisine.id}" name="rid"></td> <td th:text="${cuisine.id}"></td> <td th:text="${cuisine.name}"></td> <td th:text="${cuisine.area}"></td> <td th:text="${cuisine.taste}"></td> </tr> </tbody> </table> <form id="hiddenForm" method="post" th:action="@{/toUpdateCuisine}" hidden> <input type="text" name="id" id="formid"> </form> </div> </div> ``` 在这个示例中,我们使用了`display: flex`来创建一个水平布局的容器,然后将侧边栏和主内容区域放在这个容器中。 侧边栏使用了一个`ul`列表,并设置了固定宽度为`20%`。主内容区域则占据了剩余的`80%`宽度。 您可以根据实际需要调整侧边栏和主内容区域的宽度。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值