如何使标题栏固定

时间:2013-04-09 06:41:04

标签: javascript jquery html css

我想修改标题栏(包含我的个人资料的栏,更改密码)因此我创建了一个班级 ![当我点击更改密码时,它不会完全改变密码] [1]     p.pos_fixed     {     位置是:固定;     顶部:30PX;     右:为5px;     } 但是它运作不好我的意思是说外观并不好。

这是我的index.html代码

<!DOCTYPE html> <!-- The new doctype -->
<html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>home</title>

        <link rel="stylesheet" type="text/css" href="styles.css" />



    </head>

    <body>

        <section id="page" > <!-- Defining the #page section with the section tag -->

            <header> <!-- Defining the header section of the page with the appropriate tag -->

                <hgroup>
                    <h1>Your Logo</h1>
                    <h3>and a fancy slogan</h3>
                </hgroup>

                <nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
                    <ul>
                        <li><a href="#article1">My Profile</a></li>
                        <li><a href="#article2">Change password</a></li>
                        <li><a href="#article3">Navigation Menu</a></li>
                    </ul>
                </nav>

            </header>

            <section id="articles"> <!-- A new section with the articles -->

                <!-- Article 1 start -->

                <div class="line"></div>  <!-- Dividing line -->

                <article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
                    <h2>Dr. Sukant Kumar nayak</h2>

                    <div class="line"></div>

                    <div class="articleBody clear">



                     <div >
        <div  align="center" style="padding-top: 30px">
            <table align="center" >
                <tr >

                </tr>
            </table>
        </div>
        <div style="float: left; padding-left: 50px; padding-top: 5px">
            <table cellspacing="10" cellpadding="10" >
            <tr>
                <td width="200" height="30">
                    <b>Last Name</b>
                </td>
                <td>
                     <label for="LastName">LastName</label>
                </td>
            </tr>
            <tr>
                <td  height="30">
                    <b>First Name</b>
                </td>
                <td>
                    <label for="FirstName">First Name</label>
                </td>
            </tr>
            <tr>
                <td  height="30">
                    <b>Date of Birth</b>
                </td>
                <td>
                    <label for="DateofBirth">Date of Birth</label>
                </td>
            </tr>
            <tr>
                <td  height="30">
                    <b>Qualification</b>
                </td>
                <td>
                    <label for="LastName">Qualification</label>
                </td>
            </tr>
            <tr>
                <td  height="30">
                    <b>Registration. No.</b>
                </td>
                <td>
                    <label for="RegistrationNo">Registration No</label>
                </td>
            </tr>
            <tr>
                <td  height="30">
                    <b>Country of Registration</b>
                </td>
                <td>
                    <label for="CountryofRegistration">Country of Registration</label>
                </td>
            </tr>
            <tr>
                <td  height="30">
                    <b>Practice Name</b>
                </td>
                <td>
                    <label for="PracticeName">Practice Name</label>
                </td>
            </tr>
            <tr>
                <td  height="30">
                    <b>Phone</b>
                </td>

                <td>
                    <label for="Phone">Phone</label>
                </td>
            </tr>
            <tr>
                <td  height="30">
                    <b>Email</b>
                </td>
                <td>
                    <label for="Email">Email</label>
                </td>
            </tr>
        </table>

        </div>
        <div style="float: right;padding-right: 50px;padding-top: 50px">

            <table>

                <tr>
                <td width="160" height="30">
                    <b>Address</b>
                </td>
                <td>
                    <label for="Address">Address</label>
                </td>
                </tr>
                <tr>
                    <td  height="30">
                        <b>Street</b>
                    </td>
                    <td>
                        <label for="Street">Street</label>
                    </td>
                </tr>
                <tr>
                    <td  height="30">
                        <b>City</b>
                    </td>
                    <td>
                        <label for="City">City</label>
                    </td>
                </tr>
                <tr>
                    <td  height="30">
                        <b>State</b>
                    </td>
                    <td>
                        <label for="State">State</label>
                    </td>
                </tr>
                <tr>
                    <td  height="30">
                        <b>Country</b>
                    </td>
                    <td>
                        <label for="Country">Country</label>
                    </td>
                </tr>
                <tr>
                    <td  height="30">
                        <b>Pin Code</b>
                    </td>
                    <td>
                        <label for="PinCode">Pin Code</label>
                    </td>
                </tr>
                <tr>
                    <td  height="30">
                        <b>How do you know?</b>
                    </td>
                    <td>
                        <label for="HowDoYouKnow">How Do You Know</label>
                    </td>
                </tr>
                <tr>
                    <td  height="30">
                        <b>Comment</b>
                    </td>

                    <td>
                        <label for="Comments">Comments</label>
                    </td>
                </tr>
            </table>
        </div>
        </div>
                    </div>
                </article>

                <!-- Article 1 end -->


                <!-- Article 2 start -->

                <div class="line"></div>

                <article id="article2">
                    <h2>Change Password</h2>

                    <div class="line"></div>

                    <div class="articleBody clear">
                        <figure>
                            <a href="http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/"><img src="medical.jpg" width="620" height="340" /></a>
                        </figure>

                        <p><div align="center" style="padding-top: 30px">
            <table  cellspacing="10" cellpadding="10">
                <tr>
                    <td width="200" height="30"><h5>Old Password</h5></td>
                    <td  height="30"><input name="old" type="password"></td>
                </tr>
                <tr>
                    <td  height="30"><h5>New Password</h5></td>
                    <td  height="30"><input name="newPsw" type="password"></td>
                </tr>
                <tr>
                    <td height="30"><h5>Confirm Password</h5></td>
                    <td  height="30"><input name="confirm" type="password"></td>
                </tr>
            </table>
        </div>
        <div class="footer-bar"  align="center" style="padding-top: 30px">
            <table align="center" >
                <tr >
                    <td width="100" align="center"><input type="submit" class="button button-submit" value="Submit"  /></td>
                    <td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
                </tr>
            </table>
        </div></p>
                        <p></p>
                    </div>
                </article>

                <!-- Article 2 end -->

                <!-- Article 3 start -->

                <div class="line"></div>



                <!-- Article 3 end -->


            </section>

        <footer> <!-- Marking the footer section -->

           <div class="line"></div>

           <p>Copyright 2013 - mysite.com</p> 

           <a href="#" class="up">Go UP</a>
           <a href="www.df.com" class="by">dh</a>


        </footer>

        </section> <!-- Closing the #page section -->

        <!-- JavaScript Includes -->

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

这是style.css

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

header,footer,
article,section,
hgroup,nav,
figure{
    /* Giving a display value to the HTML5 rendered elements: */
    display:block;
}

body{
    /* Setting the default text color, size, page background and a font stack: */
    font-size:0.825em;
    color:#fcfcfc;
    background-color:#355664;
    font-family:Arial, Helvetica, sans-serif;
}

/* Hyperlink Styles: */

a, a:visited {
    color:#0196e3;
    text-decoration:none;
    outline:none;
}

a:hover{
    text-decoration:underline;
}

a img{
    border:none;
}

/* Headings: */

h1,h2,h3{
    font-family:"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
    text-shadow:0 1px 1px black;
}

h1{
    /* The logo text */
    font-size:3.5em;
    padding:0.5em 0 0;
    text-transform:uppercase;
}

h3{
    /* The slogan text */
    font-family:forte,"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
    font-size:2em;
    font-weight:normal;
    margin:0 0 1em;
}


h2{
    font-size:2.2em;
    font-weight:normal;
    letter-spacing:0.01em;
    text-transform:uppercase;
}

p{
    line-height:1.5em;
    padding-bottom:1em;
}

.line{
    /* The dividing line: */
    height:1px;
    background-color:#24404c;
    border-bottom:1px solid #416371;
    margin:1em 0;
    overflow:hidden;
}

article .line{
    /* The dividing line inside of the article is darker: */
    background-color:#15242a;
    border-bottom-color:#204656;
    margin:1.3em 0;
}

footer .line{
    margin:2em 0;
}

nav{
    background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;
    padding:0 5px;
    position:absolute;
    right:0;
    top:4em;

    border:1px solid #FCFCFC;

    -moz-box-shadow:0 1px 1px #333333;
    -webkit-box-shadow:0 1px 1px #333333;
    box-shadow:0 1px 1px #333333;
}

/* The clearfix hack to clear the floats: */

.clear:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* The navigation styling: */

nav ul li{
    display:inline;
}

nav ul li a,
nav ul li a:visited{
    color:#565656;
    display:block;
    float:left;
    font-size:1.25em;
    font-weight:bold;
    margin:5px 2px;
    padding:7px 10px 4px;
    text-shadow:0 1px 1px white;
    text-transform:uppercase;
}

nav ul li a:hover{
    text-decoration:none;
    background-color:#f0f0f0;
}

nav, article, nav ul li a,figure{
    /* Applying CSS3 rounded corners: */
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

/* Article styles: */

#page{
    width:960px;
    margin:0 auto;
    position:relative;
}

article{
    background-color:#213E4A;
    margin:3em 0;
    padding:20px;

    text-shadow:0 2px 0 black;
}

figure{
    border:3px solid #142830;
    float:right;
    height:300px;
    margin-left:15px;
    overflow:hidden;
    width:500px;
}

figure:hover{
    -moz-box-shadow:0 0 2px #4D7788;
    -webkit-box-shadow:0 0 2px #4D7788;
    box-shadow:0 0 2px #4D7788;
}

figure img{
    margin-left:-60px;
}

/* Footer styling: */

footer{
    margin-bottom:30px;
    text-align:center;
    font-size:0.825em;
}


footer p{
    margin-bottom:-2.5em;
    position:relative;
}

footer a,footer a:visited{
    color:#cccccc;
    background-color:#213e4a;
    display:block;
    padding:2px 4px;
    z-index:100;
    position:relative;
}

footer a:hover{
    text-decoration:none;
    background-color:#142830;
}

footer a.by{
    float:left;

}

footer a.up{
    float:right;
}

请告诉我该怎么做。 当我点击我的个人资料时,它会转到我的个人资料页面,但标题栏会消失,同样也会更改密码

3 个答案:

答案 0 :(得分:3)

enter image description here 把它放在css文件中

.pp
    {
        position:fixed;
        top: 30px;
        width: 944px;
        z-index:1;
        top:5px;

    }

在正文中将标题设置为类pp

<header class="pp"> <!-- Defining the header section of the page with the appropriate tag -->

                <hgroup style="float:left">
                    <h1>Your Logo</h1>
                    <h3>and a fancy slogan</h3>
                </hgroup>

                <nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
                    <ul>
                    <li><a href="#articles">My Profile</a></li>
                    <li><a href="#line1">Change password</a></li>
                    <li><a href="#article3">Navigation Menu</a></li>
                    </ul>
                </nav>

            </header>

将line1 id设置为articale2

以上的此类
 <div class="line" id="line1"></div>

答案 1 :(得分:1)

我不明白为什么你指的是p tag,你的HTML代码中没有p标签。

position:fixed添加到nav ul

nav ul{
    background:white;
    border-radius:6px;
    position:fixed;
    top:30px;
    right:5px;
}

<强> DEMO

答案 2 :(得分:-1)

作为导航标签中的栏,所以你需要为导航标签写css来修复它,而你有点已经为p标签写了css代码。