老师请检查
来源：5-2 编程练习
慕田峪5398473
2019-04-21 20:58:52
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{padding: 0; margin: 0;}
header{
background: #000;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
}
.nav{
list-style: none;
color: #fff;
display: flex;
align-items: center;
flex-basis: 50%;
font-size: 18px;
justify-content: space-around;
}
.login input{
background: orange;border: none;
border-radius: 5px;color: #fff;
font-size: 14px;
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;
margin: 5px;
}
.logo img{display: block;}
section{background: #fbfbfb;}
.content{display: flex;justify-content: space-around;align-content: space-around;margin: 20px;}
.section{
background: #a0b3d6;
width: 500px;
height: 150px;
display: flex;
justify-content: space-between;
padding: 10px;
border-radius: 3px;
font-size: 18px;
}
.box{
display: flex;
flex-direction: column;
justify-content: center;
}
.shopping{
display: flex;
align-items: center;
}
.shopping .btn{
width: 80px;
height: 40px;
background: orange;
border: none;
border-radius: 3px;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 40px;
}
.btn:hover{
cursor: pointer;
background: #FF7400;
}
</style>
</head>
<body>
<!--头部-->
<header>
<div class="logo">
<img src="http://climg.mukewang.com/59197ab000014f1503000100.jpg">
</div>
<ul class="nav">
<li>课程</li>
<li>路径</li>
<li>猿问</li>
<li>手记</li>
</ul>
<div class="login">
<input type="button" value='登录'>
<input type="button" value="注册">
</div>
</header>
<!--主体-->
<section>
<div class="content">
<div class="section">
<div class="box">
<p>《前端小白入门手册》</p>
<p>适合人群：没有任何前端基础的小白</p>
<p>费用：￥499</p>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
<div class="section">
<div class="box">
<p>《HTML5与CSS3实现动态网页》</p>
<p>适合人群：有html和css基础的童鞋</p>
<p>费用：￥599</p>
</div>
<div class='shopping'>
<div class="btn">加入购物车</div>
</div>
</div>
</div>
<div class="content">
<div class="section">
<div class="box">
<p>《小王子》</p>
<p>适合人群：没有任何前端基础的小白</p>
<p>费用：￥499</p>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
<div class="section">
<div class="box">
<p>《偷影子的人》</p>
<p>适合人群：有html和css基础的童鞋</p>
<p>费用：￥599</p>
</div>
<div class='shopping'>
<div class="btn">加入购物车</div>
</div>
</div>
</div>
</section>
</body>
</html>写回答
1回答
-
好帮手慕夭夭
2019-04-22
你好同学，因为每一个section设置了固定宽度500px，在屏幕大的电脑上显示页面，就会有很多剩余的空间了
建议使用百分比设置宽度，这样宽度会随着浏览器缩放而缩放，如下修改宽度以及背景色：
另外，如下内容各项之间没有间距
可以给如下属性值：
祝学习愉快 ，望采纳。
0
