欢迎来访好站网,优质网站模板提供商!

您现在的位置: 首页>>建站教程>>安装问题

html登录开心网代码

来源:本站 发布时间:2023-10-25热度:1754 ℃
好站网为您提供一个简单的登录开心网页面的HTML代码示例,您可以根据您的需求进行修改和美化。```html<!DOCTYPE html><html><head> &···

好站网为您提供一个简单的登录开心网页面的HTML代码示例,您可以根据您的需求进行修改和美化。


```html

<!DOCTYPE html>

<html>


<head>

    <title>登录页面</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            background-color: #F8F8F8;

        }


        .container {

            width: 300px;

            margin: 0 auto;

            margin-top: 100px;

            background-color: #FFFFFF;

            padding: 20px;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        }


        h1 {

            text-align: center;

            margin-bottom: 20px;

        }


        label,

        input {

            display: block;

            margin-bottom: 10px;

        }


        label {

            font-weight: bold;

        }


        input[type="text"],

        input[type="password"] {

            width: 100%;

            padding: 5px;

        }


        input[type="submit"] {

            background-color: #4CAF50;

            color: white;

            border: none;

            padding: 10px;

            width: 100%;

            cursor: pointer;

        }


        input[type="submit"]:hover {

            background-color: #45a049;

        }

    </style>

</head>


<body>

    <div class="container">

        <h1>登录</h1>

        <form>

            <label for="username">用户名:</label>

            <input type="text" id="username" name="username" required>

            <label for="password">密码:</label>

            <input type="password" id="password" name="password" required>

            <input type="submit" value="登录">

        </form>

    </div>

</body>


</html>

```


这个示例代码创建了一个简单的登录页面,具有居中的登录框和用户名、密码输入框以及登录按钮。您可以根据需要进行更改,例如更改背景颜色、字体等来满足您对正式风格的要求。请注意,这只是一个基本示例,还可以根据具体要求进行进一步定制化。


上一篇:html鼠标跟随代码实现方法及应用场景

下一篇:没有了!