免費(fèi)AI編程助手
Pure.CSS形式
2018-12-22 10:40 更新
PURE.CSS有一個(gè)美觀的響應(yīng)css窗口設(shè)計(jì)。下面是CSS使用指南：
| S.N. | 類名稱和描述 |
|---|---|
| 1 | pure-form 表示一個(gè)緊湊的內(nèi)聯(lián)表單。 |
| 2 | pure-form-stacked 代表與標(biāo)簽下方輸入元素堆疊形式。與純形式使用。 |
| 3 | pure-form-aligned 表示帶有標(biāo)簽下面的輸入元素的對(duì)齊表單。 用于pure-form。 |
| 4 | pure-input-rounded 顯示帶圓角的表單控件 |
| 五 | pure-button 美化按鈕。 |
| 6 | pure-checkbox 美化復(fù)選框。 |
| 7 | pure-radio 美化收音機(jī)。 |
例
purecss_forms.htm
<html>
<head>
<title>The PURE.CSS Forms</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Username" required>
</div>
<div class="pure-control-group">
<label for="email">Email</label>
<input id="email" type="text" placeholder="Email Address" required>
</div>
<div class="pure-control-group">
<label for="comments">Comments</label>
<input id="comments" type="text" placeholder="Comments">
</div>
<div class="pure-controls">
<label for="married" class="pure-checkbox">
<input id="married" type="checkbox" checked="checked">
Married
</label>
<br>
<label for="single" class="pure-checkbox">
<input id="single" type="checkbox">
Single
</label>
<br>
<label for="dontknow" class="pure-checkbox">
<input id="dontknow" type="checkbox" disabled>
Don't know (Disabled)
</label>
<br>
<br>
</div>
<div class="pure-controls">
<label for="male" class="pure-radio">
<input id="male" type="radio" name="gender" value="male" checked>
Male
</label>
<br>
<label for="female" class="pure-radio">
<input id="female" type="radio" name="gender" value="female">
Female
</label>
<br>
<label for="dontknow1" class="pure-radio">
<input id="dontknow1" type="radio" name="gender" value="female" disabled>
Don't know (Disabled)
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
</body>
</html>
結(jié)果
驗(yàn)證結(jié)果。
以上內(nèi)容是否對(duì)您有幫助：
更多建議：