目录
预览
教程如下
首先新建一个HTML文件
接下来,我们在body标签的内部编写网页的主题内容
新建一个CSS文件
label:
input:
.submit_btn:
CSS 居中显示:
这就结束啦!!
完整代码
html:
css:
这次和大家分享一个用html语言实现的一个简单的注册表单,豪华升级版在文末的链接,感兴趣的可以点击浏览.
来, 先看预览
预览
在这里呢,我们将html和css分开编写
教程如下
首先新建一个HTML文件
<!doctype html><html><head><meta charset="utf-8"><title>程序员阿菜</title></head><body></body></html>
<head> </head> 头部标签
<title> 网页名称标题</title><body></body>在<head>元素中可以插入以下信息
▶ 脚本(scripts)
▶ 样式文件(CSS)
▶ 各种元数据(meta)信息
可添加在头部区域的元素标签
▶ <title><style><meta><link><script><noscript><base>
body 标签内部是网页得主题
里面包含着网页的主要内容
接下来,我们在body标签的内部编写网页的主题内容
添加<h3> 三级标题添加<form> 表单添加<label> 标签 和 标签后的文本输入框 <input>这里"国家/地区"采用的是一个下拉列表 <datalist> 用<option>制作选项①form表单的属性action与method
②get方法是用来向服务器上获取数据，而post是用来向服务器上传递修改数据
代码如下:
<!doctype html><html><head><meta charset="utf-8"><title>程序员阿菜</title></head><body><h3>程序猿注册表单</h3><form action="" method="get"><label>账号</label><input type="text" placeholder="请输入账号..." /><br /><label>密码</label><input type="password" placeholder="请输入密码..." /><br /><label>国家/地区</label><input type="text" placeholder="请选择国家/地区" id="region" list="regList"/><datalist id="regList"><option value="中国"></option><option value="中国香港"></option><option value="中国澳门"></option></datalist><br /><label>手机</label><input type="tel" placeholder="请输入手机号..."/> <br /><label>Email</label><input type="email" placeholder="请输入Email地址..." /><br /><div class="submit_btn">提交</div></form></body></html>
预览:
到这里 大致的内容已经完成啦. 接下就我们对网页进行美化.
新建一个CSS文件
首先在HTML文件的 <head>标签内部 添加<link>链接CSS文件
<link rel="stylesheet" href="style.css" />
然后对label和input进行定义
CSS display 参见:CSS display属性_xmjt1997的博客-CSDN博客
CSS padding:定义属性内边距
CSS text 参见:CSS text-属性汇总_pcaxb的专栏-CSDN博客_text属性
CSS margin 参见大佬:CSS中margin属性详解_我是楠楠的博客-CSDN博客_css margin属性
label:
label{width: 90px;height: 28px;display: inline-block;text-align: right;padding-right:10px;}
input:
input{width: 200px;height: 28px;border: #06F 1px solid;border-radius: 3px;margin: 5px 0 5px 0;}
写到这里,我们来预览一下
唉? 基本的形状已经成型了 ,接下来继续加工.
.submit_btn:
将"提交"按钮定义为 类选择容器
添加各种属性: 边框的线条 圆角和背景色 字体颜色 布局
:hover在鼠标移到链接上时添加的特殊样式。
.submit_btn{display: block;width: 100px;height: 28px;line-height: 28px;font-size: 14px;border: 1px #006600 solid; text-align: center;border-radius: 3px;background:#090;color:#FFF;float: right;margin: 10px 15px 0 0;}.submit_btn:hover{background: #0C3;cursor: pointer;}
预览:
这个时候所有的样式已经写完啦.不过这样并不美观.我们可以让他居中显示.
回到html文件, 我们给body内部的所有内容套上 <div>标签,给<h3>标题也套上
<body><div class="reg_div"><div class="h_title"><h3>程序猿注册表单</h3></div><div class="h_hr"></div><form action="" method="get">......</form></body>
CSS 居中显示:
.h_title{text-align:center;}.h_hr{height:2px;background:#0CF;margin-bottom: 15px;}.reg_div{width: 320px;margin: auto; }
预览:
这就结束啦!!
不,这其实刚刚开始.
升级豪华版链接如下:/mohen110/article/details/120353678
完整代码
html:
<!doctype html><html><head><meta charset="utf-8"><title>程序员阿菜</title></head><body><div class="reg_div"><div class="h_title"><h3>程序猿注册表单</h3></div><div class="h_hr"></div><form action="" method="get"><label>账号</label><input type="text" placeholder="请输入账号..." /><br /><label>密码</label><input type="password" placeholder="请输入密码..." /><br /><label>国家/地区</label><input type="text" placeholder="请选择国家/地区" id="region" list="regList"/><datalist id="regList"><option value="中国"></option><option value="中国香港"></option><option value="中国澳门"></option></datalist><br /><label>手机</label><input type="tel" placeholder="请输入手机号..."/> <br /><label>Email</label><input type="email" placeholder="请输入Email地址..." /><br /><div class="submit_btn">提交...</div></form></div></body></html>
css:
@charset "utf-8";/* CSS Document */.reg_div{width: 320px;margin: auto; }.submit_btn{display: block;width: 100px;height: 28px;line-height: 28px;font-size: 14px;border: 1px #006600 solid; text-align: center;border-radius: 3px;background:#090;color:#FFF;float: right;margin: 10px 15px 0 0;}.submit_btn:hover{background: #0C3;cursor: pointer;}label{display: inline-block;text-align: right;width: 90px;padding-right:10px;height: 28px;}input{width: 200px;height: 28px;border: #06F 1px solid;border-radius: 3px;margin: 5px 0 5px 0;}.h_title{text-align:center;}.h_hr{height:2px;background:#0CF;margin-bottom: 15px;}
