html 实例源码
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head>4
<style>5
* {6
box-sizing: border-box;7
}8
9
input[type=text], select, textarea {10
width: 100%;11
padding: 12px;12
border: 1px solid #ccc;13
border-radius: 4px;14
resize: vertical;15
}16
17
label {18
padding: 12px 12px 12px 0;19
display: inline-block;20
}21
22
input[type=submit] {23
background-color: #4CAF50;24
color: white;25
padding: 12px 20px;26
border: none;27
border-radius: 4px;28
cursor: pointer;29
float: right;30
}31
32
input[type=submit]:hover {33
background-color: #45a049;34
}35
36
.container {37
border-radius: 5px;38
background-color: #f2f2f2;39
padding: 20px;40
}41
42
.col-25 {43
float: left;44
width: 25%;45
margin-top: 6px;46
}47
48
.col-75 {49
float: left;50
width: 75%;51
margin-top: 6px;52
}53
54
/* 清除浮动 */55
.row:after {56
content: "";57
display: table;58
clear: both;59
}60
61
/* 响应式布局 layout - 在屏幕宽度小于 600px 时， 设置为上下堆叠元素 */62
@media screen and (max-width: 600px) {63
.col-25, .col-75, input[type=submit] {64
width: 100%;65
margin-top: 0;66
}67
}68
</style>69
</head>70
<body>71
72
<h2>响应式表单</h2>73
<p>响应式表带可以根据浏览器窗口的大小重新布局各个元素，我们可以通过重置浏览器窗口大小来查看效果：</p>74
75
<div class="container">76
<form action="/action_page.php">77
<div class="row">78
<div class="col-25">79
<label for="fname">First Name</label>80
</div>81
<div class="col-75">82
<input type="text" id="fname" name="firstname" placeholder="Your name..">83
</div>84
</div>85
<div class="row">86
<div class="col-25">87
<label for="lname">Last Name</label>88
</div>89
<div class="col-75">90
<input type="text" id="lname" name="lastname" placeholder="Your last name..">91
</div>92
</div>93
<div class="row">94
<div class="col-25">95
<label for="country">Country</label>96
</div>97
<div class="col-75">98
<select id="country" name="country">99
<option value="australia">Australia</option>100
<option value="canada">Canada</option>101
<option value="usa">USA</option>102
</select>103
</div>104
</div>105
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java