老师，这样对吗

首页课程实战体系课手记专栏慕课教程

老师，这样对吗

来源：5-2 编程练习

Yuri沫

2020-01-29 13:25:05

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

/*在此处补充代码*/

*{

margin: 0;

padding: 0;

}

/*头部*/

header{

background:#000;

color:#fff;

display:flex;

justify-content:space-around;

align-items:center;

width: 100%;

}

.nav{

list-style:none;

display:flex;

justify-content:space-between;

width: 400px;

}

.login{

display: flex;

justify-content:space-between;

width: 100px;

}

.login input{

background: orange;

color: #fff;

border: none;

border-radius: 5px;

padding: 5px;

}

/*主体*/

section{

display: flex;

flex-wrap: wrap;

justify-content: space-around;

align-content: space-around;

}

.section{

background-color: skyblue;

width: 500px;

height: 100px;

margin-top: 10px;

display: flex;

justify-content: space-around;

padding: 10px;

border-radius: 5px;

}

.box{

display: flex;

flex-direction: column;

justify-content: space-around;

width: 320px;

}

.shopping{

display: flex;

align-items: center;

}

.shopping .btn{

background-color: orange;

font-weight: bold;

color: #fff;

border-radius: 5px;

padding: 10px;

cursor: pointer;

}

.shopping .btn:hover{

color: red;

}

</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>《从H5网页开发到移动端响应式开发》</p>

<div>适用人群：有html、css、js、jQ基础的童鞋</div>

<div>费用：￥599</div>

</div>

<div class="shopping">

<div class="btn">加入购物车</div>

</div>

</div>

<div class="section">

<div class="box">

<p>《从H5网页开发到移动端响应式开发》</p>

<div>适用人群：有html、css、js、jQ基础的童鞋</div>

<div>费用：￥599</div>

</div>

<div class="shopping">

<div class="btn">加入购物车</div>

</div>

</div>

</section>

</body>

</html>

写回答

1回答

好帮手慕慕子

好帮手慕慕子

2020-01-30

已采纳

同学你好，代码是正确的，效果实现的很棒，继续加油，祝学习愉快~

0

0 学习 · 5012 问题

相似问题

老师，这样对吗？

回答 1

老师这样算对了吗

回答 1

老师这样可以吗

回答 1

请老师检查，我这样写对吗? 我加了高度，我感觉好像不太对

回答 1

老师，这样可以吗

回答 1

打开慕课网App查看更多内容