html网页制作—登录及注册页面设计
一、文字处理
1、文字加粗:<strong><\strong>
2、文字换行:<br/>
3、文档标题:title
4、整体文字居中<body align="center">
5、整体字体颜色:<body style="color:white">
6、段落:<p>
7、标题:<h1>~<h6>
二、超链接设置
1、字体链接:<a href="链接地址">
2、按钮链接:<input type="button" value="注册" οnclick="window.open('链接地址')"
3、弹出窗口设置:<input type="button" value="提交" οnclick=alert("提交成功!")>
备注:alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
三、样式设置
1、外框设置
<body>---<DIV CLASS="bodered" >。。。</DIV>
<HEAD>---.bodered{bodered-style:solid;width:300px;height:300px}
2、图片大小设置:
2.1 背景图片 <body background="链接地址">
2.2 区域背景图片
<BODY>----<div id="tp">
<head>----#tp{width:200px;height:200px;background:url("链接地址")}
四、表单设置:
4.0 表单定义设置<form id="myform2" name="myform2" action="#" method="post">
4.1 按钮 <input type="button" value="登录" style="width:300px;height=:200px">
4.2 下拉菜单
<SELECT id="place" name="place" style="width: 300px;height:30px">
<option value="shuoshi">硕士及以上</option>
<option value="benke">本科</option>
<option value="dazhuang">大专</option>
<option value="gaozhong">高中及以下</option>
</select>
4.3 下拉表单
<select id="software" name="software" multiple="mulyiple" size="3" style="width:300px;height: 50px;">
<option value="OFFICE" id="of" name="of">OFFIC办公软件</option>
<option value="Corel Draw" id="cdr" name="cdr">Corel Draw</option>
<option value="AUTOCAD" id="cad" name="cad">AUTOCAD</option>
<OPYION value="spss" id="sp" name="sp">SPSS</OPYION>
<option value="matlab" id="mat" name="mat">MATLAB</option>
</select>
4.4 多行文本
<textarea row="50" cols="30" id="recommend" style="width:300px;height:50px;">此处输入文本</textarea>
4.5 单选框<input type="radio" id=“male” name="xingbie" value="男" >男<input type="radio" id=“female” name="xingbie" value="女" >女
单选框选之一:name需要一致!!
4.6 复选框
<input type="checkbox" name="aihao" id="aihao" value="唱歌"/>唱歌
<input type="checkbox" name="lq" id="lq" value="篮球"/>篮球
<input type="checkbox" name="ym" id="ym" value="羽毛球"/>羽毛球
<input type="checkbox" name="yw" id="tw" value="跳舞"/>跳舞</DD>
4.7 文件上传 <input type="file" id="photo"/>
4.8 表单容器盒子fieldset
<fieldset>
<legend><h1 align="center" >登录页面</h1></legend>
</fieldset>
五、代码:
<!--登录-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>登录页面</title><style type="text/css">.bordered {border-style:solid;width:600px;height:300px;}#bg{width:600px;height:310px;background: url(678.png);}</style>
</head><body><body align="center"><body style="color:black"/><br/><br/><br/><br/> <div id="bg"><div class="bordered" ><fieldset><legend><h1 align="center" >登录页面</h1></legend><br/> <br/><form id="myform" name="myform" action="#" method="post"><p><strong >用户名</strong> <input type="text" id="yonghuming"/></p><br/><p ><STRONG>密 码</STRONG> <input type="password" id="mima"/></p><br/><p><input type="button" value="登录" style="width:70px;height:30px" /> <input type="button" value="注册" style="width:55px;height:30px" onclick="window.open('注册页面.HTML')"/></P></form></fieldset></div></div>
</body>
</html>
<!--注册-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>个人信息注册</title><style type="text/css">#tp{width:600px;height: 620px;background:url("12345.jpg")}</style>
</head><body>
<form id="myform2" name="myform2" action="#" method="post"><div id="tp"><body style="color:white"/><fieldset><legend><h1 align="center">个人信息注册</h1></legend><hr align="center"><dl><dt><dd><strong>用 户 名 </strong> <input type="text" id="yhm" name="yhm" style="width:300px; height: 30px;"/></dd><br/><dd><strong>请设置密码 </strong> <input type="password" id="mima" name="mima"style="width:300px; height: 30px;"/> </dd><br/><dd><strong>请确认密码 </strong><input type="password" id="rmima" name="rmima"style="width:300px; height: 30px;"/></dd><br/><dd><strong>性 别 </strong><input type="radio" id="male" name="xingbie"/>男 <input type="radio" id="female" name="xingbie"/>女</dd><br/><dd><strong>学 历</strong><SELECT id="place" name="place" style="width: 300px;height:30px"><option value="shuoshi">硕士及以上</option><option value="benke">本科</option><option value="dazhuang">大专</option><option value="gaozhong">高中及以下</option></select><br/><br/><DD><strong>精 通 软件</strong><select id="software" name="software" multiple="mulyiple" size="3" style="width:300px;height: 50px;"><option value="OFFICE" id="of" name="of">OFFIC办公软件</option><option value="Corel Draw" id="cdr" name="cdr">Corel Draw</option><option value="AUTOCAD" id="cad" name="cad">AUTOCAD</option><OPYION value="spss" id="sp" name="sp">SPSS</OPYION><option value="matlab" id="mat" name="mat">MATLAB</option></select></DD><br/><DD><strong>爱 好 </strong><input type="checkbox" name="aihao" id="aihao" value="唱歌"/>唱歌<input type="checkbox" name="lq" id="lq" value="篮球"/>篮球<input type="checkbox" name="ym" id="ym" value="羽毛球"/>羽毛球<input type="checkbox" name="yw" id="tw" value="跳舞"/>跳舞</DD><br/><DD><strong>自 我 介绍 </strong><textarea row="50" cols="30" id="recommend" style="width:300px;height:50px;">此处输入文本</textarea></DD><br/><br/><dd><strong>请提供jpg或png格式照片</strong><input type="file" id="photo"/></dd></dt></dl><P><input type="button" value="提交" onclick=alert('提交成功,请重新登录!') style="width:70px;height:40px;" /></P></fieldset></div>
</form>
</body>
</html>
结果如图所示:
文章转载链接:https://www.cnblogs.com/yyt-caroline/p/4890711.html
html网页制作—登录及注册页面设计相关推荐
- 前端开发学习--登录和注册页面设计(html和css,可完成两个页面点击切换)
今天学习了登录和注册页面的设计,主要是HTML和CSS部分,注册和切换采用了Js代码进行,后面将通过js进行填写内容的验证,进而可通过JSP跳转到Servlet进行DAO数据的校验,这属于后端部分了. ...
- 网页的登录和注册页面
注册页面 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
- html—登录及注册页面设计
一.文字处理 1.文字加粗:<strong><\strong> 2.文字换行:<br/> 3.文档标题:title 4.整体文字居中<body align=& ...
- 设计灵感|举足轻重!登录、注册页面设计案例
登录注册页是链接用户跟产品中间的纽带,连接产品与用户.不同的产品会有不同的登录注册方式,设计时要注意账号区.背景.引导元素的搭配选择.当产品的需求是避免用户停留,让用户快速操作则可以选择纯色背景,按钮 ...
- #3使用html+css+js制作网页 制作登录网页
#3使用html+css+js制作网页 制作登录网页 本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...
- 40个吸引眼球的注册页面设计
40个吸引眼球的注册页面设计 原文:40个吸引眼球的注册页面设计 译自:40 Eye-Catching Registration Pages 版权所有,转载请注明出处,多谢!!! 令人难以置信是大量的 ...
- jsp java servlet_jsp+java ,servlet如何实现用户登录和注册页面
jsp+java servlet实现简单用户登录(使用数据库,包括注册页面) 功能介绍 本项目通过使用jsp和servlet实现简单的用户登录.主要逻辑为:如果用户不存在,则首先进行注册(注册信息同步 ...
- Ant Design 编写登录和注册页面
Ant Design编写登录和注册页面 前言 一.登录 1.index.tsx页面 2.index.module.less 二,注册 1.index.tsx 2.index.module.less 总 ...
- 从0开始写Vue项目-Vue页面主体布局和登录、注册页面
1.从0开始写Vue项目-环境和项目搭建_慕言要努力的博客-CSDN博客 2. 从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建_慕言要努力的博客-CSDN博客 一.主体布局 ...
最新文章
- Win 10 源码一览:0.5T 代码、400 万文件、50 万文件夹
- RTX51 tiny系统要注意的问题:(关于时间片)
- Hive到SparkSql
- 二叉树前序、中序、后序遍历求法
- 每日程序C语言12-统计字符个数
- GM6 pageset - DB get scenario
- linq to sql 行转列_SQL 难题:行转列
- JS中的location.href
- java中常见数据库字段类型与java.sql.Types的对应
- socket error:10053
- sqlitepython导入数据_Python导入excel数据到sqlite;
- 解决办法:GTK+ 2.x symbols detected
- multisim 1.4破解汉化
- Scratch之猫和老鼠
- Unity TUIO雷达入门
- 一篇了解TrustZone
- 电脑磁盘数据错误(循环冗余检查)的原因以及解决办法
- 查询失败,后台服务器运行错误,添加网络打印机错误?怎么处理?Windows 无法连接到打印机。 服务器打印后台处理程序服务没有运行。...
- GILT市场方兴未艾
- Startup is Ready,Geek to Startup!
热门文章
- sql server中datename函数的使用
- mysql数据的复制与恢复_MySQL 数据库的备份与恢复
- java excel 导入 格式转换_【转】JAVA实现EXCEL的导入和导出(二)
- ZynqMP 调试 FSBL 代码
- SOA+LDAP实现SSO单点登录思路
- 首款国产7纳米GPGPU芯片在上海问世
- mysql截取字符串后缀_Mysql字符串截取函数SUBSTRING的用法说明
- 【你好,windows】Windows 10 20H2 19042.630专业工作站纯净版2020.12.1
- 数据库候选关键词怎么求_数据库中,什么是超关键字,候选关键字,主关键字?麻烦举例说明...
- 睿智的目标检测21——如何调用摄像头进行目标检测