443. 2023-03-21 17:09 采纳率: 0%
浏览 18

使用全局css样式表单无法实现对应效果

         <%--
  Created by IntelliJ IDEA.
  User: 32815
  Date: 2023/3/16
  Time: 9:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登陆页面</title>
    <%-- 引用前端框架Bootstrap的样式和脚本代码 --%>
    <link rel="stylesheet" href="script/bootstrap/css/bootstrap.min.css">
    <%-- 引用前端框架Bootstrap的脚本以jQuery开发 --%>
    <script src="script/jquery/jquery-1.8.3.js"></script>
    <script src="script/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<%-- 设计登录窗口 --%>
<div style="width: 50%;margin: 100px auto">
    <h3 style="text-align: center">登录</h3>
    <form class="form-horizontal" action="login" method="post">
        <%--
            若部署项目有应用的上下文路径(application context):action的属性值只能使用login相对路径
            若部署项目没有上下文路径:action的属性值login和/login都可以
        --%>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="inputEmail3" placeholder="Email" name="email">
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword3" placeholder="Password" name="password">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> 记住我
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">登录</button>
            </div>
        </div>
    </form>

</div>
</body>
</html>

img

img

img

复制全局css样式水平排列的表单未实现相同的样式

  1. 邮箱与文本框不在同一行显示
  2. label文本没有加粗
  3. 登录按钮没有外边框
  • 写回答

2条回答 默认 最新

  • allyfireshen 2023-03-21 17:31
    关注

    看效果是因为样式没有正确的加载导致没有效果,修改下路径看下(这是html文件和script文件夹都在web目录下的情况,其他的可参照添加路径):

    <link rel="stylesheet" href="./script/bootstrap/css/bootstrap.min.css">
    <%-- 引用前端框架Bootstrap的脚本以jQuery开发 --%>
    <script src="./script/jquery/jquery-1.8.3.js"></script>
    <script src="./script/bootstrap/js/bootstrap.min.js"></script>
    
    
    
    评论

报告相同问题?

问题事件

  • 创建了问题 3月21日

悬赏问题

  • ¥15 pychram安装jupyter插件
  • ¥60 悬赏破解越狱iphone4s中360保险箱密码遗忘
  • ¥20 ARKts悬浮窗和快捷方式问题
  • ¥15 linux中nginx服务器提示not found on accelerator,如何解决?(语言-php|操作系统-linux)
  • ¥15 comparecluster没有办法kegg
  • ¥15 远程访问linux主机超时
  • ¥15 odoo17存货管理优势于中国国内该行业传统ERP或MES的详细解读和举例
  • ¥15 CPU卡指令整合指令数据都在图片上
  • ¥15 odoo17处理受托加工产品
  • ¥15 如何用MATLAB编码图三的积分