色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css雙行留言表

錢琪琛2年前8瀏覽0評論

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雙行留言表。