这样可以吗？需要怎么改进一下？
来源：5-2 编程练习
Elvis_T
2019-03-08 14:45:45
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* { padding: 0; margin: 0; border: none; font-size: 16px; font-weight: bold; font-family: "黑体"; }
/*header*/
header { min-width: 1280px; display: flex; justify-content: space-around; background: #000; }
.nav { max-width: 600px; list-style: none; color: #FFF; display: flex; align-items: center; }
.nav li { width: 100px; cursor: pointer; }
.nav li:hover { color: orange; }
.login { min-width: 100px; display: flex; justify-content: space-around; align-items: center; border-radius: 3px; }
.login input { height: 25px; background: orange; color: #FFF; border: 1px solid orange; border-radius: 3px; cursor: pointer; }
.login input:hover { color: red; }
/*section*/
section { display: flex; flex-wrap: wrap; justify-content: center; }
.section { width: 440px; background: #add8e6; padding: 10px; border: 1px solid #add8e6; border-radius: 5px; display: flex; align-items: center; justify-content: space-between; margin: 20px; }
.section .shopping { width: 85px; height: 20px; background: orange; border: 1px solid orange; border-radius: 3px; color: #FFF; padding: 1px; line-height: 20px; cursor: pointer; }
.section .shopping:hover { color: yellow; }
.box { height: 100px; display: flex; flex-direction: column; justify-content: space-around; }
</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>
<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>
<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>《前端小白入门手册》</p>
<div>适用人群：没有任何前端基础的小白</div>
<div>费用：￥499</div>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
</section>
</body>
</html>写回答
1回答
-
同学你好，代码中有以下几个问题：
1、体内容的卡片一行没有只显示两个，如下：
建议给每个盒子设置百分比的宽度，一行占两个盒子，如下：
2、建议把最小宽度（min-width：1280px）放到body中，这样浏览器缩小到1280px的时候，内容都不在发生变化，如下：
自己试一试哦，如果帮助到了你，欢迎采纳。
祝学习愉快！
0
相似问题