Question

之前我问了同样的问题，但是我从过去做了代码更改。我仍然有调整div大小的相同问题。

我正在尝试设计一个登录页面，截图如下。

我希望输出为http://prntscr.com/2pga73。我正在尝试减少标签的大小

<div id="logo" class="logo col-xs-2"></div>

<div id="title" class="page-title green-bg col-xs-8">Local Adventures</div>

我是CSS的新手，请建议我解决这个问题的方法。我在我的项目中使用twitter bootstrap。

我有以下HTML：

<head>

    <link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/components/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="C:/L.A project/local-adventure/web/src/main/webapp/resources/components/bootstrap/js/bootstrap.min.js"></script>
    <link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/createaccount.css" rel="stylesheet">
    <link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/styles.css"rel='stylesheet' type='text/css' href='styles.css' />
    <link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/main.css" rel="stylesheet">

    <meta charset="utf-8">

    </head>

    <title>Local-Adventures</title>

        <div class="visible-xs stop-detail">    
            <div id="login-form">
            <div class="logo col-xs-4"></div>
            <div class="page-title green-bg col-xs-8">Local Adventures</div>

            <a href="#">Create an Account</a>
            <a href="#">Sign In</a>
              <input type="email" required value="Email Address" onBlur="if(this.value=='')this.value='Email Address'" onFocus="if(this.value=='Email Address')this.value='' ">
              <input type="email" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' ">
              <input type="email" required value="Confirm password" onBlur="if(this.value=='')this.value='Confirm password'" onFocus="if(this.value=='Confirm password')this.value='' ">

        <br><br>
        <span class='btn btn-lg btn-success btn-block'>Create An Account</span>
        <span class='btn btn-lg btn-primary btn-block'>Facebook Login</span>

    </div> <!-- end login-form -->



    </div>

我的CSS如下：

   @charset "utf-8";
/* CSS Document */

/* ---------- GENERAL ---------- */
/*
body {
    background: #FFFFFF;
    color: #999;
    font: 100%/1.5em sans-serif;
    margin: 0;
}
*/


a {
    color: #2a2a2a;
    text-decoration: none;
    margin:1px 33;
}

a:hover { color: #88c425; }

fieldset {
    border: none;
    margin: 0;
}
.btn-success {
 border-radius:0px;
 background-color: #88c425
}

.btn-success:hover {
background-color: #88c425
}

.btn-primary {
 border-radius:0px;
}

input {
    border: none;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    -webkit-appearance: none;
}

input:focus {
  outline: none;
}

input[type="submit"] { cursor: pointer; }

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
    content: "";
    display: table; 
}
.clearfix:after { clear: both; }

/* ---------- LOGIN-FORM ---------- */

#login-form {
    margin: 50px auto;
    width: 300px;
}

#login-form h3 {
    background-color: #79a002;
    border-radius: 5px 5px 0 0;
    color: #fff;
    font-size: 14px;
    padding: 20px;
    text-align: center;
    text-transform: uppercase;
}

#login-form fieldset {
    background: #fff;
    border-radius: 0 0 -1px -1px;
    padding: 0px;

}

#login-form fieldset:before {
    background-color: #fff;
    content: "";
    height: 8px;
    left: 50%;
    margin: -4px 0 0 -4px;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 8px;
}

#login-form input {
    font-size: 14px;
}

#login-form input[type="email"], #login-form input[type="password"] {
    border:none; /* clear previous borders */
    border-bottom: 1px solid #88c425; /* add bottom border */
    padding: 12px 10px;
    width: 300px;
}

#login-form input[type="email"] {
    border-radius: 3px 3px 0 0;
}

#login-form input[type="password"] {
    border-top: none;
    border-radius: 0px 0px 3px 3px;
}

#login-form input[type="submit"] {
    background: #1dabb8;
    border-radius: 3px;
    color: #fff;
    float: right;
    font-weight: bold;
    margin-top: 20px;
    padding: 12px 20px;
}

Answer 1

您可以使用开发人员工具查看影响每个元素的内容。例如在Firefox中，如果右键单击页面上的任何内容并按下inspect元素，它将显示应用了哪些css属性，它们所处的标记，甚至是它们所处的css文档以及它们所在的行！从那里你可以进入你的CSS并更改它甚至在inspect元素面板中更改实时页面本身的内容，以便自己预览你想要做什么。你应该学会使用的另一个好工具是firebug，尝试下载它并练习使用它。

Answer 2

小提琴：http://jsfiddle.net/Varinder/ndcad/

像bootstrap这样的框架通常不需要比基本Web应用程序或控件元素等更广泛的需求

在你的情况下，特定的标题样式等会因为框架而变得有点痛苦。

尽可能少地依赖框架总是一个好主意。

以下将使您朝着正确的方向前进：

<强> HTML

<div class="login-form-header">
   <div class="logo">
      <img src="http://placehold.it/50x50" />
   </div>
   <h2 class="page-title green-bg">Local Adventures</h2>
</div>

回避使用网格类，因为它们不适合这里。

<强> CSS

.login-form-header {
    overflow:hidden; /* clearfix */    
    background:#88C425;
}

.logo {
    float:left;
}

.page-title {
    margin:0;
    white-space:nowrap;
    text-overflow:ellipsis;
    color:white;
    line-height:50px; /* height of the logo image to center text verticaly */
    margin-left:60px;
}

如何使用twitter bootstrap减少CSS中的div大小？

2 个答案: