Question

所以我试图制作一个BBC网站的副本，一切都很好，直到我试图放大。标题的颜色慢慢地从右到左，因为我一直在放大，这是某种浏览器错误或我的代码有什么问题？一切看起来都很好100％大小。这就是它在http://i.imgur.com/GyZ6Wov.png

中放大的方式

<!doctype html>
<html>
<head>
<title>Hristijan BBC</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<style type="text/css">
body,p,ul{
    margin: 0;
    font-family: Arial;
    color: black;
    padding:0;
}
#topMenu{
    height: 40px;
    font-size: 0.9em;
    font-weight: bold;


}
.fixedWidth{
    height: inherit;
    width: 1000px;
    margin: 0 auto;
}
#logo{
    float: left;
    padding:8px 6px 4.2px 4px ;
    border-right: 1px solid gray;
}
#signIn{
    float: left;
    padding: 12px 85px 10px  10px;
    border-right: 1px solid gray;

}
#signIn img{
    float:left;
    background-color: lightgray;
}
#signIn p{
    float: left;
    margin-left: 10px;
}
ul{
    margin: 0;
    list-style: none;
}
.headerItem{
    float: left;
    padding-left: 14px;
    padding-top: 10px;
    padding-right: 14px;
    border-right: 1px solid gray;
    padding-bottom: 13px;
}
#search{
    float:left;
    padding-top:10px;
    padding-left: 10px;

}
#search input{
    float:left;
    height: 22px;
    padding-left:5px;
    width:140px;
    background-color: lightgray;
    border:none;
}
#search img{
    float:left;
    height: 20px;
}
#newsLine{
    background-color: #BB1919;
    height: 60px;
}
#newsLine p{
    float: left;
    color:white;
    font-size: 2.5em;
    padding-top:4px;
}
#navMenu{
    background-color: #A91717;
    height: 35px;

}
.mainMenuItem{
    float:left;
    color:white;
    padding-top:0;
    padding-left:0px;
    padding-right: 15px;
    margin-top:10px;
    border-right: 1px solid orangered;
    padding-left:5px;
}
h1{
    color:gray;
}
h1:hover{
    color: #1167A8;
}
#mainContent{
    float:left;
    width: 650px;

}
#description{
    float:left;
    text-align: justify;
    float:left;
    width: 225px;
    color: red;
}


</style>
</head>
<body>
<div id="container">
<div id="topMenu">
    <div class="fixedWidth">
        <div id="logo">
             <img   src="http://static.bbci.co.uk/frameworks/barlesque/2.93.13/orb/4/img/bbc-blocks- dark.png">
        </div>

        <div id="signIn">
            <img src="http://static.bbci.co.uk/id/0.32.25/img/bbcid_orb_signin_dark.png">
            <p>Sign in</p>
        </div>

        <ul >
            <li class="headerItem">News</li>
            <li class="headerItem">Sport</li>
            <li class="headerItem">Weather</li>
            <li class="headerItem">Shop</li>
            <li class="headerItem">Earth</li>
            <li class="headerItem">Travel</li>
            <li class="headerItem">More...</li>


        </ul>
        <div id="search">
        <input type="text" placeholder="Search">
        <img src="http://static.bbci.co.uk/frameworks/barlesque/2.93.13/orb/4/img/orb-search-dark.png">
        </div>


    </div>

</div>

<div id="newsLine">
    <div class="fixedWidth">
        <p>NEWS</p>
    </div>
</div>

<div id="navMenu">
    <div class="fixedWidth">
        <ul>
            <li class="mainMenuItem">Home</li>
            <li class="mainMenuItem">Video</li>
            <li class="mainMenuItem">World</li>
            <li class="mainMenuItem">UK</li>
            <li class="mainMenuItem">Business</li>
            <li class="mainMenuItem">Tech</li>
            <li class="mainMenuItem">Science</li>
            <li class="mainMenuItem">Magazine</li>
            <li class="mainMenuItem">Entertainment & Arts</li>
            <li class="mainMenuItem">Health</li>
            <li class="mainMenuItem">In Pictures</li>
            <li class="mainMenuItem">More</li>

        </ul>
    </div>


</div>

    <div id="content">
        <div class="fixedWidth">
            <div id="mainContent">
            <h1>Pope arrives in conflict with CAR</h1>

            <div id="description">
            <p>Pope Francis has arrived in the Central African Republic, a country torn apart by violence between Muslim rebels and Christian militias, on the last leg of his African tour.</p>
            </div>

            </div>
        </div>
    </div>

</div>

滚动时标题颜色消失

0 个答案: