alert弹出一个图片_网页制作：一个简易美观的登录界面

最新推荐文章于 2024-06-30 16:07:35 发布

好像爱这个世界啊

最新推荐文章于 2024-06-30 16:07:35 发布

阅读量2.8k

点赞数

文章标签： alert弹出一个图片

本文链接：https://blog.csdn.net/weixin_28878621/article/details/113042153

版权

本文介绍了如何使用HTML、CSS和JavaScript创建一个全屏背景图片的登录界面，包括背景图片拉伸、页面居中、元素圆角、透明背景、输入框对齐、去除下划线、文字居中以及元素间距等关键步骤。

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

效果图

目录结构：

在我们做一个页面之前，要先想好他的一个整体布局，也就是我们这里面的login.html主页面，大致结构如下：

接下来，我们先上代码，看一下具体实现方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
 
    <link rel="stylesheet" type="text/css" href="login.css"/>
    <script type="text/javascript" src="login.js"></script>
</head>
 
<body>
<div id="login_frame">
 
    <p id="image_logo"><img src="images/login/fly.png"></p>
 
    <form method="post" action="login.js">
 
        <p><label class=