Question

我的css代码如下：

\h

所以视图看起来像：

所以，我需要两个div类，我必须放在<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'> <style> <div class="login-help"> <a href="#">Register</a> • <a href="#">Forgot Password</a> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>里面我试过了.. 但它没有创造......我怎么能这样做？

Answer 1

你的问题不是很清楚

但如果你说登录表单没有创建，请尝试将css代码放在index.html中，这意味着内联工作正常

<html>
  <head>
<meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>

<style>
/*the login card css is inside the html */
 .login-card {
  padding: 40px;
  width: 274px;
  background-color: #F7F7F7;
  margin: 0 auto 10px;
  border-radius: 2px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.login-card h1 {
  font-weight: 100;
  text-align: center;
  font-size: 2.3em;
}

.login-card input[type=submit] {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  position: relative;
}

.login-card input[type=text], input[type=password] {
  height: 44px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 10px;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-top: 1px solid #c0c0c0;
  /* border-radius: 2px; */
  padding: 0 8px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.login-card input[type=text]:hover, input[type=password]:hover {
  border: 1px solid #b9b9b9;
  border-top: 1px solid #a0a0a0;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.login {
  text-align: center;
  font-size: 14px;
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  height: 36px;
  padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
  user-select: none; */
}

.login-submit {
  /* border: 1px solid #3079ed; */
  border: 0px;
  color: #fff;
  text-shadow: 0 1px rgba(0,0,0,0.1); 
  background-color: #4d90fe;
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#4787ed)); */
}

.login-submit:hover {
  /* border: 1px solid #2f5bb7; */
  border: 0px;
  text-shadow: 0 1px rgba(0,0,0,0.3);
  background-color: #357ae8;
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#357ae8)); */
}

.login-card a {
  text-decoration: none;
  color: #666;
  font-weight: 400;
  text-align: center;
  display: inline-block;
  opacity: 0.6;
  transition: opacity ease 0.5s;
}

.login-card a:hover {
  opacity: 1;
}

.login-help {
  width: 100%;
  text-align: center;
  font-size: 12px;
}   

/************/
* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  font-family: 'Cabin', sans-serif;
  background-color: #f0f6ff;
}


.contanier {
  margin:auto;
   background: #fff;
  height: 1500px;
  display: block;
  width: 70%;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
}
#rightcol {

    position:relative;
    float: right;
    display:inline-block;
  width: 30%;
  margin-left:auto;
  margin-right:auto;
  height: 500px;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
}
#content {
  background: #fff;
  position:relative;
    display:inline-block;
 margin-left:auto;
  margin-right:auto;
  width: 68%;
  height: 1500px;

   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
}


.slider {
  display: block;
  margin: auto;
  margin-bottom: 30px;
  width: 60px;
}

.slider ul {
  height: 8px;
}

.slider ul li {
  float: left;
  list-style: none;
  background: url(../img/slide_point_bg.png) no-repeat;
  width: 8px;
  height: 8px;
  margin-left: 5px;
  border-radius: 100%;
}

.slider ul li.active {
  background: url(../img/slide_point_active_bg.png) no-repeat;
}

.slider ul li:hover {
  box-shadow: 0 0 0.5em black;
}

.list-of-resources {
  display: table;
  }

.list-of-resources > div {
  display: table-row;
}

.list-of-resources > div > div {
  display: table-cell;
  /* padding: 5px 0; */
}

.list-of-resources > div > div:last-child {
  padding: 0 0 0 30px;
}

.list-of-resources a {
  text-decoration: none;
  color: white;
}

.list-of-resources a:hover {
  color: tomato;
}

#registration {
  font-family:'Open Sans Condensed', sans-serif;
    width: 100%;
    margin: 0px auto;
    position: relative;
}

#registration .fieldset {
    border-radius: 3px;

}

 #registration legend {
    text-align: center;
    background: black;
    width: 100%;
    padding: 30px 0;
    border-radius: 3px 3px 0 0;
    color: white;
font-size:2em;
}

.fieldset form{
  border:3px solid black;
  margin:0 auto;
  display:block;
  width:100%;
  padding:30px 20px;
  box-sizing: border-box;
  border-radius:0 0 3px 3px;
}
.placeholder #registration label {
    display: none;
}
 .no-placeholder #registration label{
margin-left:5px;
  position:relative;
  display:block;
  color:grey;
  text-shadow:0 1px white;
  font-weight:bold;
}
/* all */
::-webkit-input-placeholder { text-shadow:1px 1px 1px white; font-weight:bold; }
::-moz-placeholder { text-shadow:0 1px 1px white; font-weight:bold; } /* firefox 19+ */
:-ms-input-placeholder { text-shadow:0 1px 1px white; font-weight:bold; } /* ie */
#registration input[type=text] {
    padding: 15px 20px;
    border-radius: 1px;
  margin:5px auto;
  background-color:#f9ebae;
    border: 1px solid silver;

    -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,0.2);
    box-shadow: inset 0 1px 5px rgba(0,0,0,0.2), 0 1px rgba(255,255,255,.8);
    width: 100%;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  -webkit-transition:background-color .5s ease;
-moz-transition:background-color .5s ease;
-o-transition:background-color .5s ease;
-ms-transition:background-color .5s ease;
transition:background-color .5s ease;
}
.no-placeholder #registration input[type=text] {
    padding: 10px 20px;
}

#registration input[type=text]:active, .placeholder #registration input[type=text]:focus {
    outline: none;
    border-color: silver;
  background-color:white;
}

#registration input[type=submit] {
  font-family:'Open Sans Condensed', sans-serif;
  text-transform:uppercase;
  outline:none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    background-color: red;
    padding: 10px;
    color: white;
    border-radius: 3px;
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 5px;
    cursor: pointer;
  position:relative;
  top:0;
}

#registration input[type=submit]:hover {
    background-color: #2980b9;
}

#registration input[type=submit]:active {
background:#5C8CA7;
}


.parsley-error-list{
background-color:#C34343;
padding: 5px 11px;
margin: 0;
list-style: none;
border-radius: 0 0 3px 3px;
margin-top:-5px;
  margin-bottom:5px;
  color:white;
  border:1px solid #870d0d;
  border-top:none;
    -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position:relative;
  top:-1px;
  text-shadow:0px 1px 1px #460909;
    font-weight:700;
  font-size:12px;
}
.parsley-error{
    border-color:#870d0d!important;
  border-bottom:none;
}
#registration select{
    width:100%;
    padding:5px;
}
::-moz-focus-inner {
  border: 0;
}

@media screen and (max-width: 1000px) {

  .container {
    width: 90%;
  }
}

@media screen and (max-width: 700px) {

     #rightcol, #content{display:block; width:100%;}

   .contanier {
    display:block;
      width:95%;

    -webkit-flex-flow: column;
            flex-direction: column;

   }

   #rightcol, #content {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }

  #rightcol{
    min-height: 50px;
    max-height: 50px;
   }



  }


</style>


  </head>


<body>

  <div class="contanier">

<div id="content">
<div class="login-card">
    <h1>Log-in</h1><br>
  <form>
    <input type="text" name="user" placeholder="Username">
    <input type="password" name="pass" placeholder="Password">
    <input type="submit" name="login" class="login login-submit" value="login">
  </form>

  <div class="login-help">
    <a href="#">Register</a> • <a href="#">Forgot Password</a>
  </div>
</div>

    <div class="login-card">
    <h1>Log-in</h1><br>
  <form>
    <input type="text" name="user" placeholder="Username">
    <input type="password" name="pass" placeholder="Password">
    <input type="submit" name="login" class="login login-submit" value="login">
  </form>

  <div class="login-help">
    <a href="#">Register</a> • <a href="#">Forgot Password</a>
  </div>
</div>

</div>



<div id="rightcol">

    <div id="registration">
    <div class='fieldset'>
    <legend>put your id below</legend>
        <form action="#" method="post" data-validate="parsley">

            <div class='row'>
                <label for="email">put your id</label>
                <input type="text" placeholder="yourid@example.com"  name='email' data-required="true" data-type="email" data-error-message="Your E-mail is required">
            </div>

            <input type="submit" value="Submit">
        </form>
    </div>
</div>
 </div>
    </div>

    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
</body>
</html>

如果这不是你的问题请评论我可以帮助这个

并且你想要将登录表单设置为正确你应该使div id内容的宽度超过你所拥有的宽度然后放一个浮点数然后你可以对css代码进行其他调整

Answer 2

*
        {
            margin: 0;
            padding: 0;
        }
        
        body
        {
            width: 50%;
            font-family: 'Cabin' , sans-serif;
            background-color: #f0f6ff;
        }
        
        .contanier
        {
            margin: auto;
            background: #fff; /* height: 1500px; */
            display: block; /* width: 10%; */
            -webkit-flex: 3 1 60%;
            flex: 3 1 60%;
            -webkit-order: 2;
            order: 2;
        }
        #rightcol
        {
            position: relative;
            float: right;
            display: inline-block;
            width: 30%;
            margin-left: auto;
            margin-right: auto;
            height: 500px;
            -webkit-flex: 1 6 20%;
            flex: 1 6 20%;
            -webkit-order: 3;
            order: 3;
        }
        #content
        {
            background: #fff;
            position: relative;
            display: inline-block;
            margin-left: auto;
            margin-right: auto;
            width: 68%;
            height: 1500px;
            -webkit-flex: 1 6 20%;
            flex: 1 6 20%;
            -webkit-order: 3;
            order: 3;
        }
        
        .slider
        {
            display: block;
            margin: auto;
            margin-bottom: 30px;
            width: 60px;
        }
        
        .slider ul
        {
            height: 8px;
        }
        
        .slider ul li
        {
            float: left;
            list-style: none;
            background: url(../img/slide_point_bg.png) no-repeat;
            width: 8px;
            height: 8px;
            margin-left: 5px;
            border-radius: 100%;
        }
        
        .slider ul li.active
        {
            background: url(../img/slide_point_active_bg.png) no-repeat;
        }
        
        .slider ul li:hover
        {
            box-shadow: 0 0 0.5em black;
        }
        
        .list-of-resources
        {
            display: table;
        }
        
        .list-of-resources > div
        {
            display: table-row;
        }
        
        .list-of-resources > div > div
        {
            display: table-cell; /* padding: 5px 0; */
        }
        
        .list-of-resources > div > div:last-child
        {
            padding: 0 0 0 30px;
        }
        
        .list-of-resources a
        {
            text-decoration: none;
            color: white;
        }
        
        .list-of-resources a:hover
        {
            color: tomato;
        }
        
        #registration
        {
            font-family: 'Open Sans Condensed' , sans-serif;
            width: 100%;
            margin: 0px auto;
            position: relative;
        }
        
        #registration .fieldset
        {
            border-radius: 3px;
        }
        
        #registration legend
        {
            text-align: center;
            background: black;
            width: 100%;
            padding: 30px 0;
            border-radius: 3px 3px 0 0;
            color: white;
            font-size: 2em;
        }
        
        .fieldset form
        {
            border: 3px solid black;
            margin: 0 auto;
            display: block;
            width: 100%;
            padding: 30px 20px;
            box-sizing: border-box;
            border-radius: 0 0 3px 3px;
        }
        .placeholder #registration label
        {
            display: none;
        }
        .no-placeholder #registration label
        {
            margin-left: 5px;
            position: relative;
            display: block;
            color: grey;
            text-shadow: 0 1px white;
            font-weight: bold;
        }
        /* all */
        ::-webkit-input-placeholder
        {
            text-shadow: 1px 1px 1px white;
            font-weight: bold;
        }
        ::-moz-placeholder
        {
            text-shadow: 0 1px 1px white;
            font-weight: bold;
        }
        /* firefox 19+ */
        :-ms-input-placeholder
        {
            text-shadow: 0 1px 1px white;
            font-weight: bold;
        }
        /* ie */
        #registration input[type=text]
        {
            padding: 15px 20px;
            border-radius: 1px;
            margin: 5px auto;
            background-color: #f9ebae;
            border: 1px solid silver;
            -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,0.2);
            box-shadow: inset 0 1px 5px rgba(0,0,0,0.2), 0 1px rgba(255,255,255,.8);
            width: 100%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: background-color .5s ease;
            -moz-transition: background-color .5s ease;
            -o-transition: background-color .5s ease;
            -ms-transition: background-color .5s ease;
            transition: background-color .5s ease;
        }
        .no-placeholder #registration input[type=text]
        {
            padding: 10px 20px;
        }
        
        #registration input[type=text]:active, .placeholder #registration input[type=text]:focus
        {
            outline: none;
            border-color: silver;
            background-color: white;
        }
        
        #registration input[type=submit]
        {
            font-family: 'Open Sans Condensed' , sans-serif;
            text-transform: uppercase;
            outline: none;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            background-color: red;
            padding: 10px;
            color: white;
            border-radius: 3px;
            font-size: 1.5em;
            font-weight: bold;
            margin-top: 5px;
            cursor: pointer;
            position: relative;
            top: 0;
        }
        
        #registration input[type=submit]:hover
        {
            background-color: #2980b9;
        }
        
        #registration input[type=submit]:active
        {
            background: #5C8CA7;
        }
        
        
        .parsley-error-list
        {
            background-color: #C34343;
            padding: 5px 11px;
            margin: 0;
            list-style: none;
            border-radius: 0 0 3px 3px;
            margin-top: -5px;
            margin-bottom: 5px;
            color: white;
            border: 1px solid #870d0d;
            border-top: none;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            position: relative;
            top: -1px;
            text-shadow: 0px 1px 1px #460909;
            font-weight: 700;
            font-size: 12px;
        }
        .parsley-error
        {
            border-color: #870d0d !important;
            border-bottom: none;
        }
        #registration select
        {
            width: 100%;
            padding: 5px;
        }
        ::-moz-focus-inner
        {
            border: 0;
        }
        
        .login-card
        {
            padding: 40px;
            width: 274px;
            background-color: #F7F7F7;
            margin: 0 auto 10px;
            border-radius: 2px;
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }
        .login-card h1
        {
            font-weight: 100;
            text-align: center;
            font-size: 2.3em;
        }
        
        .login-card input[type=submit]
        {
            width: 100%;
            display: block;
            margin-bottom: 10px;
            position: relative;
        }
        .login-card input[type=text], input[type=password]
        {
            height: 44px;
            font-size: 16px;
            width: 100%;
            margin-bottom: 10px;
            -webkit-appearance: none;
            background: #fff;
            border: 1px solid #d9d9d9;
            border-top: 1px solid #c0c0c0; /* border-radius: 2px; */
            padding: 0 8px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }
        
        .login-card input[type=text]:hover, input[type=password]:hover
        {
            border: 1px solid #b9b9b9;
            border-top: 1px solid #a0a0a0;
            -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
            -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
        }
        
        .login
        {
            text-align: center;
            font-size: 14px;
            font-family: 'Arial' , sans-serif;
            font-weight: 700;
            height: 36px;
            padding: 0 8px; /* border-radius: 3px; */ /* -webkit-user-select: none;
  user-select: none; */
        }
        
        .login-submit
        {
            /* border: 1px solid #3079ed; */
            border: 0px;
            color: #fff;
            text-shadow: 0 1px rgba(0,0,0,0.1);
            background-color: #4d90fe; /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#4787ed)); */
        }
        
        .login-submit:hover
        {
            /* border: 1px solid #2f5bb7; */
            border: 0px;
            text-shadow: 0 1px rgba(0,0,0,0.3);
            background-color: #357ae8; /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#357ae8)); */
        }
        
        .login-card a
        {
            text-decoration: none;
            color: #666;
            font-weight: 400;
            text-align: center;
            display: inline-block;
            opacity: 0.6;
            transition: opacity ease 0.5s;
        }
        
        .login-card a:hover
        {
            opacity: 1;
        }
        
        .login-help
        {
            width: 100%;
            text-align: center;
            font-size: 12px;
        }
        @media screen and (max-width: 1000px)
        {
        
            .container
            {
                width: 90%;
            }
        }
        
        @media screen and (max-width: 700px)
        {
        
            #rightcol, #content
            {
                display: block;
                width: 100%;
            }
        
            .contanier
            {
                display: block;
                width: 95%;
                -webkit-flex-flow: column;
                flex-direction: column;
            }
        
            #rightcol, #content
            {
                /* Return them to document order */
                -webkit-order: 0;
                order: 0;
            }
        
            #rightcol
            {
                min-height: 50px;
                max-height: 50px;
            }
        
        
        
        }
        
        #Div1
        {
            float: left;
        }
        #Div2
        {
            float: right;
        }

<div class="contanier">
        <div id="Div1">
            <div class="login-card" style="float: left">
                <h1>
                    Log-in</h1>
                <br />
                <form>
                <input type="text" name="user" placeholder="Username">
                <input type="password" name="pass" placeholder="Password">
                <input type="submit" name="login" class="login login-submit" value="login">
                </form>
                <div class="login-help">
                    <a href="#">Register</a> • <a href="#">Forgot Password</a>
                </div>
            </div>
        </div>
        <div id="Div2">
            <div id="Div3">
                <div class='fieldset'>
                    <legend>put your id below</legend>
                    <form action="#" method="post" data-validate="parsley">
                    <div class='row'>
                        <label for="email">
                            put your id</label><br />
                        <input type="text" placeholder="yourid@example.com" name='email' data-required="true"
                            data-type="email" data-error-message="Your E-mail is required">
                    </div>
                    <input type="submit" value="Submit">
                    </form>
                </div>
            </div>
        </div>
        <div id="Div4">
            <div class="login-card" style="float: left">
                <h1>
                    Log-in</h1>
                <br />
                <form>
                <input type="text" name="user" placeholder="Username">
                <input type="password" name="pass" placeholder="Password">
                <input type="submit" name="login" class="login login-submit" value="login">
                </form>
                <div class="login-help">
                    <a href="#">Register</a> • <a href="#">Forgot Password</a>
                </div>
            </div>
        </div>
    </div>

试试这个片段。它将在左侧创建两个登录div，并在右侧创建一个“put id”div。您可以创建一个空白HTML文件来测试此代码段。如果您在此浏览器中运行此代码段，由于结果宽度部分，您可能会看到另一个下方的div，但在整个屏幕页面上正常工作。

css如何将鳕鱼放入容器中

2 个答案: