.banner >h1和.banner>p缩小窗口的间距的代码,你看下代码写的对吗
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="zy.css" type="text/css">
</head>
<body>
<header>
<div class="container">
<a href=" ">< img src="img/logo.jpg"> </a >
<nav>
<a>HOME</a >
<a>PORTFOLIO</a >
<a>TEAM</a >
<a>CONTACT US</a >
</nav>
</div>
</header>
<section >
<div class="banner" >
<a href="#">< img src="img/banner.jpg" alt=""></a >
<h1>Welcome to Website</h1>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit</p >
</div>
</section>
<section>
<div class="Portfolio">
<h1>Portfolio </h1>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmodtempor incididunt ut labore et</p >
<p>dolore magna aliqua.Ut emim ad minim veniam</p >
<p class="span">
<span>ALL</span>
<span>WEB</span>
<span>SOFTWARE</span>
<span>WORKS</span>
<span>BRANDS</span>
</p >
<a>< img src="img/portfolio-nav-img.jpg" alt=""></a >
</div>
</section>
</body>
</html>
*{padding: 0;margin: 0;border:0;}
header{height:80px;background:#2e2e2e;}
header>.container{width:1500px;margin: 0 auto;}
/*header>.containe这里设置width:1500px;窗口变小文字就不会挤下去*/
header>.container>a{margin-top:1px;float: left;width:139px;height:28px;line-height:88px;}
/*这里要写a 不能写img*/
nav{
float: right;color: white;
}
nav>a{
font-size: 24px; line-height: 80px;float: left; width: 190px; height: 80px; text-align: center;display: block;
}
.banner{}
.banner>a{display: block;background: #BA87E5;position: relative;}
.banner>a>img{width:100%;display: block;height:900px;}
/*img要加display:block; 不加也不会有多大的影响*/
.banner>h1{position: absolute;top:40%;left:33%;font-size: 50px;color:white;font-family: basic; letter-spacing:8px;width:1500px;}
.banner>p{position: absolute;top:47%;left:37%;font-size: 15px;color:white;font-family: basic;letter-spacing:2px;margin-top:15px;width:1000px;}
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!
了解课程






恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星