前端入门学习笔记七十六

最新推荐文章于 2023-07-05 11:02:35 发布

物恰冰可乐

最新推荐文章于 2023-07-05 11:02:35 发布

阅读量314

点赞数

分类专栏：前端文章标签：前端学习 html

本文链接：https://blog.csdn.net/m0_65384293/article/details/128307005

版权

前端专栏收录该内容

109 篇文章 2 订阅

订阅专栏

<!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”表示禁止缩放。