200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > html—登录及注册页面设计

html—登录及注册页面设计

时间:2022-09-05 16:19:10

相关推荐

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"

"/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/> &nbsp;&nbsp;&nbsp;&nbsp;

<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>&nbsp;<input type="text" id="yonghuming"/></p>

<br/>

<p ><STRONG>密&nbsp;码</STRONG>&nbsp;<input type="password" id="mima"/></p>

<br/>

<p><input type="button" value="登录" style="width:70px;height:30px" />&nbsp;&nbsp;

<input type="button" value="注册" style="width:55px;height:30px" οnclick="window.open('注册页面.HTML')"/>

</P>

</form>

</fieldset>

</div>

</div>

</body>

</html>

<!--注册-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"/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>用&nbsp;户&nbsp;名 </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>性&nbsp;&nbsp;&nbsp;别 </strong><input type="radio" id="male" name="xingbie"/>男&nbsp;&nbsp; <input type="radio" id="female" name="xingbie"/>女</dd>

<br/>

<dd><strong>学&nbsp;&nbsp;&nbsp;历</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>爱&nbsp;&nbsp;&nbsp;好 </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="提交" οnclick=alert('提交成功,请重新登录!') style="width:70px;height:40px;" /></P>

</fieldset>

</div>

</form>

</body>

</html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。