11.CSS响应式表单和布局

最新推荐文章于 2024-11-27 19:06:24 发布

小阿宁的猫猫

最新推荐文章于 2024-11-27 19:06:24 发布

阅读量308

点赞数 1

分类专栏： # CSS WEB 文章标签： css 前端 html css3 php

本文链接：https://blog.youkuaiyun.com/dyjkl/article/details/125839480

版权

WEB 同时被 2 个专栏收录

33 篇文章

订阅专栏

CSS

7 篇文章

订阅专栏

这篇博客详细介绍了如何使用CSS创建响应式表单和网页布局。内容包括输入框样式、边框、颜色、聚焦效果、文本框、下拉菜单及按钮的定制，以及响应式表单和网页布局的实现，如头部区域、菜单导航区域的设计。还提供了具体的代码示例，展示了在不同屏幕尺寸下如何调整元素的显示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

“爱就是，我想到你的时候，你是你，风吹麦浪是你，忽近忽远的脚步声是你，星星上的花也是你。”——《小王子》

CSS响应式表单和布局

1.表单

(1)输入框（input）样式

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
}

选择器：
input[type=text] - 选取文本输入框
input[type=password] - 选择密码的输入框
input[type=number] - 选择数字的输入框

(2)输入框（input）边框

border 属性可以修改 input 边框的大小或颜色
border-radius 属性可以给 input 添加圆角

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

使用 border-bottom 属性设置底边框样式：

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

(3)输入框(input) 颜色

input[type=text] {
  background-color: #f1f1f1;        设置输入框的背景颜色
  color: white;                      修改文本颜色
}

(4)输入框(input) 聚焦

浏览器在输入框获取焦点时（点击输入框）会有一个默认的蓝色轮廓。我们可以设置outline: none 来忽略默认效果。
使用 :focus 选择器可以设置输入框在获取焦点时的样式：

input[type=text]:focus {
	background-color: lightblue;
	border: 3px solid #555;
}

(5)文本框（textarea）样式

使用 resize 属性来禁用文本框可以重置大小的功能

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  resize: none;
}

(6)下拉菜单（select）样式

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

(7)按钮样式

按钮,提交,重置
input[type=button], input[type=submit], input[type=reset] {
  background-color: #666;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;   鼠标放上去会显示小手
}

2.响应式表单

会随着窗口大小改变各种框框的排列

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9E9hHkEF-1658074025359)(D:\md图片\1658073377182.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7GghpNcz-1658074025361)(D:\md图片\1658073397191.png)]$

3.网页布局

长这样
在这里插入图片描述

(1)头部区域

位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

(2)菜单导航区域

菜单导航条包含了一些链接，可以引导用户浏览其他页面

.topnav {  overflow: hidden;  background-color: #333;} 
/* 导航链接 */
.topnav a {  float: left;  display: block;  color: #f2f2f2;
  text-align: center;  padding: 14px 16px;  text-decoration: none;} 
/* 链接 - 修改颜色 */
.topnav a:hover {  background-color: #ddd;  color: black;
}

4.响应式布局

内容区域
内容区域一般有三种形式:1 列：一般用于移动端;2 列：一般用于平板设备;3 列：一般用于 PC 桌面设备

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pYVntxhg-1658074025362)(D:\md图片\1658069519041.png)]$

/* 创建三个相等的列 */
.column {  float: left;  width: 33.33%;} 

/* 列后清除浮动 */
.row:after {  content: "";  display: table;  clear: both;} 

/* 响应式布局 - 小于 600 px 时改为上下布局 */
@media screen and (max-width: 600px) {  .column {
    width: 100%;
  }
}

5.表单演示代码

<!DOCTYPE html>
<html><meta charset="UTF-8">
<head>
	<title>CSS响应式表单和布局</title>
	<link rel = "stylesheet" type="text/css" href="test13-1.css">
</head>
<body>
	<form>
		<input type="text">       <!-- 显示出大概的网页框架 -->
		<textarea></textarea>     <!-- 一个默认的文本输入框 -->
		<select>                    <!-- 下拉菜单 -->
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>		
		</select>
		<input type="button" value="按钮">
		<input type="submit">
		<input type="reset">
	</form>

</body>
</html>

amiao11.css

/* 输入框样式 */
input[type=text]{
	width:50%;
	padding:12px 12px;                 /* 内外边距 */
	margin:5px 0;
	box-sizing:border-box;             /* 样式最大尺寸 */
	border:3px solid rgb(176, 65, 250);   /* 边框颜色 */
	border-radius:5px;                 /* 添加圆角 */
	border:none;
	border-bottom:2px solid rgb(176, 65, 250);     /* 显示输入框最下面的2px部分 */
	border-radius:0;              /* 显示输入框最下面的一条线 */
	background-color:#eab4ff;
	color:rgb(176, 65, 250);
	outline:none;	                    /* 忽略默认的蓝色轮廓 */
    }

/* 输入框聚焦 */
input[type=text]:focus{
	background-color:rgb(193, 247, 193);
	border:3px solid rgb(247, 207, 207);
    }

/* 文本框样式 */
textarea{
	width:50%;
	height:150px;
	padding:12px 12px;
	margin:8px 0;
	border:2px solid rgb(248, 209, 147);
	resize:none;                             /* 不允许自由调大小 */
    }

/* 下拉菜单 */
select{
	width:50%;
	padding:16px 20px;
	border: 3px solid rgb(49, 252, 100);                     
	border-radius:10px;                       /* 圆角 */
	background-color:#b1f8ab;
    }

/*按钮样式:按钮,提交,重置*/
input[type=button],input[type=reset],input[type=submit]{
	background-color:rgb(249, 177, 230);
	border:none;
	color:#fff;
	padding:16px 32px;
	text-decoration:none;
	margin:5px 2px;
	cursor:pointer;                /* 鼠标放上去会显示小手 */
    }