为什么我的表单单独显示好，但在放入整个页面时会搞乱？

时间：2013-12-01 06:41:11

标签： html css forms

我有一个带有HTML和CSS的表单，表单显示良好而不与其他元素组合。但是当我尝试将它放入我的整个页面（内容区域的左栏）时，表单看起来只是“正常”，不像以前那么好。

以下是整个页面的HTML和CSS：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bookstore</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>

<div class="container">

  <div class="header">   
 <!--   <img src=" " class="logo">   -->
    <h1 class="logo_text">Book store</h1>

    <form action="http://www.base-domain.com/" method="post" class="login_form">     

      <div class="login_form_input_container">

        <label for="email" class="login_form_label">Email</label>

        <input type="email" id="email" name="email" class="login_form_input">
      </div>

      <div class="login_form_input_container">  

        <label for="password" class="login_form_label">Password</label>

        <input type="password" id="password" name="password" class="login_form_input">

      </div>

      <a href="http://www.base-domain.com/forgot_password/" 

class="forgot_password_link">Forgot password?</a>

      <input type="submit" id="login_submit" name="login_submit" value="Log In" 

class="login_form_submit">

    </form>

  </div><!-- end .header -->


  <div class="nav">

    <ul class="nav_links">    

      <li class="nav_link_container"><a href="" class="nav_link">link one</a></li>

      <li class="nav_link_container"><a href="" class="nav_link">link one</a></li>

      <li class="nav_link_container"><a href="" class="nav_link">link one</a></li>

      <li class="nav_link_container"><a href="" class="nav_link">link one</a></li>

      <li class="nav_link_container"><a href="" class="nav_link">link one</a></li>

    </ul>

  </div><!-- end .nav -->


<!-- begin .content, which contains .sidebar and .main columns -->
  <div class="content">

    <div class="sidebar">

      <div id="search_form_wrapper">

        <form name="search" action="/" method="post" class="search_form">

        <fieldset><legend>I'm looking for...</legend>

        <div>
        <label class="search_form_label" for="keywords">Key Words</label>
        </div>

        <div>
        <input type="text" name="keywords" placeholder="Keywords"/>
        </div>

        <div>
        <label class="search_form_label" for="county">County</label>
        </div>

        <div>
        <input type="text" name="county" placeholder="County"/>
        </div>

        <div class="search_button_group"> 
          <input type="submit" name="submit" value="search jobs"/>

          <div class="advanced_search_link"><a href="" class="advanced_search_link">Advanced 

Search</a>
          </div>
        </div>

        </fieldset> 

        </form>

      </div><!-- end .search_form_wrapper -->

    </div><!-- end .sidebar -->


    <div class="main">

      <h2 class="main_h2">Book stroe</h2>

      <p class="main_p1">Book stroe</p>

      <img src="" alt="staff banner" width="81%" height="206" class="main_banner">

      <p class="main_p2">Book stroe.</p>

      <h3>Book stroe</h3>

  <p>Book stroe.</p>

    </div><!-- end .main -->

  </div> <!-- end .content -->


  <div class="footer">

    <ul class="footer_menu">

      <li><a href="">Site Map</a></li>

      <li><a href="/>Site Map</a></li>

      <li><a href="">Site Map</a></li>

      <li><a href="">Site Map</a></li>

      <li><a href="">Discrimination</a></li>

    </ul>

    <p class="copyright"><strong>Copyright &copy; </p>

  </div><!-- end .footer -->

</div><!-- end .container -->

</body>
</html>

css文件在这里：

a, body, div, form, html, img, label, li, ul {

    margin: 0;

    padding: 0;

}

body {

    font-size: 16px;

    font-family: Tahoma, "Lucida Grande", Arial, sans-serif;

    background: url("../images/bg.gif") repeat-x left top;

}

.container {

    margin: 0 auto;

    width: 1250px;

}

.header {



    overflow: hidden;

}

.logo {

    display: block;

    float: left;

}

.logo_text {

    float: left;

    color: rgba(255,255,255,1);

    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-weight: bold;

    width: 956px;
}


.login_form {

    overflow: hidden;

}

.login_form_input_container {

    margin: 5px;

    overflow: hidden;

}

.login_form_label {

    display: block;

    float: left;

    font-size: 1.125em;

    font-weight: bold;

    margin-top: 4px;

    width: 80px;

}

.login_form_input {

    display: block;

    float: right;

    width: 185px;

}

.forgot_password_link {

    color: #2A667C;

    display: inline-block;

    /*display: inline; */

    margin: 10px 0 0 5px;



    /*zoom: 1;  */

}

.login_form_submit {

    background: #2A667C;

    border-radius: 8px;

    color: #FFF;

    cursor: pointer;

    display: block;

    float: right;

    font-size: 1.125em;

    font-weight: bold;

    margin-right: 5px;

    padding: 4px 8px;

}

.login_form_submit:hover {

    background: #98BF21;

}

.nav {

    background: #98BF21;

    text-align: center;

    font-family: Helvetica,Arial,sans-serif;

}

.nav_links {

    list-style: none;

    margin: 0 auto;

    overflow: hidden;

    width: 900px;

}

.nav_link_container {

    float: left;

    width: 180px;

}

.nav_link {

    color: #FFF;

    display: block;

    font-size: 1.25em;

    font-weight: bold;

    padding: 10px;

    text-align: center;

    text-decoration: none;

    text-transform: uppercase;

    width: 160px;

}

.nav_link:hover {

    background: #2A667C;

}


/** Content Div **/
.content {

    clear: both; /* clear #nav ul li's following elements */

    width: 100%; /* set the width of #content to 100% */

    overflow: hidden; /* make it stretch to contain the floated elements */

    margin-top: 1.5em;

}

.sidebar {

    float: left;

    width: 30%;

    margin-right: 5%;

}

/* search form */
.search_form_wrapper {
    width:100%;
    margin:0 auto;
    font-family:Verdana, sans-serif;
}

.search_form_wrapper legend {
    color:#0481b1;
    font-size:21px;
    padding:0 10px;
    background:#fff;
    -moz-border-radius:4px;
    box-shadow: 0 1px 5px rgba(4, 129, 177, 0.5);
    padding:5px 10px;
    text-transform:uppercase;
    font-family:Helvetica, sans-serif;
    font-weight:bold;
}

.search_form_wrapper fieldset {
    border-radius:4px;
    background: #fff; 
    background: -moz-linear-gradient(#fff, #f9fdff);
    background: -o-linear-gradient(#fff, #f9fdff);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f9fdff)); /
    background: -webkit-linear-gradient(#fff, #f9fdff);
    padding:20px;
    border-color:rgba(4, 129, 177, 0.4);
}

.search_form_wrapper input {
    color: #373737;
    background: #fff;
    border: 1px solid #CCCCCC;
    color: #aaa;
    font-size: 14px;
    line-height: 1.2em;
    margin-bottom:15px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
}

.search_form_wrapper input[type="text"] {
    padding: 8px 6px;
    height: 22px;
    width:280px;
}

.search_form_wrapper input[type="text"]:focus {
    background:#f5fcfe;
    text-indent: 0;
    z-index: 1;
    color: #373737;
    -webkit-transition-duration: 400ms;
    -webkit-transition-property: width, background;
    -webkit-transition-timing-function: ease;
    -moz-transition-duration: 400ms;
    -moz-transition-property: width, background;
    -moz-transition-timing-function: ease;
    -o-transition-duration: 400ms;
    -o-transition-property: width, background;
    -o-transition-timing-function: ease;
    width: 380px;

    border-color:#ccc;
    box-shadow:0 0 5px rgba(4, 129, 177, 0.5);
    opacity:0.6;
}

.search_form_wrapper input[type="submit"]{
    background: #222;
    border: none;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    text-transform:uppercase;
    color: #eee;
    cursor: pointer;
    font-size: 15px;
    margin: 10px 0;
    padding: 5px 22px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-border-radius:4px;
    -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}

.search_form_label {
    display: block;
    width: 8em;
    text-align: left;
    color: #2A9FAA; 
    font-weight: bold;
    font-size: 1.125em;
    margin: 7px 0;
}

.search_button_group {
    float: left;
}

.advanced_search_link {
    color: #2A667C;
    display: inline-block;
    text-decoration: none;
    margin-left: 8px;
    color: rgb(49, 90, 170);
    font-size: 18px;
}

a.advanced_search_link:hover {
    text-decoration:underline;
    color: #2A00FF;
}
/* search form ends */


.main 
{
    float: left;
    width: 812.5px;
    overflow: hidden; /* make it stretch to contain the floated elements */ 
}

.main-h2 
{

    font-size: 280%;
    font-weight: bold;
}

.main_banner {
    width: 65%;

}


.main_p1
{

    font-size: 135%;
    margin-left: 0.3em;

}

.main_p2
{

    font-size: 130%;
    margin-top: 0.5em;
    margin-left: 0.3em;
}   


/** Footer Div **/
.footer 
{
    clear: left; /* starts the footer below the floated content */
    overflow: hidden; /* make it stretch to contain the floated elements */
    width: 100%;      /* fix float containment fail */
    margin-top: 1em;
    border-top: 10px solid #98BF21;
    background-color:#1183DA;
    font-family: Helvetica,Arial,sans-serif;
}

ul.footer_menu 
{
    list-style-type: none;
    padding: 0;
    clear: both; /* starts the nav below the floated header */
    overflow:hidden;
    text-align:center;

    color: #FFF; 
}

ul.footer_menu li 
{
    display:inline-block;
} 

ul.footer_menu li a:link, ul.footer_menu li a:visited 
{
    margin:0 auto;
    display:block;
    width: 120px;
    font-weight:bold;
    color:#FFFFFF;
    text-align:center;
    padding:4px;
    text-decoration:none;
    /* text-transform:uppercase;*/
}
ul.footer_menu li a:hover, ul.footer_menu li a:active 
{
    background-color:#98BF21;
}


.copyright 
{
    text-align: center;
    color: white;

}

strong
{
    font-weight: bold;
}

如果您在浏览器中显示上面的代码，您可能会看到左栏中的表单看起来不太好。

但是在下面这个单独的文件中，如果你在浏览器中运行它，你会发现表单看起来很棒：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="en">
<head>
    <title>Register form with HTML5 using placeholder and CSS3</title>
</head>
<style type="text/css">
    #wrapper {
        width:450px;
        margin:0 auto;
        font-family:Verdana, sans-serif;
    }
    #wrapper legend {
        color:#0481b1;
        font-size:21px;
        padding:0 10px;
        background:#fff;
        -moz-border-radius:4px;
        box-shadow: 0 1px 5px rgba(4, 129, 177, 0.5);
        padding:5px 10px;
        text-transform:uppercase;
        font-family:Helvetica, sans-serif;
        font-weight:bold;
    }
    #wrapper fieldset {
        border-radius:4px;
        background: #fff; 
        background: -moz-linear-gradient(#fff, #f9fdff);
        background: -o-linear-gradient(#fff, #f9fdff);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f9fdff)); /
        background: -webkit-linear-gradient(#fff, #f9fdff);
        padding:20px;
        border-color:rgba(4, 129, 177, 0.4);
    }
    #wrapper input {
        color: #373737;
        background: #fff;
        border: 1px solid #CCCCCC;
        color: #aaa;
        font-size: 14px;
        line-height: 1.2em;
        margin-bottom:15px;

        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        border-radius:4px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    #wrapper input[type="text"] {
        padding: 8px 6px;
        height: 22px;
        width:280px;
    }
    #wrapper input[type="text"]:focus {
        background:#f5fcfe;
        text-indent: 0;
        z-index: 1;
        color: #373737;
        -webkit-transition-duration: 400ms;
        -webkit-transition-property: width, background;
        -webkit-transition-timing-function: ease;
        -moz-transition-duration: 400ms;
        -moz-transition-property: width, background;
        -moz-transition-timing-function: ease;
        -o-transition-duration: 400ms;
        -o-transition-property: width, background;
        -o-transition-timing-function: ease;
        width: 380px;

        border-color:#ccc;
        box-shadow:0 0 5px rgba(4, 129, 177, 0.5);
        opacity:0.6;
    }
    #wrapper input[type="submit"]{
        background: #222;
        border: none;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
        text-transform:uppercase;
        color: #eee;
        cursor: pointer;
        font-size: 15px;
        margin: 10px 0;
        padding: 5px 22px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-border-radius:4px;
        -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
        box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    }



.search_form_label {
    display: block;
    width: 8em;
    text-align: left;
    color: #2A9FAA; 
    font-weight: bold;
    font-size: 1.125em;
    margin: 7px 0;
}

.search_button_group {
    float: left;
}
.advanced_search_link {
        color: #2A667C;

    display: inline-block;

    /*display: inline; */
    text-decoration: none;
    margin-left: 8px;
color: rgb(49, 90, 170);
font-size: 18px;

}

a.advanced_search_link:hover {
    text-decoration:underline;
    color: #2A00FF;
}
</style>
<body>
    <div id="wrapper">
        <form name="search" action="/" method="post" class="search_form">
            <fieldset>
                <legend>I'm looking for...</legend>
                <div>
                        <label class="search_form_label" for="keywords">Key 

Words</label>
                </div>
                <div>
                    <input type="text" name="keywords" placeholder="Keywords"/>
                </div>
                <div>
                        <label class="search_form_label" for="county">County</label>
                </div>
                <div>
                    <input type="text" name="county" placeholder="County"/>
                </div>

                <div class="search_button_group"> 
                <input type="submit" name="submit" value="search jobs"/>
                                <div 

class="advanced_search_link">
                                      <a href="" 

class="advanced_search_link">Advanced Search</a>
                      </div>
                      </div>
            </fieldset>    
        </form>
    </div>
</body>
</html>

如何在整个页面中使表单看起来很棒？有人可以帮忙吗？非常感谢

2 个答案:

答案 0 :(得分：0)

你写<link rel="styleshtte" href="styles.css">

您应该编写<link rel="stylesheet" href="styles.css">并检查这是否是styles.css的正确路径。

您的styles.css文件与html表单位于同一文件夹中吗？

答案 1 :(得分：0)

这是一个小提琴，这可能是你寻找的http://jsfiddle.net/uFFXX/ 

  #wrapper {
    width:450px;
    margin:0 auto;
    font-family:Verdana, sans-serif;
}
#wrapper legend {
    color:#0481b1;
    font-size:21px;
    padding:0 10px;
    background:#fff;
    -moz-border-radius:4px;
    box-shadow: 0 1px 5px rgba(4, 129, 177, 0.5);
    padding:5px 10px;
    text-transform:uppercase;
    font-family:Helvetica, sans-serif;
    font-weight:bold;
}
#wrapper fieldset {
    border-radius:4px;
    background: #fff; 
    background: -moz-linear-gradient(#fff, #f9fdff);
    background: -o-linear-gradient(#fff, #f9fdff);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f9fdff)); /
    background: -webkit-linear-gradient(#fff, #f9fdff);
    padding:20px;
    border-color:rgba(4, 129, 177, 0.4);
}
#wrapper input {
    color: #373737;
    background: #fff;
    border: 1px solid #CCCCCC;
    color: #aaa;
    font-size: 14px;
    line-height: 1.2em;
    margin-bottom:15px;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
}
#wrapper input[type="text"] {
    padding: 8px 6px;
    height: 22px;
    width:280px;
}
#wrapper input[type="text"]:focus {
    background:#f5fcfe;
    text-indent: 0;
    z-index: 1;
    color: #373737;
    -webkit-transition-duration: 400ms;
    -webkit-transition-property: width, background;
    -webkit-transition-timing-function: ease;
    -moz-transition-duration: 400ms;
    -moz-transition-property: width, background;
    -moz-transition-timing-function: ease;
    -o-transition-duration: 400ms;
    -o-transition-property: width, background;
    -o-transition-timing-function: ease;
    width: 380px;

    border-color:#ccc;
    box-shadow:0 0 5px rgba(4, 129, 177, 0.5);
    opacity:0.6;
}
#wrapper input[type="submit"]{
    background: #222;
    border: none;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    text-transform:uppercase;
    color: #eee;
    cursor: pointer;
    font-size: 15px;
    margin: 10px 0;
    padding: 5px 22px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-border-radius:4px;
    -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}

刚刚从表单页面中取出了一些CSS并将其放在样式表中并在整页中进行了更改。希望这是你正在寻找的。

相关问题
最新问题