html网页制作—登录及注册页面设计

最新推荐文章于 2024-08-02 20:11:41 发布
最新推荐文章于 2024-08-02 20:11:41 发布
阅读量5.1w 收藏 866
点赞数 81
分类专栏： HTML网页制作 文章标签： html web design
原文链接：https://www.cnblogs.com/yyt-caroline/p/4890711.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"
        "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 

菇凉小伙
关注
  • 81
    点赞
  • 踩
  • 866
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
【前端开发实战】用 CSS 制作一个华丽的动画登录表单超详细教程新手友好~完整代码示例| 前端动效| 网页设计| 项目实例|HTML/CSS动画|打造炫酷漂亮的登陆表单 - 适合初学者小白的详细指南
南北极之间
06-07 154
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。在用户悬停在环形动画上时，边框颜色会变化并增加阴影，提升交互体验。整体效果是一个炫酷的动画登录表单。这个登录表单页面包含了一个环形动画效果和一些输入框、按钮的样式。
简单的HTML登录页面制作及跳转页面
Stephen_CY666的博客
07-12 6598
密码账号邮箱:
登录和注册html页面（简洁美观）
05-25
简洁美观的登录和注册html页面，从17素材网站充钱下载所得，分享出来供大家使用。
HTML、PHP实战：搭建一个网页登录页面。
m0_50818626的博客
05-21 7594
可以看到当我们输入用户名：zhangsan 密码：123456 时，后台的数据库能够查询到，所以登录成功。可以看到，当输入数据库中已经存在的用户时，会显示用户已经存在，并且在3秒之后会跳转回原来的页面。当注册成功时，可以看到数据库中新增了对应的用户名及密码。当用户注册时前后两次输入密码不一致时也会出现提示。而当用户名和密码不匹配时则登录失败。文件名：denglu.html。我这里用的是小皮一键搭建的。文件名：denglu.php。文件名：zhuce.html。文件名：zhuce.php。
【web前端开发网页设计】一步步实现：HTML + CSS + JavaScript 登录注册表单自带自定（超实用）轻松搞定登录功能：完整源代码与详细教程（新手必看）轻松入门登录表单自带自定义验证码
南北极之间
06-16 843
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
html+css制作简单注册登录页面
m0_67930426的博客
10-19 1万+
光标为手的形状，当光标指定这个div的时候，光标为手的形状。没有账号，去注册 忘记密码。前端页面要得到css的布局，就得在html页面里调用css文件。方框（请输入用户名）方框（请输入用户名）写完这一步，然后再去运行，是没有东西的，但是并不是不存在。例如我在注册这一块级里，我用鼠标指定这一区域时会变成蓝色。如果不加，我们可以根据内容的多少，设计多少白色的部分。.b{ } 是针对注册两个字后面的白色部分进行布局。
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
热门推荐
HTML网页设计
10-03 24万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
html登录页面设计
ly1010yl的博客
03-04 1万+
1.html：HTML 是一种标记语言，用于定义网页的结构和内容，包括段落、标题、列表、链接等等。它使用标签来标识不同的内容，并且这些标签可以用于嵌套2.CSS：CSS 是一种样式表语言，用于定义网页的样式和布局，例如字体、颜色、间距、位置等等。它可以控制页面的外观和感觉，使网页看起来更加美观和易于使用。与 HTML 不同，CSS 的作用是在网页上设置样式和布局，而不是定义内容关系：HTML 和 CSS 是互补的技术，它们必须一起使用才能构建出完整的网页。
html网页制作提交注册信息,利用HTML表单标签编写一个注册页面
weixin_32193393的博客
06-19 6361
今天我们来写一个注册页面form表单先来利用表单标签制作一个简单的注册页面,给大家说说标签的结构:页面结构大体就是这样子的~表单标签:所有需要提交到服务器端的表单项必须使用包起来~form标签的属性:action:整个表单提交的位置(可以是一个页面,也可以是一个后台的Java代码)method:表单的提交方式(get/post)文本输入框:"text"/ >密码输入框:单选按钮:多选按钮:主...
基于HTML+CSS+JavaScript的登录注册网页设计
corlin6688的博客
11-27 1412
登录成功！
html+css+js简单的登录页面
04-10
html+css+js简单的登录页面，适用于网页设计登录页面的个性化设计。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更...
仿钉钉网登录注册页面静态html模板
12-04
【标题】"仿钉钉网登录注册页面静态html模板"涉及到的是网页设计和前端开发的知识点，特别是关于用户界面(UI)的设计以及HTML、CSS技术的应用。这个模板是为创建一个与钉钉应用类似的登录和注册界面而设计的，旨在...
html+css+js酷炫全屏的后台登录注册界面模板
04-10
html+css+jshtml+css+js酷炫全屏的后台登录注册界面模板，带背景图片自动切换登录注册模板代码，适用于网页设计的登录页面个性化制作。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，...
HTML静态网页设计-期末大作业-明星
02-03
例如，“明星15页面带特效带登录带轮播”，这意味着这个设计不仅有轮播图，还包含了登录功能，这可能是一个粉丝社区或者论坛的入口，用户可以注册登录并参与互动。另外，“带留言”功能则允许访客在网页上留下评论或...
登录注册HTML页面代码
zhaochongsi的博客
01-06 8万+
一、注册 创建register.html文件，录入如下代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> form { width:100%;
HTML-04.新浪新闻-标题-超链接
程小白的博客
08-02 90
【代码】HTML-04.新浪新闻-标题-超链接。
【Python】Python 转换 Html 为 Markdown
Young_Pro的博客
08-02 598
在将 HTML 转换为 Markdown 时，表格通常可以保留其基本结构，但可能无法保持所有的格式细节。函数读取 HTML 文件，将其内容转换 为Markdown，然后将 Markdown 内容写入新的文件。如果你需要保持表格的精确格式，可能需要手动调整转换后的 Markdown 或寻找支持更多特性的转换工具。使用这些技巧时，请记住，Markdown 的目的是为了简洁和可读性，而不是复杂的布局。或其他转换工具，结果可能有所不同，因为不同的库可能对HTML到Markdown的转换有不同的实现方式。
基于树莓派的智能家居中控系统：集成Flask、HTML、JavaScript与MQTT协议的问心一言AI接入（代码示例）
最新发布
嵌入式极客小张
08-02 679
本文介绍了基于树莓派的AI接入问心一言智能家居中控系统的搭建过程。该系统利用树莓派作为主控单元，通过DHT11传感器和继电器模块实现环境数据采集和设备控制。后端采用Flask框架和SQLite数据库，前端使用HTML、CSS和JavaScript构建可视化界面，支持用户手动控制设备。系统还接入了问心一言API，实时获取天气信息，提升智能家居的自动化水平。通过该项目，用户能够享受更便捷的智能家居体验。
需要一个带登录，注册，视频上传接口的网站代码
09-12
### 回答1： 抱歉，我是一名AI语言模型，无法为你提供完整的网站代码。但我可以为你提供一些可以使用的技术和框架来实现你所需要的功能： 1. 前端：使用HTML、CSS和JavaScript构建用户界面，使用React或Angular等现代前端框架来增强用户体验和交互。 2. 后端：使用Node.js或Python等语言构建后端服务器，使用Express.js或Django等框架来处理请求和响应。使用MongoDB或MySQL等数据库来存储用户信息和视频数据。 3. 用户认证：使用Passport.js或JWT等身份验证库来实现用户注册和登录功能。 4. 视频上传：使用Multer等文件上传库来实现视频上传功能，并将视频存储在服务器上。 以上是一些实现你所需要的功能的技术和框架，你可以根据自己的需求和技能选择适合自己的工具和语言来实现。 ### 回答2： 要实现一个带登录、注册和视频上传接口的网站，可以使用以下技术和代码实现： 1. 前端设计：使用HTML、CSS和JavaScript编写网页的前端页面，包括登录、注册和视频上传的界面。 2. 后端开发：使用服务器端编程语言（如Python、PHP、Java等），使用数据库管理系统（如MySQL、MongoDB等）。 3. 用户登录功能：实现用户注册和登录功能，包括输入用户名和密码，验证用户身份，登录成功后可以进入个人页面。 4. 用户注册功能：实现用户注册功能，包括输入用户名、密码和其他必填信息，确保用户名的唯一性，将用户信息保存到数据库中。 5. 视频上传功能：使用合适的前端框架（如React、Vue.js等）和后端技术，实现视频文件的上传功能，包括限制上传文件类型和大小，并将视频文件存储到服务器或云存储中，同时将视频信息保存到数据库中。 6. 接口设计：使用RESTful API的设计规范，定义登录、注册和视频上传的接口，包括请求方法、URL和返回数据格式。 7. 安全性考虑：加密用户密码、使用验证码等措施增加网站的安全性。 8. 错误处理：处理用户输入错误、服务器错误等异常情况，给出友好的错误提示信息。 9. 数据库管理：使用合适的数据库管理系统，设计用户表和视频表，保证数据的一致性和完整性。 以上是一个基本的实现思路和步骤，具体的代码可以根据具体的编程语言和技术选型来实现。 ### 回答3： 一个带有登录、注册和视频上传接口的网站，需要使用前端和后端的技术来实现。 首先，前端部分需要使用HTML、CSS和JavaScript来创建网页的基本结构和样式。可以使用HTML的表单元素来实现登录和注册功能，例如使用input标签创建输入框和按钮。登录和注册的表单需要包含必要的字段，例如用户名、密码等信息，并通过JavaScript进行校验和交互。视频上传功能可以通过input标签的type属性设置为file，并使用JavaScript监听文件选择事件进行文件上传。 其次，后端部分需要使用一门服务器端语言来处理前端发送的请求并与数据库进行交互。可以使用常见的服务器端语言如PHP、Python或Node.js等。对于登录和注册功能，后端代码需要验证用户输入的信息，并将用户信息存储到数据库中。对于视频上传功能，后端代码需要接收前端发送的视频文件并将文件保存到服务器或者存储到数据库。 同时，需要使用数据库来保存用户信息和视频文件的相关信息。可以选择使用关系型数据库如MySQL或非关系型数据库如MongoDB来存储数据。对于登录和注册功能，需要创建用户表来存储用户信息，例如用户名、密码等。对于视频上传功能，需要创建视频表来存储视频文件的相关信息，例如文件名、文件路径等。 在最后，需要将前端和后端进行连接，可以使用HTTP协议进行通信。前端通过发送HTTP请求将用户输入的信息传递给后端，后端接收并处理请求，并将响应结果返回给前端。可以使用AJAX技术在不刷新页面的情况下与后端进行通信。 综上所述，一个带有登录、注册和视频上传接口的网站需要使用前端和后端的技术进行开发，并涉及到HTML、CSS、JavaScript、服务器端语言、数据库以及HTTP通信等知识。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值