css控制表单样式

最新推荐文章于 2024-05-19 22:16:25 发布
最新推荐文章于 2024-05-19 22:16:25 发布
阅读量1k 收藏 7
点赞数
文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_66529571/article/details/122868771
版权

css控制表单样式

input样式

 

实例:

 程序代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css控制表单样式</title>
	<style>
		*{margin: 0;padding: 0;border: none;}
		form{
			width: 300px;
			height: 120px;
			background: #BFFCFF;
			margin: 50px auto;
			font-size: 14px;
			padding-top: 30px;
			}
		.a{
			padding-left: 23px;
			}
		.b{padding-left: 57px;}
		.text{width: 160px;
			height: 20px;
			background:#ffffff url("sucai/1.jpg") no-repeat 3px center;
			padding-left: 20px;
			color: #B7BABA;
			border: 1px solid #56CFFF;
			}
		.password{width: 180px;	
			height: 20px;
			background:#ffffff url("sucai/2.jpg") no-repeat 3px center;
			margin-top: 10px;
			border: 1px solid #56CFFF;
				}
		.btn{width: 187px;
			height: 24px;
			background: url("sucai/5.jpg") no-repeat 90px;
			margin-top: 10px;
			}
	</style>
</head>
<body>
	<form action="" method="post" name="list">
	<div class="a">账号/号码:
	<input type="text" value="itcast" class="text">
	</div>
	<div class="b">密码:	
	<input type="password" class="password">
	</div>
	<input type="button" class="btn">
	</form>
</body>
</html>

不止代码
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
常用CSS样式大全（超全面）
zy1992As的博客
02-28 1万+
14||字体||{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}5||垂直对齐||{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
CSS基础学习--24 表单
yyxhzdm的博客
06-24 644
默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓。这样可以确保浏览器呈现出带有指定宽度和高度的输入框是把边框和内边距一起计算进去的。属性来禁用文本框可以重置大小的功能（一般拖动右下角可以重置大小）。如果你想在输入框中添加图标，可以使用。属性可以修改 input 边框的大小或颜色，使用。注意设置图标的左边距，让图标有一定的空间。使用 width 属性来设置输入框的宽度。选择器可以设置输入框在获取焦点时的样式。属性可以在输入框中添加内边距。属性来设置输入框的背景颜色，
CSS表单样式
最新发布
qq_41807399的博客
05-19 896
表单中可以设置CSS文本框，包括边框，背景，补白，大小，输入字体样式，圆角，阴影等样式。
css之表单、表格
noveto的博客
11-17 314
【代码】css之表单、表格。
CSS控制表单样式
liizhibing的博客
02-01 747
CSS之表单的样式
晨识草的博客
07-16 3737
简单的表单样式此处用到了input、select，主要的类型有text、submit、date index.html<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"/> <meta charset="utf-8"> <title>Form CSS</title> <
HTML5&CSS3网页制作：CSS控制表单样式.pptx
05-31
CSS控制表单样式 CSS控制表单样式 01 CSS控制表单样式 使用CSS可以轻松地控制表单控件的样式，主要体现在控制表单控件的字体、边框、背景和内边距等。 CSS控制表单样式 由于form是块元素，重置浏览器的默认样式时，...
漂亮的css表单样式
08-02
【CSS表单样式】在网页设计中，表单是一个至关重要的元素，用于收集用户信息，如登录、注册、调查等。CSS（层叠样式表）是网页设计中的核心技术，用于控制网页元素的外观和布局。本资源提供了一种用CSS实现的漂亮...
css 表单效果
10-30
CSS允许开发者精确控制表单元素的位置、样式、颜色、字体等属性，从而创建出与网站设计相协调且用户体验良好的表单。在描述中提到的是一个纯CSS实现的示例，可能存在一些问题，鼓励读者进行参考和改进。 在这个示例...
Web前端开发基础：CSS控制表单.ppt
06-06
--*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 使用CSS控制页面背景、表格、表单 能力目标 学会使用CSS控制表单 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 ...
5款自定义登录表单样式
11-11
实现时，可以使用JavaScript控制表单的展开和收起，同时注意过渡动画的流畅性，以增强用户体验。 5. 创意动画登录表单 创意动画表单通过动态效果吸引用户注意力，比如使用视差滚动、3D效果或动态背景。虽然这类表单...
CSS控制表单
weixin_30576827的博客
08-30 155
一个简单的网站注册页面制作。 创建CSS文件如下： @charset "utf-8"; /* CSS Document */ * { margin: 0px; padding: 0px; border: 0px; } body { font-family: 宋体; font-size: 12px; color: #333;...
css设置表格样式
qq_40135955的博客
04-09 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>设置表格的边框</title> <style type="text/css"> .t{ border: 1px gray solid; bo...
CSS—表单的样式设置
qq_46178261的博客
04-03 3134
input常用属性 type：input的类型 text：文本输入框（明文输入） password：文本输入框（密文输入） radio：单选框 checkbox：复选框 button：按钮 reset：重置 submit：提交表单数据给服务器 file：文件上传 maxlength：允许输入的最大字数 placeholder：占位文字 readonly：只读属性 disab...
css 表单 样式_使用CSS样式化Web表单
culh2177的博客
08-09 1266
css 表单 样式A big part of our work as website designers is the ability to make things look good and function well. We spend hours taking the time to make every aspect of our site visually compelling, int...
漂亮的表格样式(使用CSS样式表控制表格样式)
热门推荐
kongwei521的专栏
10-10 3万+
转载地址：http://blog.csdn.net/wallimn/article/details/2212916 感谢原作者 依照WEB2.0风格，设计了几个表格样式，希望大家喜欢。 WEB2.0提倡使用div开布局，但不是要完全放弃使用表格，表格在数据展现方面还是不错的选择。 现在使用介绍使用CSS样式表来控制、美化表格的方法。 精美
form表单以及CSS
m0_68989458的博客
08-05 3103
HTML以及css的基础使用
CSS控制表格样式
ElectronStorm的专栏
10-31 592
表格中的单元格、行是不同的元素，因此它们之间是有距离的，下面的就是把元素之间的距离设为0： border-collapse:collapse;是设置表格的各元素之间的空隙为0 如何使表格使用固定列宽？ table-layout:fixed; //使用CSS方式 固定了列宽后，如何使里面的内容自动换行？ style="word-break:break-all"   //这是
CSS样式--表单表格
小乔与你同在
11-30 1379
1 表单 1.1 表单的作用： 表单通常是用于当需要收集用户输入的一些数据时，比如用户名用户密码，性别选项等等的时候 1.2 表单的结构： 表单的构成为一个表单区域（form）和若干表单元素（如input） （1）表单区域(相当于体检表)： 规定一个表单作用的范围，以及提交的地址提交方式等等 （2）表单元素（相当于体检表里面的详细信息）： 用于收集具体数据的标签元素，有许多不同的类别，主要学习的就...
一般的注册页面都是通过表单来统一收集用户信息，方便用户以后的登陆使用，本案例将模仿百度的注册页面，使大家更熟练的掌握如何使用CSS控制表单样式。效果如图。 具体实现步骤如下： a) 定义表单域，并填充大的背景图片。 b) 通过无序列表<ul>来定义页面结构，最外层嵌套大盒子，设置大盒子的宽并居中显示。 c) 定义li左浮动，并设定左侧li的宽高、外边距等样式。 d) 定义验证码所在的行，右侧的li内部嵌套<ul>，设定内部li的高、外边距等样式，并令其左浮动。 e) 通过添加外边距来调整图片的位置。
05-26
代码实现如下： HTML部分： ``` <div class="register-box"> <form action=""> <div class="bg-img"></div> <ul> <li> <label for="username">用户名:</label> <input type="text" id="username" name="username"> </li> <li> <label for="password">密码:</label> <input type="password" id="password" name="password"> </li> <li> <label for="confirm-password">确认密码:</label> <input type="password" id="confirm-password" name="confirm-password"> </li> <li> <label for="email">邮箱:</label> <input type="email" id="email" name="email"> </li> <li class="code"> <label for="code">验证码:</label> <input type="text" id="code" name="code"> <ul> <li><img src="code.jpg" alt="验证码"></li> <li><a href="#">换一张</a></li> </ul> </li> <li class="submit"> <input type="submit" value="注册"> </li> </ul> </form> </div> ``` CSS部分： ``` .register-box { width: 400px; margin: 50px auto; position: relative; } .bg-img { width: 100%; height: 400px; background-image: url(bg.jpg); background-size: cover; position: absolute; top: 0; left: 0; opacity: 0.5; } ul { list-style: none; margin: 0; padding: 0; } li { float: left; width: 100%; margin-bottom: 10px; } label { display: inline-block; width: 80px; text-align: right; margin-right: 10px; } input[type="text"], input[type="password"], input[type="email"] { width: 200px; height: 25px; border: 1px solid #ccc; border-radius: 5px; padding: 3px; } li.code { height: 40px; } li.code ul { float: left; } li.code ul li:first-child { margin-right: 10px; } li.submit { text-align: center; clear: both; } input[type="submit"] { width: 80px; height: 30px; background-color: #4CAF50; color: #fff; border: none; border-radius: 5px; cursor: pointer; } a { color: #333; text-decoration: none; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不止代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值