实现一个账号注册静态界面

最新推荐文章于 2023-10-15 23:20:42 发布

云舒_

最新推荐文章于 2023-10-15 23:20:42 发布

阅读量795

点赞数 4

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_53690911/article/details/115257341

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客记录了一位HTML初学者如何制作一个简单的账号注册页面。内容包括设置页面背景、标题、输入字段（用户名、密码、电话、邮箱）及提交按钮，并添加了已有账号的登录链接。页面使用了基本的HTML和CSS进行布局和样式设计。

摘要由CSDN通过智能技术生成

实现一个账号注册界面（静态页面）
最近有个工作室招新，当下学的html，如图所示：
在这里插入图片描述

应用HTML，比较简单把，是一边搜一边完成的，可能代码有点乱还麻烦，不过可以参考下。。。此处是我做的界面：
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态网页</title>
<style type="text/css">
p{ text-indent:30em;}
</style>
</head>
<body bgcolor ="black">
<h1 style = "text-align:center;color:white">Register</h1>
<p style = "color:white">Username</p>
<hr style = "width:25%;size:30"/>
<br>
<p style = "color:white">Password</p>
<hr style = "width:25%;size:30"/>
<br>
<p style = "color:white">Phone</p>
<hr style = "width:25%;size:30"/>
<br>
<p style = "color:white">email</p>
<hr style = "width:25%;size:30"/>
<br>
<div style = "opacity:0.5;position:absolute;left:490px;width:300px;height:60px;background-color:lightblue"></div>
<h3 style = "text-align:center;color:white">Submit</h3>
<br>
<p style="color:white">&emsp;Already have an account,<a href = "http://maker-iot.net/">sign in</a></p>
</body>
</html>

总结：

我用的是pycharm，首先是建立文件和运行。
点击即可创建，

运行：，

在整个界面中不会有小绿三角run键，而是一排浏览器的logo，选一个电脑中有的浏览器就可以直接显示运行结果。
2.接下来编辑标题。在两个title之间是网页的名称。

3.第8行是用来控制标题缩进的 text -indent : 30 em.
4.和之间的代码：
在这里插入图片描述

12行 bgcolor 是设置整体的背景。
14行设置大标题居中对齐，颜色为白色。
16–27行各个小标题的细节设置，
是换行。
28，29行设置submit的颜色大小还有背景颜色。
31行插入链接。

目前我只用到这些了，如果需要详细资料可以看菜鸟教程上边的，还是比较详细，不过有些内容不全面，可以直接上网搜。

云舒_

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
实现一个账号注册静态界面

实现一个账号注册界面（静态页面）最近有个工作室招新，当下学的html，如图所示：应用HTML，比较简单把，是一边搜一边完成的，可能代码有点乱还麻烦，不过可以参考下。。。此处是我做的界面：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>静态网页</title><style type="text/css"
复制链接

扫一扫