老师这样可以吗

来源：3-17 编程练习

思絮

2021-12-25 23:03:02

相关代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 在此处补充代码*/

/* header头部样式 */
* {
margin: 0;
padding: 0;
}
.header {
display: flex;
background-color: #000;
justify-content: space-around;
align-items: center;
}
.header .nav {
display: flex;
color: #eee;
}
.header .nav li {
flex-direction: column;
list-style: none;
width: 100px;
}
.header .login input{
padding: 5px;
box-sizing: border-box;
border: none;
font-size: 18px;
border-radius: 4px;
background: orange;
color: #fff;
}

/* content样式 */
.content {
display: flex;
justify-content: space-evenly;
/* align-items: center; */
/* width: 100%; */
flex-wrap: wrap;
}
.content .section {
margin-top: 10px;
padding: 10px;
height: 150px;
background: rgb(96, 142, 202);
display: flex;
border-radius: 10px;
/* flex-flow: row; */
width: 650px;
/* flex: 1; */
}
.content .section .box {
display: flex;
padding-left: 20px;
height: 100%;
flex-direction: column;
flex: 3;
/* line-height: 50px; */
justify-content: space-around;
/* align-items: center; */
}
.content .section .shopping {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.content .section .shopping .btn{
font-size: 18px;
border-radius: 4px;
box-sizing: border-box;
padding: 10px;
color: #fff;
background-color: orange;
}
</style>
</head>
<body>
<!-- 头部 -->
<header class="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 class="content">
<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回答