Javascript CSS格式与表单和选项卡问题_Javascript_Jquery_Html_Css

Javascript CSS格式与表单和选项卡问题

javascript jquery html css

Javascript CSS格式与表单和选项卡问题,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在HTML和CSS方面遇到了一个独特的情况。我已经做了一个简单的输入文本框和下拉列表填写和提交的形式。然而，我现在想在表单顶部添加选项卡，我意识到我已经用div表单容器（#form_container）包装了我的html代码，现在当我尝试单独应用任何css时，它会不断抛出表单的css，或者选项卡上的css根本不起作用。我刚才用来测试选项卡上的更改的css是位于下面的.tabs a{…} 我的HTML是： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

我在HTML和CSS方面遇到了一个独特的情况。我已经做了一个简单的输入文本框和下拉列表填写和提交的形式。然而，我现在想在表单顶部添加选项卡，我意识到我已经用div表单容器（#form_container）包装了我的html代码，现在当我尝试单独应用任何css时，它会不断抛出表单的css，或者选项卡上的css根本不起作用。我刚才用来测试选项卡上的更改的css是位于下面的.tabs a{…}

我的HTML是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>This is my title</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="jquery.js"></script>


</head>
<body id="main_body" >

    <img id="top" src="top.png" alt="">
    <div id="form_container">

        <h1><a>Example</a></h1>
        <form id="form" class="myForm"  method="post" action="get.php">
        <div class="form_description">
            <h2>Example</h2>
            <p>Please Fill Out the Fields Below.</p>

        </div>                      
        <ul >

        <li class="tabs">
        <nav id="tab">
            <a href="#">Home</a>
            <a href="#">Topics</a>
        </nav>  
        </li>

        <li id="profile">
        <label class="description" for="">Please select your profile by clicking the button or continuing below:
        </label>
        <div>
            <input id="profilebutton" type="button" name="prof" class="button_text" value="Select Profile">
        </div>
        </li>


        <!--First Name Input--> 

        <li id="FirstName" >
        <label class="description" for="firstname">First Name </label>
        <div>
            <input id="firstname" name="firstname" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>       

        <!--Last Name Input-->

        <li id="LastName" >
        <label class="description" for="lastname">Last Name </label>
        <div>
            <input id="lastname" name="lastname" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>


        <li id="age" >
        <label class="description" for="age">Age </label>
        <div>
            <input id="age" name="age" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>       



        <li class="buttons">
            <input type="hidden" name="form_id"  />

            <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
            <input type="reset" class="button_text" id="resetForm" name="reset" value="Reset" />
        </li>
            </ul>

        </form> 

    </div>

    </body>
</html>

有什么可以推荐的吗？我应该创建一个单独的css类并覆盖它吗？谢谢。

如果您试图在表单上方创建导航选项卡：

从表单容器中删除所有选项卡，并将它们放置在表单容器上方和img标记下方
这也使css保持分离

如果您想在表单中显示导航标签（我不知道为什么）：

尽可能直接地定位导航选项卡，并将css放置在容器css的下方
CSS：基于特定性对自身进行重写，这意味着如果您在针对nav选项卡时比针对容器时更具体，则nav选项卡CSS将优先

例如：

#form#u container#form.tabs#taba{文本装饰：无}

取代：

#表单容器

为您的问题创建小提琴显示您的htmlcode@leo.fcx自从我第一次提交它以来，我不得不重新做它，我把它搞砸了。html代码现在已启动。谢谢我在你的html中看不到“标签”code@leo.fcx对不起！我有两个不同的文件。现在起床了。

body
{
    background:#336699;
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:small;
    margin:8px 0 16px;
    text-align:center;
}

.rupreg{
    display:none;
}


.tabs a {
    display: block;
    width: 60px;
    background-color: #dddddd;
}

#form_container
{
    background:#fff;

    margin:0 auto;
    text-align:left;
    width:640px;
}

#top
{
    display:block;
    height:10px;
    margin:10px auto 0;
    width:650px;
}

#footer
{
    width:640px;
    clear:both;
    color:#999999;
    text-align:center;
    width:640px;
    padding-bottom: 15px;
    font-size: 85%;
}

#footer a{
    color:#999999;
    text-decoration: none;
    border-bottom: 1px dotted #999999;
}

#bottom
{
    display:block;
    height:10px;
    margin:0 auto;
    width:650px;
}

form.myForm
{
    margin:20px 20px 0;
    padding:0 0 20px;
}

/**** Logo Section  *****/
h1
{
    background-color:#6699CC;
    margin:0;
    min-height:0;
    padding:0;
    text-decoration:none;
    text-indent:-8000px;

}

h1 a
{

    display:block;
    height:100%;
    min-height:40px;
    overflow:hidden;
}