程序员经验分享-hwhale

PHP基础学习第十二篇（CSS响应式表单和布局）

2023-05-16

一、表单

1、输入框（input）样式

input{

        width:100%

}

2、选择器：

input[type=text]     -选取文本输入框

input[type=password]      -选择密码的输入框

input[type=number]        -选择数字的输入框

3、输入框（input）边框样式设置

border属性可以修改input边框的大小或颜色

border-radius属性可以给input添加圆角

input[type=text] {

        border:2px solid red;

        border-radius:4px;

}

4、输入框底部边框的设置

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

input[type=text]{

        border:none;

        border-bottom:2px solid red;

}

5、输入框的背景颜色和字体颜色

使用background-color属性来设置输入框的背景颜色

使用color属性修改文本颜色

input[type=text] {

        background-color:white;

        color:black;

}

6、输入框聚焦效果

游览器在输入框获取焦点时（点击输入框）会有一个默认的蓝色轮廓。

我们可以设置outline:none来忽略默认效果。

使用:focus选择器可以设置输入框在获取焦点时的样式。

input[type=text]:focus {

        background-color:lightblue;

        border:3px solid red;

}

7、文本框（textarea）样式

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

textarea{

        width:100%;

        height:150px;

        padding:12px 20px;

        border:2px solid #ccc;

        border-radius:4px;

        resize:none;

}

8、按钮样式设置

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;

}

具体的实现内容如下：

代码如下：

 

<!DOCTYPE html>
<html>
	<head>
		<title>小莫初学</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="实验.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" value="提交">
			<input type="reset" value="重置">
		</form>
	</body>
</html>
input[type=text]{
	width:50%;
	padding:12px 12px;
	margin:5px 10px;
	box-sizing:border-box;                /*修改border和padding数值的盒子的大小不变，防止出现溢出情况*/
	border:3px solid red;
	border-radius:10px;                   /*设置圆角属性*/
	border:none;                          /*去除边框*/
	border-bottom:2px solid red;          /*单独设置底部的边框*/
	border-radius:0;                      /*设置圆角属性为零*/
	background-color:#f1f1f1;
	color:green;
	outline:none;                          /*去除原来未设置的上、左、右默认的黑色边框*/
	
}
input[type=text]:focus{
	background-color:yellow;
	border:5px solid blue;
}
textarea{
	width:50%;
	margin:0 10px;
	height:150px;
	padding:12px 12px;
	border:2px solid #ccc;
	resize:none;                          /*设置文本框不能随便更改大小*/
}
select{
	width:50%;
	padding:16px 20px;
	border:none;
	border-radius:5px;                     /*设置圆角属性*/
	background-color:#f1f1f1;
	
}
input[type=button],input[type=reset],input[type=submit]{
	background-color:green;
	color:#fff;
	border:none;
	padding:16px 32px;
	text-decoration:none;
	margin:5px 2px;
	cursor:pointer;
}

二、响应式表单

效果如下：

 代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小莫初学</title>
		<style>
		*{
			box-sizing:border-box;    <!--获取最大尺寸-->
		}
		input[type=text],select,textarea{
			width:100%;
			padding:12px;
			border:1px solid #ccc;
			border-radius:4px;         /*设置圆角属性*/
			resize:none;			/*设置文本框大小不能随便更改*/
		}
		label{
			padding:12px 12px 12px 0;
			display:inline-block;   /*呈递为内联对象，但是对象的内容作为块传递*/
		}
		input[type=submit]{
			background-color:#666;
			color:white;
			padding:12px 20px;
			border:none;
			border-radius:4px;
			cursor:pointer;       /*把鼠标光标变成一只手*/
			float:right;
		}
		input[type=submit]:hover{
			background-color:#333;
		}
		.container{
			border-radius:5px;
			background-color:#f2f2f2;
			padding:20px;
		}
		.col-25{
			float:left;
			width:25%;
			margin-top:6px;
		}
		.col-75{
			float:left;
			width:75%;
			margin-top:6px;
		}
		.row:after{
			content:"";
			display:table;/*此元素会作为块级表格来显示（类似<table>）,表格前后带有换行符*/
			clear:both;   /*清除浮动*/
		}
		/*响应式布局layout-在屏幕宽度小于600px时，设置为上下堆叠元素*/
		@media screen and (max-width:600px){
			.col-25,.col-75,input[type=submit]{
				width:100%;
				margin-top:0;
			}
		}
		</style>
	</head>
	<body>
		<h2>响应式表单</h2>
		<p>响应式表单可以根据游览器窗口的大小重新布局各个元素，我们可以通过重置游览器窗口大小
		来查看效果：</p>
		<div class="container">
			<form action="">
			<div class="row">
				<div class="col-25">
					<label>姓名</label>
			</div>
			<div class="col-75">
				<input type="text">
			</div>
		</div>
		<div class="row">
			<div class="col-25">
				<label>年龄</label>
			</div>
			<div class="col-75">
				<input type="text">
			</div>
		</div>
		<div class="row">
			<div class="col-25">
				<label>爱好</label>
			</div>
			<div class="col-75">
				<select>
					<option>请选择</option>
					<option>1</option>
					<option>2</option>
					<option>3</option>
				</select>
			</div>
		</div>
		<div class="row">
			<div class="col-25">
				<label>其它的个人信息</label>
		</div>
		<div class="col-75">
			<textarea style="height:200px"></textarea>
		</div>
		</div>
		<div class="row">
			<input type="submit">
		</div>
		</form>
		</div>
	</body>
</html>

三、布局

1、网页布局一般分为以下几个部分：

头部布局、菜单导航栏区域、内容区域、底部区域

2、头部区域

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

.header{

        background-color:#f1f1f1;

        text-align:center;

        padding:20px;

}

3、菜单导航栏区域

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

.topnav{

        overflow:hidden;                 /*隐藏溢出的内容*/

        background-color:red;

}

导航链接

.topnav a{

        float:left;

        display:block;               /*变为区块元素*/

        color:#f2f2f2;

}

鼠标移动到链接颜色发生改变

.topnav a:hover{

        background-color:#ddd;

        color:black;

}

4、内容区域

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

四、响应式布局

1、创建三个相等的列

.column{

        float:left;

        width:33.33%;

}

2、列后清除浮动

.row:after{

        content:"";

        display:table;                                            

        clear:both;                                                 /*清除浮动*/

}

3、响应式布局-小于600px时改为上下布局

@media screen and (max-width:600px) {

        .column{

        width:100%

}

}

实现效果如下：

 

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<title> 13CSS响应式表单与布局-3 </title>
		<style>
			.header {
				background-color: #F1F1F1;
				text-align: center;
				padding: 20px;
			}
			.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;
			}
			/* 创建三个相等的列 */
			.column {  
				float: left;  
				width: 33.33%;
			} 
			/* 列后清除浮动 */
			.row:after {  
				content: "";  
				display: table;  
				clear: both;
			} 
			/* 响应式布局 - 小于 600 px 时改为上下布局 */
			@media screen and (max-width: 600px) {
				.column {
				width: 100%;
				}
			}
		</style>
	</head>	
	<body>
		<div class="header">头部区域</div>
		<div class="topnav">
			<a href="#">链接1</a>
			<a href="#">链接2</a>
			<a href="#">链接3</a>
		</div>
		<div class="column">
			<h2>第一列</h2>
			<p>1</p>
		</div>  
		<div class="column">
			<h2>第二列</h2>
			<p>2</p>
		</div>  
		<div class="column">
			<h2>第三列</h2>
			<p>3</p>
		</div>
	</body>
</html>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

PHP基础学习第十二篇（CSS响应式表单和布局） 的相关文章

  • 如何在 Debian 11 系统中安装 VirtualBox ?

    VirtualBox 是一款用于桌面级的免费开源虚拟化软件 它适用于 Linux 和 Windows 操作系统 VirtualBox 允许创建多个不同操作系统的虚拟机 通过创建虚拟机 xff0c 在笔记本电脑或桌面电脑上设置测试环境 必备条

  • 如何在 Debian 系统上安装 VMware Workstation Pro ?

    VMware Workstation 是一个最好的虚拟化工具 xff0c 使用在 windows 和 Linux 桌面级别 它有两个不同的版本 xff0c VMware Workstation Player 和 VMware Worksta

  • 如何在Ubuntu 22.04上安装Kubernetes集群 ?

    本文将向您展示如何使用 kubeadm 命令在 Ubuntu 22 04 上安装 Kubernetes 集群 Kubernetes 是一个免费的开源容器编排工具 xff0c 也称为K8S 在 Kubernetes 的帮助下 xff0c 我们

  • SQL中OPENJSON函数JSON到表行数据转换

    开发过程中用到了MQ以JSON进行数据交互 xff0c 接收过程中有部分数据不完整导致错误未能入库 偶然间看到SQL有OPENJSON函数可对JSON数据进行表数据转换 于是就有了下文 xff0c 对学习的过程记录下 默认情况下解析JSON

  • Windows上安装WSL实现windows和linux双系统

    1 开启开发人员模式 选择开发者选项 xff0c 开启开发人员模式 2 开启Linux子系统功能 在控制面板 程序 启用或关闭windows功能 xff0c 启用Linux的Windows子系统 虚拟机平台 Windows虚拟机监控程序平台

  • 在记事本中输入联通二字，再打开就是乱码了

    今天学到一个非常奇怪的问题 xff1a 在记事本上输入 联通 二字 xff0c 再次打开的时候就会出现乱码 xff0c 这奇了怪了 xff0c 到底是怎么回事呢 xff1f 这个问题是编码的问题 我们在记事本上输入的是gbk表示的 联通 二

  • 【DOS批处理】函数定义和用法

    本文主要讲述如下几个问题 xff1a 1 什么是函数 xff0c 怎么创建函数 xff1f 2 怎么调用一个函数 xff1f 3 函数是怎么工作的 xff1f 4 怎么向函数传递参数 xff1f 5 函数怎么返回值和返回一个局部变量的值 一

  • Linux服务器之:阿里云ecs设置swap虚拟内存--CentOS7

    1 场景 闲来无事买了一个阿里云ecs服务器 乞丐版1核1G Linux centos7 今天操作docker容器时 一直报错 fatal error runtime out of memory 网上查询是内存不足溢出的原因 于是看到可以使

  • Makefile: 并行执行的例子

    example to parallel running Makefile a 64 SHELL c 39 for i 61 1 i lt 61 10 i 43 43 do sleep 1 echo I am a done 39 b 64 S

  • 【牛客网】JZ4 二维数组中的查找

    传送门 xff1a JZ4 二维数组中的查找 题目描述 xff1a 思路 xff1a 题目已经指出其中的数字按照行和列都是递增的 xff0c 那么这题其实很容易想到对每行或者每列进行二分 xff0c 这样的时间复杂度为O xff08 N l

  • Ubuntu18.04 + 树莓派4B + wifi + 换源 +ssh + 防火墙相关 + mate桌面 + + vnc + ROS Melodic

    说在前面的话 xff0c 这是一个系列文章 xff0c 研究从零落地 slam 小车 xff0c 以下内容的 markdown 形式上传Gitee Github 了可以直接 down 下来用捏 Gitee 从零落地 slam 小车 从烧录系

  • IOS解决键盘挡住UITextView的方法

    想要解决这个问题 xff0c 首先了解一些通知 xff08 notifications xff09 1 UIKeyboardWillShowNotification 当键盘准备显示的时候会发出这个通知 xff0c 只要是可编辑的原件都有效

  • CNN为什么鲁棒， 为什么具有旋转平移不变性

    https www quora com How is a convolutional neural network able to learn invariant features 1 一种解释 After some thought I d

  • 排序（2）——冒泡排序

    一 概述 冒泡排序就是每一趟排序都将最大的一个数放在最后边 排序思路 xff1a 依次比较相邻的两个数 xff0c 将小的数放在前面大的数放在后面 所以第一趟比较结束后 xff0c 数组中最大的数一定在数组的最后一个位置 二 举个栗子 要排

  • 魔百盒M401A成功刷入armbian

    1 魔百盒M401A是什么 它是我们平时办理宽带或者到营业厅处理一些业务时会赠送的一款电视盒子 这里提到的M401A是我在某宝上60元购买的 xff0c 供我闲时研究用 1 1 硬件与树莓派对比 Raspberry 3B 43 Raspbe

  • 简单的数据加密算法的实现(JavaSE)

    先看一下子题目的要求 类似的思路大概都是这样子 首先将数据倒序 然后将每位数字都加上5 再用和除以10的余数代表该数字 最后将第一位和最后一位数字交换请给定任意一个小于8位的整数 然后 将加密后的结果在控制台打印出来 思路 让使用者输入一串

  • NoVNC的使用之一: 让我们把NoVNC代理跑起来

    写道 NoVNC 正是我们需要的 HTML5 VNC 客户端 xff0c 采用 HTML 5 WebSockets Canvas 和 JavaScript 实现 xff0c noVNC 被普遍用在各大云计算 虚拟机控制面板中 xff0c 比

  • 赛码 击鼓传花 dp

    题目 xff1a code xff1a include lt bits stdc 43 43 h gt using namespace std int main int n m dp 32 32 memset dp 0 sizeof dp

  • 赛码 军训队列

    题目 xff1a code 放在了dp栏里其实暴力一发就可以AC include lt bits stdc 43 43 h gt using namespace std int main int n m ans 5020 cin gt gt

  • Ubuntu 18.04 安装搜狗输入法之后无法横向分屏+输入法突然只能输入英文

    背景 xff1a 搜狗输入法之前已经安装好了 xff0c 突然只能输入英文 xff1a 原因 amp 解决方案 xff1a 有可能是ctrl 43 shift 43 E想在terminator中横向分屏的时候触发了搜狗输入法的快捷键 xff

随机推荐

热门标签