第一次上机测试：BootStrap

最新推荐文章于 2024-07-19 18:46:52 发布

怡云_Expectancy

最新推荐文章于 2024-07-19 18:46:52 发布

阅读量353

点赞数 6

文章标签： bootstrap css javascript

本文链接：https://blog.csdn.net/As_Expected/article/details/134738435

版权

原题目要求如下：

代码：

<!DOCTYPE html>
<html>
<head>
    <title>登录界面</title>
    <style>

        /*表单样式*/
        .login-form {
            width: 300px;
            background-color: #fff;
            padding: 30px;
            border-radius: 5px;   /*边框圆角*/
            box-shadow: 0px 0px 10px rgba(0,0,0,0.1);   /*添加阴影*/
        }
        /*表单标题样式*/
        .login-form h2 {
            margin: 0 0 15px;
            text-align: center;
        }
        /*输入框样式*/
        .login-form input {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
        /*确定按钮*/
        .sure {
            width: 25%;
            padding: 10px;   /*内间距*/
            border: none;   /*无边框*/
            border-radius: 5px;   /*边框圆角*/
            background-color: #0033ff;   /*按钮背景色*/
            color: #fff;   /*按钮文字颜色*/
            cursor: pointer;   /*鼠标指针样式变化*/
        }
        /*取消按钮*/
        .cancel {
            width: 25%;  
            padding: 10px;
            border: none;
            border-radius: 5px;
            background-color: #ffbb00;
            color: black;
            cursor: pointer;
        }
       
        
    </style>
</head>
<body>
    <form class="login-form">
        <h1>请登录</h1>
        <input type="text" placeholder="用户名" required>   <!--required确保用户输入正确-->
        <input type="password" placeholder="密码" required>
        <button class="sure" type="submit">登录</button>
        <button class="cancel" type="reset">取消</button>
    </form>

</body>
</html>

运行结果：

其中输入框前的@符号暂时还不能够很好的解决……