console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/base-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
<style>
html,
button,
input,
select,
textarea,
.pure-g [class *="pure-u"] {
font-family: Georgia, Times, "Times New Roman", serif;
}
.pure-g {
background-color: #fff
}
.pure-g div {
margin: 2px 2px;
background-color: #aaa;
}
.box1 {
width: 600px;
height: 300px;
background-color: #aaa;
margin: 0 auto;
padding: 20px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box1">
<form class="pure-form">
<fieldset>
<legend>一个简单的单行表单</legend>
</fieldset>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<label for="remember">
<input type="checkbox" id="remember">记住我
</label>
<button type="submit" class="pure-button pure-button-primary">登录</button>
</form>
</div>
<br>
<br>
<div class="box1">
<form action="#" class="pure-form pure-form-stacked">
<fieldset>
<legend>堆叠式菜单</legend>
<label for="email">Email</label>
<input type="email" id="email" placeholder="Email">
<label for="state">State</label>
<select id="state">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
<label for="remember" class="pure-checkbox">
<input id="remember" type="checkbox"> Remember me
</label>
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
</div>
<br>
<br>
<br>
<div class="box1">
<form class="pure-form pure-form-aligned">
<fieldset>
<legend>对齐式菜单</legend>
<div class="pure-control-group">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="email">Email Address</label>
<input id="email" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<label for="foo">Supercalifragilistic Label</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox"> I've read the terms and conditions
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
</div>
<br>
<br>
<br>
<div class="box1">
<form class="pure-form">
<input type="text" class="pure-input-rounded">
<button type="submit" class="pure-button">Search</button>
</form>
</div>
</body>
</html>