.banner >h1和.banner>p缩小窗口的间距的代码,你看下代码写的对吗

.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

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕码 2019-07-28 09:35:31

同学你好!

(1)代码中的img标签。前面无需添加空格,会导致标签无法生效:

http://img1.sycdn.imooc.com//climg/5d3cfaa400014bc906700067.jpg
http://img1.sycdn.imooc.com//climg/5d3cfabb00012a9307850055.jpg

http://img1.sycdn.imooc.com//climg/5d3cfadf0001c54607540086.jpg

(2)banner>p和h1之间的间距可以稍微调大一些:

http://img1.sycdn.imooc.com//climg/5d3cfb82000128d108610132.jpg

http://img1.sycdn.imooc.com//climg/5d3cfb8f000160fe02760105.jpg

如果帮助到了你 欢迎采纳 祝学习愉快~

提问者 鹿人神经粉 2019-07-27 20:06:18

老师 我不是说这个 我是说section里的.banner>h1和.banner>p的间距 是不是我这样写的效果

樱桃小胖子 2019-07-27 11:04:58

1、可以设置一个最小宽度

http://img1.sycdn.imooc.com//climg/5d3bbf41000135ea08110442.jpg

2、banner部分可以先这样写的

祝学习愉快!

  • 提问者 鹿人神经粉 #1
    老师 你帮我看看间距 对不对 还是屏幕缩放的文字间距 大小 图片大小需要用@media实现
    2019-07-27 20:19:57
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!

了解课程
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师