5-2编程练习
来源：5-2 编程练习
soso_crazy
2019-02-19 12:12:54
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 在此处补充代码*/
header{
background-color:black;
width:100%;
display:flex;
justify-content:space-around;
align-items:center;
}
.nav{
display:flex;
list-style:none;
width:30%;
justify-content:space-around;
align-items:center;
color:white;
}
input[type="button"]{
background-color:orange;
border-radius:5px;
color:white;
border:none;
}
.login{
width:10%;
display:flex;
align-items:center;
justify-content:space-around;
}
section{
display:flex;
justify-content:space-between;
}
.box{
border-radius:5px;
width:440px;
height:100px;
margin:5px 20px;
padding:5px 10px;
background-color:pink;
display:flex;
flex-direction:column;
justify-content:center;
}
.btn{
background-color:orange;
color:white;
height:25px;
text-align:center;
border-radius:5px;
}
.shopping{
display:flex;
align-items:center;
justify-content:center;
}
</style>
</head>
<body>
<!-- 头部 -->
<header>
<div class="logo">
<img src="http://climg.mukewang.com/59197ab000014f1503000100.jpg" 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>
<div class="section">
<div class="box">
<p>《前端小白入门手册》</p>
<div>适用人群：没有任何前端基础的小白</div>
<div>费用：￥499</div>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
<div class="section">
<div class="box">
<p>《HTML5月CSS3实现动态网页》</p>
<div>适用人群：有html和css基础的童鞋</div>
<div>费用：￥599</div>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
</section>
<section>
<div class="section">
<div class="box">
<p>《前端小白入门手册》</p>
<div>适用人群：没有任何前端基础的小白</div>
<div>费用：￥499</div>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
<div class="section">
<div class="box">
<p>《HTML5月CSS3实现动态网页》</p>
<div>适用人群：有html和css基础的童鞋</div>
<div>费用：￥599</div>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
</section>
</body>
</html>为什么我的购物车没有排在右边？
为什么header部分要设置.nav的width才能把各个li文字分隔开？
代码还有哪些地方需要改进的？
写回答
1回答
-
好帮手慕星星
2019-02-19
你好，
1、顶部nav导航如果不设置宽度，宽度就会由里面的内容撑起来：
没有多余的空间去分配，所以需要设置宽度，然后再去分配位置。
2、是div.section中包裹着两部分：
所以也需要给div.section设置flex布局，否则这两个都是块元素，在水平方向上占据的宽度都是100%，呈现垂直排列。
参考修改：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /* 在此处补充代码*/ header { background-color: black; width: 100%; display: flex; justify-content: space-around; align-items: center; } .nav { display: flex; list-style: none; width: 30%; justify-content: space-around; align-items: center; color: white; } input[type="button"] { background-color: orange; border-radius: 5px; color: white; border: none; } .login { width: 10%; display: flex; align-items: center; justify-content: space-around; } section { display: flex; justify-content: space-between; margin-top: 20px; } div.section { display: flex; justify-content: space-between; width: 45%; background-color: pink; border-radius: 10px; } .box { border-radius: 5px; margin: 5px 20px; padding: 5px 10px; display: flex; flex-direction: column; justify-content: center; } .btn { background-color: orange; color: white; width: 90px; height: 25px; text-align: center; border-radius: 5px; padding: 5px 10px; } .shopping { display: flex; align-items: center; box-sizing: border-box; padding: 30px; } </style> </head> <body> <!-- 头部 --> <header> <div class="logo"> <img src="http://climg.mukewang.com/59197ab000014f1503000100.jpg" 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> <div class="section"> <div class="box"> <p>《前端小白入门手册》</p> <div>适用人群：没有任何前端基础的小白</div> <div>费用：￥499</div> </div> <div class="shopping"> <div class="btn">加入购物车</div> </div> </div> <div class="section"> <div class="box"> <p>《HTML5月CSS3实现动态网页》</p> <div>适用人群：有html和css基础的童鞋</div> <div>费用：￥599</div> </div> <div class="shopping"> <div class="btn">加入购物车</div> </div> </div> </section> <section> <div class="section"> <div class="box"> <p>《前端小白入门手册》</p> <div>适用人群：没有任何前端基础的小白</div> <div>费用：￥499</div> </div> <div class="shopping"> <div class="btn">加入购物车</div> </div> </div> <div class="section"> <div class="box"> <p>《HTML5月CSS3实现动态网页》</p> <div>适用人群：有html和css基础的童鞋</div> <div>费用：￥599</div> </div> <div class="shopping"> <div class="btn">加入购物车</div> </div> </div> </section> </body> </html>自己可以测试修改下，祝学习愉快！
0
