CSS雙行留言表是一種非常實用的留言表格,可以方便地收集用戶的反饋和意見。下面我們來介紹一下如何實現(xiàn)這樣一個表格。
<form><!--表單開始--> <div class="form-row"> <label for="name">姓名</label> <input type="text" id="name" name="name" required /> </div> <div class="form-row"> <label for="email">郵箱</label> <input type="email" id="email" name="email" required /> </div> <div class="form-row"> <label for="message">留言</label> <textarea id="message" name="message" rows="2" required></textarea> <span class="span-message">請?zhí)顚懩牧粞詢?nèi)容,不超過200字。</span> </div> <div class="form-row"> <button type="submit">提交</button> </div> </form><!--表單結束-->
在CSS中,我們需要將表單呈現(xiàn)成雙行的樣式,可以通過以下代碼實現(xiàn)。
.form-row { display: flex; flex-direction: column; margin-bottom: 20px; } .form-row label { font-weight: 700; margin-bottom: 10px; } .form-row input, .form-row textarea { padding: 10px; border: 1px solid #ccc; border-radius: 3px; font-size: 16px; } .form-row textarea { height: 80px; } .span-message { font-size: 12px; color: #999; margin-top: 5px; }
以上代碼中,我們使用了Flex布局,使表單行為垂直方向排列,同時設定了每一行的外邊距和內(nèi)邊距、邊框、圓角等樣式,以及留言框的高度,并添加了留言提示。
通過以上代碼,我們就得到了一個完整的CSS雙行留言表。