0

http://jsfiddle.net/AmKHx/

大家好，

我在顶部链接了我的代码。我的主要问题是我的页眉、内容和页脚设置完美，适用于所有网站。它没有滚动功能或任何东西。每次我尝试将英特尔徽标添加到屏幕上。它做它在那里的事情。我移动它并调整它，然后它适用于一个浏览器而不是另一个......它一直在变化。我希望徽标与我用 CSS 制作的标题一起完美地贴在左边。此外，我希望 Mobility Group 文本位于徽标旁边的那个高度，但由于某种原因，当我使用它时，它总是会弄乱我的页眉内容和页脚。所以我非常想先在徽标上，然后在旁边的 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>

代码：

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;
}
4

2 回答 2

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 属性中使用大写字母 - 使用小写字母是一种标准，甚至某些浏览器可能不喜欢它。

于 2013-07-11T08:56:29.023 回答
0

你有重置表吗？

将其复制到一个新的 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}
于 2013-07-10T23:23:48.610 回答