時間：2024-02-17 22:00:02 | 來源：網(wǎng)站運營
時間：2024-02-17 22:00:02 來源：網(wǎng)站運營
表格布局留言板的網(wǎng)頁設(shè)計如何制作，求代碼？：根據(jù)你的圖片簡單寫了一下,希望對你有幫助
在線咨詢
<!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>網(wǎng)絡(luò)書城新聞列表</h3> </div> <div class="body-content "> <div class="content-menu"> <table class="table table-sm table-bordered"> <tbody> <tr> <th><a href="">2013書城10大關(guān)鍵字</a></th> <td>[2020-03-30]</td> </tr> <tr> <th><a href="">數(shù)量銷量連續(xù)新高</a></th> <td>[2020-03-30]</td> </tr> <tr> <th><a href="">最新讀者讀書調(diào)查報告</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">內(nèi)容</label> <textarea class="form-control" id="value" rows="3" placeholder="留言內(nèi)容"></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>界面布局按你圖片所提供的,對于用戶體驗度不是很好,建議還按照下方圖片進行布局關(guān)鍵詞：設(shè)計,留言,布局,表格
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
