极客观点
项目管理
HarmonyOS
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<style type="text/css">
ul{
list-style:none;
padding:0px;
}
html{
font-size:0.625em;
}
body,ul{
margin:0;
font-family:"宋体";
}
h1,h2{
font-weight:normal;
}
em{
font-style:normal;
}
img{
border:none;
}
h2{
margin:0px;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
a,button{
cursor:pointer;
}
wrap,#header,#banner{
width:100%;
}
p,h1,h2,#wrap{
margin:0;
}
wrap{
position:relative;
}
header{
background:#281121 url(../images/header_bg.gif) repeat-x;
background-size:100% 100%;
min-height:163px;
position:fixed;
top:0;
left:0;
}
header_top,#header_bottom{
width:1200px;
margin:0 auto;
}
header #header_top{
heigth:24px;
line-height:24px;
}
header #header_top p,#header #header_top h1 a{
font-size:1.2rem;
}
header #header_top p,#header #header_top h1 a,#header #header_bottom span,#header #header_bottom em,#header #header_bottom ul li a{
color:#fff;
}
header #header_top p,#header #header_bottom ul li{
float:left;
}
header #header_top p{
width:200px;
margin-left:30px;
}
header #header_top h1{
width:245px;
float:right;
font-size:0px;
}
header #header_top h1 a{
margin-right:15px;
}
header #header_bottom{
background:url(../images/logo.gif) no-repeat 50px 35px;
height:125px;
padding-top:10px;
}
header #header_bottom span,#header #header_bottom em,#header #header_bottom ul li a{
display:block;
}
header #header_bottom span,#header #header_bottom em{
text-align:right;
height:30px;
line-height:30px;
margin-right:15px;
}
header #header_bottom span{
width:1145px;
margin-right:40px;
font-size:1.4rem;
}
header #header_bottom em{
width:100%;
font-size:2.6rem;
font-family:Arial, Helvetica, sans-serif;
background:url(../images/phone_icon.gif) no-repeat 990px 5px;
}
header #header_bottom ul{
width:725px;
margin:6px auto 0;
}
header #header_bottom ul li,#header #header_bottom ul li a{
height:49px;
}
header #header_bottom ul li{
width:145px;
font-size:2.4rem;
font-family:"微软雅黑";
text-align:center;
padding-top:10px;
}
header #header_bottom ul li a:hover,#header #header_bottom ul li a.first{
text-decoration:none;
background:url(../images/red_line.gif) no-repeat center 44px;
}
.line{
background:url(../images/line.gif) no-repeat left bottom;
}
banner{
width:100%;
height:500px;
}
.clearfix:after{
content:"200B";
visibility:hidden;
display:block;
height:0;
clear:both;
}</style>
</head>
<body>
<!--包裹层-->
<div id="wrap">
<!--头部-->
<div id="header">
<div id="header_top" class="clearfix">
<p>您好！欢迎光临magica包装有限公司</p>
<h1>
+ 网站地图
+ 收藏本站
+ 加盟合作
</h1>
</div>
<div id="header_bottom">
<span>全国服务热线</span>
0771-7771888
<ul class="clearfix">
<li>首 页</li>
<li class="line">关于我们</li>
<li class="line">新闻中心</li>
<li class="line">产品中心</li>
<li class="line">联系我们</li>
</ul>
</div>
</div>
<div id="banner"">
<img class="banner" src="images/banner1.jpg" width="100%" height="351" alt="banner1" class="clearfix">
</div>
</div>
</body>
</html>
假设你固定定位的元素高度：100px; 那么被“顶上去的元素”加一个
padding-top:100px;或者margin-top:100px;，希望能帮到你，看你提问的格式还不会用markdown吧？学习下markdown吧，不然你提问中的代码看着乱。后期写博客也可以用markdown写。好的习惯很重要。