Pure.CSS形式
2018-12-22 10:40 更新
PURE.CSS有一个美观的响应css窗口设计。下面是CSS使用指南：
| S.N. | 类名称和描述 |
|---|---|
| 1 | pure-form 表示一个紧凑的内联表单。 |
| 2 | pure-form-stacked 代表与标签下方输入元素堆叠形式。与纯形式使用。 |
| 3 | pure-form-aligned 表示带有标签下面的输入元素的对齐表单。 用于pure-form。 |
| 4 | pure-input-rounded 显示带圆角的表单控件 |
| 五 | pure-button 美化按钮。 |
| 6 | pure-checkbox 美化复选框。 |
| 7 | pure-radio 美化收音机。 |
例
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>
结果
验证结果。
以上内容是否对您有帮助：
更多建议：