html—登陸及註冊頁面設計

時間 2019-11-21

標籤 html 登陸註冊頁面設計欄目 HTML 简体版

原文原文鏈接

1、文字處理css

一、文字加粗：<strong><\strong>html

二、文字換行：<br/>post

三、文檔標題：title字體

四、總體文字居中<body align="center">url

五、總體字體顏色：<body style="color:white">orm

六、段落：<p>htm

七、標題：<h1>~<h6>blog

2、超連接設置圖片

一、字體連接：<a href="連接地址">ip

二、按鈕連接：<input type="button" value="註冊" onclick="window.open('連接地址')"

三、彈出窗口設置：<input type="button" value="提交" onclick=alert("提交成功！")>

備註：alert() 方法用於顯示帶有一條指定消息和一個 OK 按鈕的警告框。

3、樣式設置

一、外框設置

<HEAD>---.bodered{bodered-style:solid;width:300px;height:300px}

二、圖片大小設置：

2.1 背景圖片 <body background="連接地址">

2.2 區域背景圖片

<head>----#tp{width:200px;height:200px;background:url("連接地址")}

4、表單設置：

4.0 表單定義設置<form id="myform2" name="myform2" action="#" method="post">

4.1 按鈕 <input type="button" value="登陸" style="width:300px;height=:200px">

4.2 下拉菜單

<option value="shuoshi">碩士及以上</option>

<option value="gaozhong">高中及如下</option>

</select>

4.3 下拉表單

<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>

<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="羽毛球"/>羽毛球

4.7 文件上傳 <input type="file" id="photo"/>

4.8 表單容器盒子fieldset

</fieldset>

5、代碼：

<！--登陸-->

<!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>