【前端学习笔记】表单元素布局

最新推荐文章于 2023-08-12 13:33:53 发布

GUANYX~

最新推荐文章于 2023-08-12 13:33:53 发布

阅读量207

点赞数 2

分类专栏：前端学习笔记文章标签：前端 css css3

本文链接：https://blog.csdn.net/gyx1549624673/article/details/121022945

版权

前端学习笔记专栏收录该内容

56 篇文章 0 订阅

订阅专栏

前言：好久没有碰前端知识了，而且现在出现了很多新属性，所以从头开始，从基础开始系统的学习一下前端知识！此笔记也是督促自己的学习吧，夯实基础，稳扎稳打。后续代码直接更新到github了

一、效果图

在这里插入图片描述

二、代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			form{
				width: 350px;
				background: #9CBC2B;
				margin: 20px auto;
				padding: 0 15px;
				color: #364411;
				border-radius: 5px;	
			}
			.step{
				font-size: 14px;
				font-weight: bold;
				margin: 15px 0;
			}
			.form-line{
				border-radius: 5px;
				border-color: #F0F5DF;
				border-width: 2px;
				border-style: solid;
				padding: 3px;
				margin: 3px 0;
				background-color: #CEDE95;
				font-size: 12px;
				padding-left: 10px;
			}
			.form-line span{
				display: inline-block;
				width: 110px;
				
			}
			.form-line input{
				background-color: white;
				border: none;
				height: 20px;
				border-radius: 3px;
				width: 180px;
			}
			.form-line input[type=radio]{
				width: 25px;
				height: 12px;
			}
			.form-line textarea{
				width: 180px;
				height: 70px;
				vertical-align: top;
				border: none;
				border-radius: 3px;
			}
			
			input.submit-btn{
				border: none;
				background-color: #364411;
				color: white;
				display: block;
				width: 100px;
				padding: 5px 0;
				border-radius: 20px;
				margin: 10px auto 10px;
				
			}
		</style>
	</head>
	<body>
		<form>
			<section>
				<p class="step" style="padding-top: 10px;">第一步 详细信息</p>
				<p class="form-line">
					<span>姓名</span>
					<input type="text" placeholder="请输入姓名" />
				</p>
				<p class="form-line">
					<span>电话</span>
					<input type="text" placeholder="132156478" />
				</p>
				<p class="form-line">
					<span>Facebook主页</span>
					<input type="url"  />
				</p>
			</section>
			<section>
				<p class="step">第二步 收货地址</p>
				<p class="form-line">
					<span>详细地址</span>
					<textarea placeholder="想吃啥就吃点"></textarea>
				</p>
				<p class="form-line">
					<span>邮编</span>
					<input type="text" />
				</p>
			</section>
			<section>
				<p class="step">第三步 银行卡信息</p>
				<p class="form-line">
					<span>银行卡类型</span>
					<input type="radio" name="cardType" />借记卡
					<input type="radio" name="cardType" />信用卡
					<input type="radio" name="cardType" />VISA卡
				</p>
				<p class="form-line">
					<span>卡号</span>
					<input type="number"/>
				</p>
				<p class="form-line">
					<span>密码</span>
					<input type="number" placeholder="这个不用输入"/>
				</p>
				<p class="form-line">
					<span>持卡人</span>
					<input type="text"/>
				</p>
				
			</section>
			<p style="padding-bottom: 5px;" >
				<input type="submit" class="submit-btn" value="提交" />
			</p>
		</form>
	</body>
</html>

三、收获

可以在心中抽象出每个板块的结构，然后先写出框架，在为每一个部分添加样式。

GUANYX~

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端学习笔记】表单元素布局

前言：好久没有碰前端知识了，而且现在出现了很多新属性，所以从头开始，从基础开始系统的学习一下前端知识！此笔记也是督促自己的学习吧，夯实基础，稳扎稳打。一、效果图二、代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; .
复制链接

扫一扫

专栏目录