一个登录网页

已于 2024-08-28 20:47:26 修改
阅读量314 收藏 5
点赞数 8
文章标签： css html 前端 前端框架
于 2024-08-28 20:45:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74933801/article/details/141649272
版权

一、目的
   完成一个登录页面

二、主要步骤
    1、新建文件夹，新建index.html style.css
    2、​编辑文章使用link链接
    3、HTML部分
        <form>
            文本框text
            br换行
            密码框 password
            br换行
            按钮 button
            br换行
            p标签
        </form>
    4、CSS部分
        ①给body设置背景图 bgi
        ②给form设置绝对定位，让他水平垂直都居中
            position：absolute;
            left:50%;
            top:50%;

        ③给input，设置width height border-radius 
          取消边框border:none;
                ④给按钮起个class名，设置背景色bgc，文字颜色白色
          文字大小font-size
        ⑤给p设置居中 text-align:center;

三、代码部分

1、html部分

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <!-- 建立form表单 -->
    <form action="">
    <!-- 账户 -->
       <input class="account" type="account" name="" value="" placeholder="账户"> 
       <br />
       <!-- 密码 -->
       <input class="password" type="password" name="" value="" placeholder="密码">
       <br />
       <!-- 登录 -->
       <input class="login" type="submit" name="" value="登录">
       <!-- 设置文本 -->
       <p>版权所有&copyhqyj.com</p>
    </form>
    </body>
</html>

2、css部分

body{
    /*插入背景图*/
    background-image: url(image/bgt.jpeg);
}


/*绝对定位，水平垂直都居中*/

form{
    position: absolute;
    left:50%;
    top:50%;
}

.account{
    /*调整高度+宽度*/
    width: 340px;
    height: 50px;
    /*设置边框圆角*/
    border-radius:20px;
    /*取消边框线*/
    border: none;
 

}

.password{
     /*调整高度+宽度*/
    width: 340px;
    height: 50px;
    /*设置边框圆角*/
    border-radius:20px;
    /*取消边框线*/
    border: none;

}

.login{
    width: 340px;
    height: 42px;
    /*设置背景色*/
    background-color:#6daccf;
    /*设置文字大小*/
    font-size: 20px;
    border: none;
    color:#fff;
    /*文本文字加粗*/
    font-weight: bold;
    /*调整登录文本框居中*/
    margin-left: 10px;


}

p{
    /*文本居中*/
    text-align: center;
    margin-top: -2px;

}

input{
    /*边框上下间距*/
    margin:5px;
    /*边框内边距*/
    padding-left: 11px;
}

四、效果图

xiaozhang_74933801
关注
  • 8
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
弄一个html的登录页面,如何制作一个简单的HTML登录页面（附代码）
weixin_42427882的博客
06-03 1万+
几乎每个网站都会有登录页面，那你知道如何写HTML登录页面吗？这篇文章就和大家分享一个HTML简单登录界面的代码，有一定的参考价值，感兴趣的朋友可以看看。**实例：**制作一个HTML登录页面，包含邮箱，登录密码，立即注册，忘记密码等，代码如下：HTML部分：>>>>>>>>>>>>>>>>>登 ...
用idea做一个网页登录界面
Charleslidi的博客
04-03 1万+
在完成创建java类后，在login中写入代码 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String msg ="Hello World"+"\n"+"你好，世界"; PrintWrite...
网页制作：一个简易美观的登录界面
热门推荐
Kuroko's Development Notes
03-09 17万+
这次来总结一下公司的Task 1 实现一个登录界面。 登录界面其实在大三的时候就有做过，但是当时做的界面超级low，主要区别在于有无css，由于公司的设计要求，对于该界面的很多细节处理实在不容易。所以，还是想要写点东西记录一下。 先截个图，展示一下效果吧： 然后我们看一下代码： 在我们做一个页面之前，要先想好他的一个整体布局，也就是我们这里面的login.html主页面，大致结构如...
用hbuilder写一个登录页面
weixin_35753431的博客
02-13 4757
在 HBuilder 中创建一个登录页面需要以下步骤: 新建项目: 点击 HBuilder 主界面的 "新建项目" 按钮，选择 "空项目" 模板。 创建 HTML 页面: 右键项目文件夹，选择 "新建" > "HTML 页面"，命名为 "login.html"。 编写 HTML 代码: 在 "login.html" 文件中，编写 HTML 代码以创建登录表单。例如： <for...
同一个浏览器多用户同时登录的解决方案
06-25 2万+
有时，我们会遇到这样一个问题：我们需要使用多个不同身份的用户帐号登录系统，这怎么解决呢？ 你可以先用一个账户登录，用完后退出，再用另一个帐号登录。或者，你可以安装多个浏览器，在一个浏览器上登录某个帐号，在另一个浏览器上登录另一个帐号。因为，一个浏览器在同一时间同一个域下只允许一个帐号登录。 在开发机上你可能会安装多个浏览器，比如ie、firefox、chrome等等，然后每个浏览器上登录不同的...
弄一个html的登录页面,使用HTML写一个简单的跳转登录页面
weixin_30646537的博客
06-03 1万+
最近在学习前端的知识，于是就想写一个简单的页面跳转，必须是勾选了“我同意”这个选项以后才能跳转，否则不能，不废话，直接上代码。首先是第一个页面：testlogin1.htmlhtml lang="en">head>meta charset="UTF-8">title>Titletitle>head>script>type="text/javascript"...
用PHP&phpstudy写一个可以登录的简单网页
qq_46110224的博客
08-15 1万+
写一个简单网页
如何用idea做一个简易的网页登录界面
currency117的博客
04-04 2万+
在上一节课的内容基础上做一个简易的网页登录界面——18级软工1班03 打开idea后打开上一节课的工程文件（一般在打开idea软件的同时，idea会默认打开上一次的文件）并在左边列表的main文件夹下建立一个名为Java的directory文件。 右键新建的Java文件使其Mark为Sources Root： 然后继续右击Java文件夹，再创建一个包文件： 结果如图： 然后在这个包文件的底...
一个简单的登录注册网页的实现
weixin_46034970的博客
11-21 6558
一个简单的登录注册网页的实现 通过标签让标签内的内容居中显示，再通过标签中的method属性来设置请求方式为post（一般涉及密码等机密数据都用post请求）；再通过action来设置请求地址。这其中注册按钮是要跳转到注册账号的页面的，所以我们要用来实现这个跳转功能，用标签中的href属性来设置跳转的地址。 接下来就是来写注册页面了。 注册页面依旧通过标签让标签内的内容居中显示，再通过标签中的method属性来设置请求方式为post。这其中要注意的就是要给id为text_1和text_2的标签来设置na
html网页加入一个按钮,在html网页设计中，一个“登录”按钮怎么编写代码？
weixin_42316319的博客
06-18 3681
html网页设计：一个简单的登录界面代码！在html网页设计中，一个“登录”按钮怎么编写代码？列如所给图片的“登录”按钮怎么用html代码显示出来，要求能够识别是否输入用户名和密码！是这样的效果吗？3function r(){var username=document.getElementById("username");var pass=document.getElementById("pass...
C#使用WebClient登录网站并抓取登录后的网页信息实现方法
08-30
C#使用WebClient登录网站并抓取登录后的网页信息实现方法是一个非常有用的技术，可以帮助我们模拟浏览器的行为来登录网站和抓取页面内容。但是，我们需要注意相关的法律和道德规范，避免引起不良后果。 更多关于C#...
一个浏览器插件，绕过限制，登录微信网页版！
06-25
最近发现了一个工具，是可以通过这个工具，就可以登录网页版微信。 这是一个edge浏览器插件，你可以通过这个插件，在edge浏览器安装后，登录微信网页版。
一个简单的网页登录
03-17
一个简单的网页登录。有随机验证码，有加密密码。凑活着看看
Javaweb大作业做一个简单网站，包括注册登录等功能
01-29
在本项目中，我们主要探讨的是如何利用JavaWeb技术栈构建一个包含注册和登录功能的简单网站。这个网站能够实现用户的基本交互，如新用户的注册、已有用户的登录以及页面之间的平滑跳转。我们将主要围绕以下几个核心...
33.鼠标悬停时的波浪线效果 & CSS 重置
粉丝们务必加入微信粉丝群
08-25 89
通过理解这些原则,你可以创建你自己的重置,完美地适合你的项目的独特需求。这个技巧是 CSS 和 SVG 如何协同工作以创建令人兴奋的视觉效果的一个很好的例子。通过理解这些技术,你可以创建真正独特和吸引人的网页设计,给你的用户留下深刻印象。它避免了许多旧的 CSS 重置的复杂性和过度特异性,而是依靠更现代的浏览器默认值。从其中一些中汲取灵感,这里是我的自以为是的 CSS 重置,以及我选择包含每个规则的原因解释。虽然这可以工作,但它可能会使你的 CSS 难以阅读和维护,特别是如果你有多个这样的效果。
CSS\JS实现页面背景气泡logo上浮效果
p_s_p的博客
08-24 372
【代码】CSS\JS实现页面背景气泡logo上浮效果。
CSS基础 什么是盒模型
最新发布
呼叫6945的博客
08-28 426
当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒（box）一个盒子由四个部分组成：content、padding、border、margin在css中盒模型可以分为假设一个盒子的css如下。
CSS实现水滴效果图
N201871643的博客
08-26 184
水滴效果：指在网页上呈现出水滴从上方滴落的效果，通常伴随着水波纹扩散的动画效果。CSS：层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档呈现的样式语言。
引号的艺术：用CSS quotes 属性打造个性化引用
2401_85812026的博客
08-25 433
CSS 的quotes属性是一个强大的工具，它允许开发者自定义网页上的引用标记，从而增强网页的视觉效果和用户体验。本文将深入探讨quotes属性的使用方法，包括如何设置不同的引号样式，以及如何结合伪元素和内容生成技术来实现更复杂的引号效果。quotes属性用于指定在元素中使用的引用标记。它可以定义开放引号和闭合引号，以及它们的类型（水平或垂直）。q {/* 定义中文引号和英文引号 */q:before {q:after {
用html写一个登录网页
03-20
好的，以下是一个简单的登录网页的 HTML 代码： ```html <!DOCTYPE html> <html> <head> <title>Login Page</title> </head> <body> <h1>Login</h1> <form action="login.php" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username"><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br><br> <input type="submit" value="Login"> </form> </body> </html> ``` 请注意，这只是一个简单的示例，实际的登录网页需要更多的安全性和验证。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值