html网页制作—登录及注册页面设计_网页设计登录注册页面代码-程序员宅基地

技术标签： html web design 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、外框设置

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

2、图片大小设置：

2.1 背景图片 <body background="链接地址">

2.2 区域背景图片

<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 下拉菜单

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

五、代码：

<！--登录-->

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

结果如图所示：

文章转载链接：https://www.cnblogs.com/yyt-caroline/p/4890711.html

本文链接：https://blog.csdn.net/DreamTrue1101/article/details/105450621

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

HTML5 Web SQL 数据库_方式准则的定义-程序员宅基地

文章浏览阅读1k次。1、HTML5 Web SQL 数据库 Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。2、核心方法以下是规范中定义的三个_方式准则的定义

spring Boot 中使用线程池异步执行多个定时任务_springboot启动后自动开启多个线程程序-程序员宅基地

文章浏览阅读4.1k次，点赞2次，收藏6次。spring Boot 中使用线程池异步执行多个定时任务在启动类中添加注解@EnableScheduling配置自定义线程池在启动类中添加注解@EnableScheduling第一步添加注解，这样才会使定时任务启动配置自定义线程池@Configurationpublic class ScheduleConfiguration implements SchedulingConfigurer..._springboot启动后自动开启多个线程程序

Maven编译打包项目 mvn clean install报错ERROR_mvn clean install有errors-程序员宅基地

文章浏览阅读1.1k次。在项目的target文件夹下把之前"mvn clean package"生成的压缩包(我的是jar包)删掉重新执行"mvn clean package"再执行"mvn clean install"即可_mvn clean install有errors

navacate连接不上mysql_navicat连接mysql失败怎么办-程序员宅基地

文章浏览阅读974次。Navicat连接mysql数据库时，不断报1405错误，下面是针对这个的解决办法：MySQL服务器正在运行，停止它。如果是作为Windows服务运行的服务器，进入计算机管理--->服务和应用程序------>服务。如果服务器不是作为服务而运行的，可能需要使用任务管理器来强制停止它。创建1个文本文件(此处命名为mysql-init.txt)，并将下述命令置于单一行中：SET PASSW..._nvarchar链接不上数据库

Python的requests参数及方法_python requests 参数-程序员宅基地

文章浏览阅读2.2k次。Python的requests模块是一个常用的HTTP库，用于发送HTTP请求和处理响应。_python requests 参数

近5年典型的的APT攻击事件_2010谷歌网络被极光黑客攻击-程序员宅基地

文章浏览阅读2.7w次，点赞7次，收藏50次。APT攻击APT攻击是近几年来出现的一种高级攻击，具有难检测、持续时间长和攻击目标明确等特征。本文中，整理了近年来比较典型的几个APT攻击，并其攻击过程做了分析（为了加深自己对APT攻击的理解和学习）Google极光攻击2010年的Google Aurora(极光)攻击是一个十分著名的APT攻击。Google的一名雇员点击即时消息中的一条恶意链接，引发了一系列事件导致这个搜_2010谷歌网络被极光黑客攻击

随便推点

微信小程序api视频课程-定时器-setTimeout的使用_微信小程序 settimeout 向上层传值-程序员宅基地

文章浏览阅读1.1k次。JS代码 /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { setTimeout( function(){ wx.showToast({ title: '黄菊华老师', }) },2000 ) },说明该代码只执行一次..._微信小程序 settimeout 向上层传值

uploadify2.1.4如何能使按钮显示中文-程序员宅基地

文章浏览阅读48次。uploadify2.1.4如何能使按钮显示中文博客分类：uploadify网上关于这段话的搜索恐怕是太多了。方法多也试过了不知怎么，反正不行。最终自己想办法给解决了。当然首先还是要有fla源码。直接去管网就可以下载。[url]http://www.uploadify.com/wp-content/uploads/uploadify-v2.1.4...

戴尔服务器安装VMware ESXI6.7.0教程（U盘安装）_vmware-vcsa-all-6.7.0-8169922.iso-程序员宅基地

文章浏览阅读9.6k次，点赞5次，收藏36次。戴尔服务器安装VMware ESXI6.7.0教程（U盘安装）一、前期准备1、下载镜像下载esxi6.7镜像：VMware-VMvisor-Installer-6.7.0-8169922.x86_64.iso这里推荐到戴尔官网下载，Baidu搜索“戴尔驱动下载”，选择进入官网，根据提示输入服务器型号搜索适用于该型号服务器的所有驱动下一步选择具体类型的驱动选择一项下载即可待下载完成后打开软碟通（UItraISO），在“文件”选项中打开刚才下载好的镜像文件然后选择启动_vmware-vcsa-all-6.7.0-8169922.iso