Question

所以这里是我的所有代码。我对网页设计很陌生，所以我可能犯了一些错误。问题是，当我加载about me页面时，导航的字体大小会更小。我试过寻找答案，但对我来说没有任何意义。你能帮我吗？我已经发布了一次，但没有人可以解决它。

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Home Page</title>
        <link rel="stylesheet" style="text/css" href="main.css" />
    </head>

    <body>
        <header>
            <div id="logo">
                <img src="logo.jpg" alt="Logo" width="" height="" />
            </div>

            <nav>
                <ul>
                    <li> <a href="index.html">Gallery</a> </li><!-- commenting out white space caused by display: inline-block 
                    --><li> <a href="about_me.html">About Me</a> </li><!--
                    --><li> <a href="#">Contact</a> </li>
                </ul>
            </nav>

            <div id="socialIcons">
                <h4>Follow me:</h4>
                <a href="#"> <img src="facebook_Icon.jpg" alt="" width="" height="" /> </a>
            </div>
        </header>

        <hr />

        <div id="contentWrapper">
            <div id="itemList">
                <ul>
                    <li> <a href="#">Link One</a> </li>
                    <li> <a href="#">Link Two</a> </li>
                    <li> <a href="#">Link Three</a> </li>
                    <li> <a href="#">Link Four</a> </li>
                    <li> <a href="#">Link Five</a> </li>
                </ul>
            </div>

            <div id="itemImages">
                <img src="items.jpg" alt="" width="" height="" />
                <img src="items.jpg" alt="" width="" height="" />
                <img src="items.jpg" alt="" width="" height="" />
                <img src="items.jpg" alt="" width="" height="" />
                <img src="items.jpg" alt="" width="" height="" />
                <img src="items.jpg" alt="" width="" height="" />
                <img src="items.jpg" alt="" width="" height="" />
                <img src="items.jpg" alt="" width="" height="" />
            </div>
        </div>
    </body>
</html>

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>About Me</title>
        <link rel="stylesheet" style="text/css" href="main.css" />
    </head>

    <body>
        <header>
            <div id="logo">
                <img src="logo.jpg" alt="Logo" width="" height="" />
            </div>

            <nav>
                <ul>
                    <li> <a href="index.html">Gallery</a> </li><!-- commenting out white space caused by display: inline-block 
                    --><li> <a href="about_me.html">About Me</a> </li><!--
                    --><li> <a href="#">Contact</a> </li>
                </ul>
            </nav>

            <div id="socialIcons">
                <h4>Follow me:</h4>
                <a href="#"> <img src="facebook_Icon.jpg" alt="" width="" height="" /> </a>
            </div>
        </header>

        <hr />
    </body>
</html>

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

html{
    height: 100%;
    width: 100%;
}

body{
    background-color: #fff;
    height: 100%;
    width: 100%;
}

hr{
    width: 90%;
    margin: 2% auto; 
}

header{
    margin: 0 auto;
    width: 90%;
    height: 14%;
    background-color: #ddd;
    position: relative;
}

#logo{
    height: 100%;
    display: inline;
}

#logo img{
    height: 100%;
    width: 30%;
    float: left;
    /*max-width: 359px;
    min-width: 288px;*/
}

nav{
    float: left;
    width: 40%;
    /*background-color: green;*/
    position: absolute;
    left: 30%;
    bottom: 0px;
}

nav ul{
    text-align: center;
    width: 100%;
}

nav ul li{
    list-style-type: none;
    display: inline-block;
    width: 28%;
    margin: 0 1%;
}

nav ul li a{
    text-decoration: none;
    /*background-color: #aaa;*/
    display: block;
    width: 100%;
    font-size: 1.4em;
    color: #000;
}

nav ul li a:link{
    background-color: #aaa;
}

nav ul li a:hover{
    background-color: #ff5588;
}

nav ul li a:active{
    background-color: red;
}

#socialIcons{
    position: absolute;
    right: 5%;
    top: 15%;
    /*background-color: blue;*/
    width: 12%;
}

#socialIcons h4{
    position: absolute; 
    left: 0;
    bottom: 0;
}

#socialIcons img{
    vertical-align: bottom; /*removing space below image caused by default vertical-align: baseline; property*/
}

#socialIcons a{
    background-color: pink;
    float: right;

}

#contentWrapper{
    width: 90%;
    margin: 0 auto;
}

#itemList {
    width: 18%;
    background-color: #ddd;
    float: left;
    margin-right: 2%;
}

#itemList ul li {
    list-style-type: none;
    font-size: 1.2em;
}

#itemList ul li a{
    text-decoration: none;
    font-size: 0.9em;
    color: #000;
}

#itemImages {
    width: 80%;
    float: left;
    background-color: #ddd;
}

#itemImages img{
    /*width: 30%;*/
    /*height: 8em;*/
    /*max-width: 180px;
    max-height: 180px;*/
    width: 20%;
    padding: 1em 2.5%;
    display: block;
    float: left;
}

具有不同字体大小的新页面呈现

0 个答案: