使用CSS樣式問題

Question

http://jsfiddle.net/AmKHx/

大家好，

我在頂部鏈接了我的代碼。 我的主要問題是我的頁眉，內容和頁腳設置正確，可以與所有網站一起使用。 它沒有滾動功能或其他任何功能。 每次我嘗試將Intel徽標添加到屏幕上時。 它所做的就在那里。 我將其移動並運行一周，然后它可用於一個瀏覽器而不適用於其他瀏覽器……它一直在變化。 我希望徽標與我使用CSS制作的標頭一起完美地粘貼在左側。 我也希望徽標旁邊的那個高度處的Mobility Group Text，但是由於某種原因，當我使用它時，它總是弄亂我的頁眉內容和頁腳。 因此，我非常想先將徽標放到徽標旁邊，然后將Mobility Group放到徽標旁邊，並使徽標變得非常平滑！

另外，我剛剛學習了html css和php，如果你們在我的代碼中看到可以更聰明地完成的工作，請告訴我。 我需要重要的反饋，以便我可以更好地學習這些新語言，從而在編程領域取得成功！

預先感謝您的所有意見和建議！！

HTML代碼：

<div id="page">

        <div id="header">

            <h1><img src="http://wireless.fm.intel.com/test/logo2.png">

                <h2>Mobility Group</h2>



        </div>
        <div id="main"></div>

        <div id="footer"></div>

</div>

</body>

CSS代碼：

Html, body
{
        Padding:0;
        Margin:0;
        Height:100%;
}
#page
{
        Min-height:100%;
        position:relative;
        height:100%;
}
#header
{
        background-color:#115EA2;
        height:100px;
        width:97.5;
}
#main
{
        width:1300px;
        margin-left:auto;
        margin-right:auto;
        background-color:#F1F2F3;
        min-height:87%;
        height:auto;
        height:87%;
        margin:0 auto -50px;
        vertical-align:bottom;
}
#footer
{
        Position:fixed;
        Width:100%;
        Bottom:0;
        Height:50px;
        background-color: #115EA2;
}
#header h1
{
        position:absolute;
        text-align:left;
        left:0px;
        top:0px;
}
#header h2
{
        text-align:center;
        font-size:44px;
        color:#FFFFFF;
        left:0px;
        top:20px;
        font-weight:bold;
}

Answer 1

我仍然不確定我是否理解這個問題，但是您可以采取以下措施使它看起來更自然。 關閉h1標簽，不要使其絕對定位，而應使其向左浮動。 h2元素也一樣。 由於缺少原始圖像，因此我放置了另一個圖像，並將其高度固定為60px。

基本上是這樣的：

#header h1 {
    text-align:left;
    left:0px;
    top:0px;
    float: left;
} 
#header h1 img {
    height: 60px;
}
#header h2 {
    text-align:center;
    font-size:44px;
    color:#FFFFFF;
    left:0px;
    top:20px;
    font-weight:bold;
    float:left;
}

在此處查看結果： http : //jsfiddle.net/AmKHx/1/在每種現代瀏覽器中，外觀都應該相同。

另外，請盡量不要對CSS屬性使用大寫字母-這是使用小寫字母的標准，即使某些瀏覽器也可能不喜歡。

Answer 2

您有重置表嗎？

將此文件復制到新的CSS文件中，將其稱為reset.css，然后在加載主CSS之前將其加載到頁面中。

html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
legend{color:#000}