html—登录及注册页面设计
2015-10-18 23:43
1011 查看
一、文字处理
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="注册" onclick="window.open('链接地址')"
3、弹出窗口设置:<input type="button" value="提交" onclick=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>
五、代码:
<!--登录-->
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="注册" onclick="window.open('链接地址')"
3、弹出窗口设置:<input type="button" value="提交" onclick=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>
相关文章推荐
- html链接下光标的不同形状
- MarkdownPad 2 在win10下html渲染错误This view has crashed
- HTML转化为PDF
- 获取form表单提交回来的值或者html标签的值或者加载过后重新给lable赋的值
- 关于ps、Axure和html一周学习总结
- HTML学习笔记之表格的使用
- HTML 注册事件向引用方法中的传参问题的两个方式
- html中charset和content-language的区别
- html中charset和content-language的区别
- HTML学习笔记之超链接的使用
- servlet处理html表单文件上传
- html验证码生成
- failed to push some refs to 'git@code.csdn.net:fd214333890/html_form_update.git'
- HTML学习3:常用标签之文本标签
- 让ie6,7,8支持HTML5
- html判断当前页面是否在iframe中
- 二、如何在 HTML 文档中放置VBScript
- HTML学习2:初识HTML
- html多个水平并列组件自适应等高的做法
- Mvc Html.BeginForm 方式提交Form前验证