header和section之间怎么有条空白

<!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>


安然_10
浏览 3043回答 2
2回答

学习js

没看到空白,你外部引入的css是啥?要是你那有空白的话,可能是header里面的浮动造成的吧,在header和section中间加一个空div,设置清除浮动试试
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5