Question

我是一名CSS / HTML新手，我还没有真正找到如何通过搜索来做到这一点。我有一个简单的登录页面，用户输入用户名和密码。该页面有一个大的背景图像。我想创建一个圆形框，两个文本字段（用户名和密码）和提交按钮进入并位于顶部，以进一步分离背景图像。这是html文件的主要部分，我只是想知道我应该把什么放入CSS文件的容器部分来获得一个圆形的白色框。

<div class="container">

  <form class="form-signin" role="form" name='f'   
action='${pageContext.request.contextPath}/j_spring_security_check' method='POST'>
    <h2 class="form-signin-heading">Please sign in</h2>
    <input type='text' name='j_username' class="form-control" placeholder="Username" 
required autofocus>
    <input type='password' name='j_password' class="form-control" 
placeholder="Password" required>
    <div class="checkbox">
      <label>
        <input type="checkbox" value="remember-me"> Remember me
      </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
  </form>

Answer 1

就盒子而言，你可以为它创建一个div（我看到你已经完成了：.container）。要围绕角落，您需要使用CSS属性border-radius：

HTML：

<div id="example1">Hello!</div>

CSS：

#example1 {
    width: 100px;
    background: green;
    border-radius: 15px;
    margin: 0 auto;
    text-align: center;
}

JSFiddle Example

Answer 2

看来你有一个bootstrap示例。首先，您需要使用bootstrap（http://getbootstrap.com）然后添加一个最适合容器的类。我推荐课程＆＃34; well＆＃34;，＆＃34; thumbnail＆＃34;和＆＃34; jumbotron＆＃34;。访问bootstrap站点上的CSS部分以查看这些渲染。如果您不想使用引导程序，只需复制CSS代码并将其应用于您的示例。

在两个字段后面设置一个白色容器盒

2 个答案: