5-2编程练习有哪些需要改进的地方吗？
来源：5-2 编程练习
慕九州7567404
2019-02-25 17:00:26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*在此处补充代码*/
*{
margin: 0;
padding: 0;
border: none;
}
header{
display: flex;
justify-content: space-around;
align-items: center;
height: 65px;
background-color: #000;
min-width: 800px;
}
.logo img{
display: block;
}
/*导航项*/
.nav{
list-style: none;
display: flex;
justify-content: space-between;
width: 500px;
}
.nav li{
color: #fff;
font-size: 20px;
}
/*登录*/
.login{
display: flex;
justify-content: space-between;
width: 100px;
}
.login input{
background-color: yellow;
border-radius: 3px;
width:40px;
height: 20px;
}
/*卡片购物车*/
.container{
display: flex;
justify-content: space-between;
/*align-content: center;*/
margin: 40px 80px 0;
min-width: 1250px;
}
.container .box{
background-color: #eee;
border-radius: 8px;
width: 600px;
height: 150px;
padding: 20px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
/*文字样式*/
.container .box .box-body{
display: flex;
flex-direction: column;
justify-content: space-around;
height: 150px;
}
.container .box .box-body > p{
font-size: 20px;
}
.container .box .box-btn{
background-color: orange;
width: 130px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 5px;
color: #fff;
font-size: 18px;
cursor: pointer;
}
.container .box .box-btn:hover{
background-color: yellow;
}
</style>
</head>
<body>
<header>
<div class="logo">
<img src="http://climg.mukewang.com/59feb59700019dab01910057.png" alt="">
</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 class="container">
<div class="box">
<div class="box-body">
<p class="title">《前端小白入门手册》</p>
<p class="range">适合人群：没有任何前端基础的小白</p>
<p class="price">费用：￥499</p>
</div>
<div class="box-btn">
加入购物车
</div>
</div>
<div class="box">
<div class="box-body">
<p class="title">《前端小白入门手册》</p>
<p class="range">适合人群：没有任何前端基础的小白</p>
<p class="price">费用：￥499</p>
</div>
<div class="box-btn">
加入购物车
</div>
</div>
</section>
<section class="container">
<div class="box">
<div class="box-body">
<p class="title">《前端小白入门手册》</p>
<p class="range">适合人群：没有任何前端基础的小白</p>
<p class="price">费用：￥499</p>
</div>
<div class="box-btn">
加入购物车
</div>
</div>
<div class="box">
<div class="box-body">
<p class="title">《前端小白入门手册》</p>
<p class="range">适合人群：没有任何前端基础的小白</p>
<p class="price">费用：￥499</p>
</div>
<div class="box-btn">
加入购物车
</div>
</div>
</section>
</body>
</html>写回答
1回答
-
好帮手慕星星
2019-02-25
你好，代码实现效果还是可以的，可以参考下面的建议：
1、建议每个区域的最小宽度设置一致，可以直接在body标签上进行设置：
2、建议给每个box设置百分比的宽度，这样不同的显示器显示效果基本可以一致，如下：
可以完善测试下，祝学习愉快！
望采纳！
0
相似问题