大家好,
我将代码链接到顶部。我的主要问题是我的标题,内容和页脚完美设置适用于所有网站。它没有滚动功能或任何东西。每次我尝试将英特尔徽标添加到屏幕上。它做的就是那里。我移动它并调整它然后它适用于一个浏览器而不是另一个...它不断变化。我希望徽标能够与我用CSS制作的标题完美地粘在左边。此外,我希望移动组文本位于徽标旁边的那个高度,但由于某种原因,当我使用它时,它总是会弄乱我的标题内容和页脚。所以,我首先想要标志,然后在它旁边的Mobility Group,并使它非常顺利!
此外,我刚刚学习了html css和php,如果你们在我的代码中看到一些可以更聪明地完成的东西,请告诉我。我需要批评性反馈,这样我才能更好地学习这些新语言,以便在这个编程领域取得成功!
提前感谢您提供的所有意见和建议!!
HTML CODE:
<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;
}
答案 0 :(得分: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属性中使用大写字母 - 这是使用小写的标准,甚至某些浏览器也可能不喜欢它。
答案 1 :(得分: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}