老师，帮忙看下哪里需要修改或者优化一下?
来源：3-17 编程练习
啥子也
2022-03-07 11:53:35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/css.css">
<link rel="stylesheet" href="icon-font/iconfont.css">
<style>
.header {
display: flex;
width: 100%;
height: 100px;
background: #000;
justify-content: space-around;
}
.header .header-nav {
display: flex;
width: 40%;
height: 100%;
}
.header .header-nav li {
display: flex;
flex: 1;
width: 100%;
height: 100%;
color: #fff;
align-items: center;
}
.header .header-nav li a {
font-size: 1.8em;
color: #fff;
}
.header .login {
display: flex;
width: 8%;
height: 100%;
justify-content: space-around;
align-items: center;
}
.header .login input {
color: #fff;
font-size: 1.6em;
font-weight: bold;
border: none;
border-radius: 10%;
background: rgb(255, 165, 0);
}
/* header部分 */
.main {
display: flex;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
}
.main .card {
display: flex;
width: 40%;
height: 140px;
margin-top: 20px;
background: rgb(135, 206, 235);
border-radius: 12px;
}
.main .card .text {
display: flex;
width: 70%;
flex-direction: column;
justify-content: center;
}
.main .card .text p {
font-size: 1.2em;
padding: 10px;
padding-left: 15%;
}
.main .card .shopping {
display: flex;
align-items: center;
}
.main .card .shopping input {
font-size: 1.6em;
font-weight: bold;
border: none;
border-radius: 5px;
padding: 10px;
background: rgb(255, 165, 0);
}
input {
cursor: pointer;
}
a {
color:#fff;
text-decoration:none;
}
</style>
</head>
<body>
<header class="header">
<h1>
<img src="http://climg.mukewang.com/59197ab000014f1503000100.jpg" alt="">
</h1>
<ul div class="header-nav">
<li><a href="#">课程</a></li>
<li><a href="#">路径</a></li>
<li><a href="#">猿问</a></li>
<li><a href="#">手记</a></li>
</ul>
<div class="login">
<input type="button" value="登录">
<input type="button" value="注册">
</div>
</header>
<section class="main">
<div class="card">
<div class="text">
<p>《前端小白入门手册》</p>
<p>适用人群：没有任何前端基础的小白</p>
<p>费用：￥499</p>
</div>
<div class="shopping">
<input type="button" value="加入购物车">
</div>
</div>
<div class="card">
<div class="text">
<p>《HTML5月CSS3实现动态网页》</p>
<p>适用人群：有html和css基础的童鞋</p>
<p>费用：￥599</p>
</div>
<div class="shopping">
<input type="button" value="加入购物车">
</div>
</div>
<div class="card">
<div class="text">
<p>《从hHTML5到移动端响应式开发》</p>
<p>适用人群：有html、css、js、jq基础的童鞋</p>
<p>费用：￥599</p>
</div>
<div class="shopping">
<input type="button" value="加入购物车">
</div>
</div>
<div class="card">
<div class="text">
<p>《从hHTML5到移动端响应式开发》</p>
<p>适用人群：有html、css、js、jq基础的童鞋</p>
<p>费用：￥599</p>
</div>
<div class="shopping">
<input type="button" value="加入购物车">
</div>
</div>
</section>
<footer class="footer">
</footer>
</body>
</html>我编辑时格式是正确的，发出来格式好像就乱了！
写回答
1回答
-
好帮手慕然然
2022-03-07
同学你好，flex布局整体上是没问题的，有几处样式上的小细节可以适当调整一下，如图
祝学习愉快！
0
相似问题