<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
header{background: #000;height: 3em;}
header >div{width:50%;margin:auto; }
header >div >img{float: left; display: block;margin-top: 0.4em;}
header>div >a{float:right;padding: 1em;color: #fff;text-decoration: none;}
/*banner*/
.banner{display: block;}
.banner img{z-index: 1;width: 100%;height: 31em;display: block;}
.banner h1{ position: absolute; top: 50%; left: 50%;color: #fff;}
.banner p{ position: absolute; top: 55%; left: 50%;color: #fff; padding-top: 1em;}
</style>
</head>
<body>
<header>
<div>
<img src="img/logo.jpg" alt="">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
</div>
</header>
<section>
<img src="img/banner.jpg" alt="">
<h1>内容</h1>
<p>neirong</p>
</section>
</body>
</html>
学习js
相关分类