| Html+CSS实现简单的注册表单 | 您所在的位置：网站首页 › HTML制作表单如何对齐 › Html+CSS实现简单的注册表单 |
Html+CSS实现简单的注册表单
|
目录 预览 教程如下 首先新建一个HTML文件 接下来,我们在body标签的内部编写网页的主题内容 新建一个CSS文件 label: input: .submit_btn: CSS 居中显示: 这就结束啦!! 完整代码 html: css: 这次和大家分享一个用html语言实现的一个简单的注册表单,豪华升级版在文末的链接,感兴趣的可以点击浏览. 来, 先看预览 预览
在这里呢,我们将html和css分开编写 教程如下 首先新建一个HTML文件 程序员阿菜 头部标签在元素中可以插入以下信息 ▶ 脚本(scripts) ▶ 样式文件(CSS) ▶ 各种元数据(meta)信息 可添加在头部区域的元素标签 ▶ 网页名称标题
body 标签内部是网页得主题 里面包含着网页的主要内容 接下来,我们在body标签的内部编写网页的主题内容 添加 三级标题添加 表单 添加 标签 和 标签后的文本输入框 这里 "国家/地区" 采用的是一个下拉列表 用制作选项① form表单的属性action与method ② get方法是用来向服务器上获取数据，而post是用来向服务器上传递修改数据 属性 值 描述 action URL 规定当提交表单时向何处发送表单数据 method get/post 规定用于发送form-data的HTTP方法 代码如下: 程序员阿菜 程序猿注册表单 账号 密码 国家/地区 手机 Email 提交预览:
到这里 大致的内容已经完成啦. 接下就我们对网页进行美化. 新建一个CSS文件首先在HTML文件的 标签内部 添加链接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内部的所有内容套上 标签,给标题也套上 程序猿注册表单 ...... CSS 居中显示: .h_title{ text-align:center; } .h_hr{ height:2px; background:#0CF; margin-bottom: 15px; } .reg_div{ width: 320px; margin: auto; }预览:
不,这其实刚刚开始. 升级豪华版链接如下:https://blog.csdn.net/mohen110/article/details/120353678 完整代码 html: 程序员阿菜 程序猿注册表单 账号 密码 国家/地区 手机 Email 提交... 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; } |
【本文地址】