这里有问题吗

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

这里有问题吗

来源：3-17 编程练习

unbreakable_全栈

2020-09-04 11:40:22

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

/* 在此处补充代码*/

* {

margin: 0;

padding: 0;

}

li {

list-style: none;

}

.flex {

display: flex;

justify-content: space-between;

align-items: center;

}

.header {

background-color: #000;

color: #ffffff;

}

.logo,

.login {

flex-grow: 1;

}

.login {

justify-content: space-around;

}

.nav {

flex-grow: 2;

}

section {

display: flex;

justify-content: space-around;

flex-wrap: wrap;

}

.section {

background-color: #82d9f7;

margin-top: 15px;

padding: 10px 20px;

width: 45%;

border-radius: 5px;

height: 150px;

}

.box{

display: flex;

flex-direction: column;

justify-content: space-around;

height: 100%;

}

.btn {

background-color: orange;

padding: 10px;

color: #ffffff;

border-radius: 5px;

}

</style>

</head>

<body>

<header class="header flex">

<div class="logo">

<img src="http://climg.mukewang.com/59197ab000014f1503000100.jpg" alt="">

</div>

<ul class="nav flex">

<li>课程</li>

<li>路径</li>

<li>猿问</li>

<li>手记</li>

</ul>

<div class="login flex">

<input type="button" value="登录">

<input type="button" value="注册">

</div>

</header>

<section>

<div class="section flex">

<div class="box">

<p>《前端小白入门手册》</p>

<div>适用人群：没有任何前端基础的小白</div>

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

</div>

<div class="shopping">

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

</div>

</div>

<div class="section flex">

<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 flex">

<div class="box">

<p>《前端小白入门手册》</p>

<div>适用人群：没有任何前端基础的小白</div>

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

</div>

<div class="shopping">

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

</div>

</div>

<div class="section flex">

<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>

写回答

2回答

好帮手慕粉

好帮手慕粉

2020-09-04

同学你好，同学实现的效果是没有问题的。可以再给内容设置具体宽度，效果会更加美观：

再给按钮设置下样式：

0

好帮手慕粉

好帮手慕粉

2020-09-04

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

0

hnbreakable_全栈

h 导航没有问题吗？麻烦请教啦

h020-09-04

共1条回复

0 学习 · 6815 问题

相似问题

老师，要学到什么程度才可以写慕课网这样的课程视频

回答 2

这里有问题吗

回答 1

老师关于在本地调试发现的问题

回答 4

为什么我设置justify-content每个flex项目之间没有间距

回答 1

请问这个编程练习有答案吗

回答 1

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