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="注冊"  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/> &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" 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>用&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="提交" onclick=alert('提交成功,請重新登錄!') style="width:70px;height:40px;" /></P>
</fieldset>
</div>
</form>
</body>
</html>


 
       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM