<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
* {
box-sizing: content-box;
}
input[type=text], select, textarea {
width: 90%;
padding: 20px;
border: 3px solid darkorange;
border-radius: 9px;
resize: vertical;
}
label {
padding: 20px 20px 20px 2;
display: inline-flexbox;
}
input[type=submit] {
background-color: deepskyblue;
color: ghostwhite;
padding: 30px 30px;
border: currentColor;
border-radius: 9px;
cursor: progress;
float: initial;
}
input[type=submit]:hover {
background-color: deepskyblue;
}
.container {
border-radius: 9px;
background-color: ghostwhite;
padding: 30px;
}
.col-25 {
float: left;
width: 30%;
margin-top: 9px;
}
.col-75 {
float: left;
width: 60%;
margin-top: 9px;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 900px) {
.col-25, .col-75, input[type=submit] {
width: 50%;
margin-top: 9;
}
}
</style>
</head>
<body>
<h1>盗墓笔记</h1>
<p>盗墓笔记</p>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">盗墓笔记</label>
</div>
<div class="col-75">
<input type="text" id="盗墓笔记" name="盗墓笔记" placeholder="盗墓笔记">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">终极笔记</label>
</div>
<div class="col-75">
<input type="text" id="盗墓笔记" name="盗墓笔记" placeholder="盗墓笔记">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">选择一部</label>
</div>
<div class="col-75">
<select id="盗墓笔记" name="盗墓笔记">
<option value="australia">盗墓笔记</option>
<option value="canada">盗墓笔记之老九门</option>
<option value="usa">盗墓笔记之重启之极海听雷</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">盗墓笔记读后感或观后感</label>
</div>
<div class="col-75">
<textarea id="盗墓笔记" name="盗墓笔记" placeholder="Write something.." style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="提交">
</div>
</form>
</div>
</body>
</html>
CSS 表单
响应式表单
响应式表单可以根据浏览器窗口的大小重新布局各个元素
使用 <form> 元素来处理输入
使用 @import 导入
link 标签
meta 标签来告诉浏览器,
让视口(网页的可视区域)
的宽度等于设备的宽度,并禁止用户对页面的缩放。
viewport:即视口,表示网页的可视区域;
width:控制 viewport 的大小,可以指定一个具体的值,例如 1000,也可以是由关键字组成的特殊值,例如 device-width 就表示设备的宽度;
initial-scale:表示初始缩放比例,也就是页面第一次加载时的缩放比例;
maximum-scale:表示允许用户缩放的最大比例,范围从 0 到 10.0;
minimum-scale:表示允许用户缩放到最小比例,范围从 0 到 10.0;
user-scalable:表示用户是否可以手动缩放,“yes”表示允许缩放,“no”表示禁止缩放。