如何使左右拖动条消失 而上下拖动条不消失
来源：7-2 作业题
weixin_慕哥8086897
2019-02-28 12:16:51
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">-->
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="css/css3.css">
</head>
<body>
<!--第一区域-->
<section class="head">
<!--导航-->
<div>
<div>前端</div>
<div>JAVA</div>
<div>ios</div>
<div>Android</div>
<div>php</div>
</div>
<!--图片-->
<div>
<img src="img/1.png">
<p>IMOOC</p>
<input type="submit" name="" value="start">
</div>
</section>
<!--第二区域-->
<section>
<div>关于慕课</div>
<div>关于课程</div>
<div>核心团队</div>
<div>新增专题</div>
</section>
<!--第三区域-->
<section>
<div>响应式</div>
<div>
当今最領先的响应式自动建站平台，我们的流线式网页布局设计方案和可视化图文</br>内容编辑模式让网站制作和维护成为一件轻松憶意的事。无论您是普通互联网用</br>
户，还是专业网站制作人员，都能使用起飞页设计出最具专业水的网站。想创建</br>
一个简单的单页式站点，还是一个专业的公司网站，亦或是一个别具一格的博客？</br>
起飞页可以满足您的所有需求。我们是响应式网站的倡导者，所育前端页面代码均</br>
采用HTML5和CSS3实现。起飞页提供了海里精美网站模板和成品网站，几乎覆盖了</br>当今各个行业，您只需在模板上进行少量修改，即可完成自己的网站，这一切都是</br>
免费的。</div>
</section>
<!--第四区域-->
<section>
<div>IMOOC</div>
<div>welcome to <a href="#">www.imooc.com</a></div>
</section>
<!--第五区域-->
<section>
<div>主打课程</div>
<div>
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
<img src="img/6.jpg">
</div>
</section>
<!--第六区域-->
<footer>copyright©2017 imooc.com All Rights Reserved</footer>
</body>
</html>
*{padding: 0;
margin: 0;}
a{text-decoration: none;}
.head{
background:#B2C5CC;
overflow: hidden;
position: relative;
}
.head>div:first-of-type{
display: flex;
height:100px;
width:40vw;
margin: 0 30vw;
justify-content:space-between;
align-items:center;
color: #757575;
}
.head>div:first-of-type>div:first-of-type{
color: #afafaf;
}
.head>div:last-of-type{
height:600px;
width: 100vw;
}
.head>div:last-of-type img{
display: block;
margin: 50px auto 30px;
}
.head>div:last-of-type p{
color: #fff;
font-size:30px;
text-align: center;
margin-bottom:100px;
}
.head>div:last-of-type input{
height:40px;
width: 120px;
display: block;
margin:0 auto;
border: none;
background: #fff;
}写回答
1回答
-
你好，经测试第一区域布局和样式是没有问题的，水平方向出现滚动条是第五区域中图片宽度大小不一的原因：
可以把下面的图片代码注释掉，上面区域先写样式，等写到第五区域的时候再使用样式控制图片的大小即可。
祝学习愉快！
0
相似问题