时间：2024-02-17 22:00:02 | 来源：网站运营
时间：2024-02-17 22:00:02 来源：网站运营
表格布局留言板的网页设计如何制作，求代码？：根据你的图片简单写了一下,希望对你有帮助
在线咨询
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>留言板</title> <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"> <style> *{ padding: 0; margin: 0; } .header{ padding: 30px 0 10px 0; border-bottom: 2px solid rgba(0,0,0,.1); } .body-content .content-menu{ padding: 5px; margin-top: 10px; } .body-content .content-menu .table{ padding: 0; margin: 0; } .body-content .content-menu table th:nth-child(1){ padding-left: 20px; } .body-content .content-menu table td:nth-child(2){ text-align: center; } .content-form{ margin-top: 20px; padding: 5px; } .content-form form{ background: #F8F8F8; padding: 10px; border-radius: 3px; } .content-form-title{ padding: 10px 5px; border-bottom: 1px solid #eee; } </style></head><body><div class="col-md-10 offset-md-1"> <div class="header"> <h3>网络书城新闻列表</h3> </div> <div class="body-content "> <div class="content-menu"> <table class="table table-sm table-bordered"> <tbody> <tr> <th><a href="">2013书城10大关键字</a></th> <td>[2020-03-30]</td> </tr> <tr> <th><a href="">数量销量连续新高</a></th> <td>[2020-03-30]</td> </tr> <tr> <th><a href="">最新读者读书调查报告</a></th> <td>[2020-03-30]</td> </tr> <tr> <th><a href="">新书上架,购买从速</a></th> <td>[2020-03-30]</td> </tr> </tbody> </table> </div> <div class="content-form"> <form action="" class="offset-md-2 col-md-8 "> <h4 class="content-form-title">留言板</h4> <div class="form-group mx-sm-3 mb-2 mt-4"> <label for="title">主题</label> <input type="text" class="form-control" id="title" placeholder="留言主题"> </div> <div class="form-group mx-sm-3 mb-2"> <label for="value">内容</label> <textarea class="form-control" id="value" rows="3" placeholder="留言内容"></textarea> </div> <div class="form-group mx-sm-3 mb-2"> <label for="name">姓名</label> <input type="text" class="form-control" id="name" placeholder="请输入姓名"> </div> <div class="form-group mx-sm-3 mb-2"> <label for="title">邮箱</label> <input type="email" class="form-control" id="email" placeholder="请输入邮箱"> </div> <div class="form-group mx-sm-3 mb-2 mt-4"> <button type="submit" class="btn btn-primary">提交</button> <button type="button" class="btn btn-outline-secondary">重置</button> </div> </form> </div> </div></div></body></html>界面布局按你图片所提供的,对于用户体验度不是很好,建议还按照下方图片进行布局关键词：设计,留言,布局,表格
