老师，有地方需要优化吗？
来源：3-17 编程练习
慕前端2185815
2021-01-17 22:03:14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 在此处补充代码*/
*{
padding:0;
margin:0;
}
ul{
list-style: none;
}
img{
display: block;
}
header{
height:100px;
display:flex;
justify-content: space-around;
align-items:center;
background:black;
}
.logo{
flex-basis:80px;
}
.nav{
height:100%;
flex-basis:300px;
color:white;
display:inline-flex;
justify-content: space-between;
align-items:center;
}
.login{
flex-basis:130px;
height:100%;
display:flex;
justify-content: space-around;
align-items:center;
}
.login input{
background:orange;
height:20px;
width:50px;
border-radius:5px;
}
section{
height:400px;
display: flex;
flex-wrap:wrap;
justify-content: space-around;
align-content:space-around;
}
.section{
background:#f01400;
border-radius:10px;
height:150px;
width:45%;
display: flex;
justify-content: space-around;
align-items:center;
}
.box{
display: flex;
flex-direction: column;
justify-content: space-around;
height:80%;
}
.shopping{
display: flex;
width:90px;
height:30px;
justify-content: center;
align-items:center;
background:orange;
border-radius:5px;
font-size:14px;
}
</style>
</head>
<body>
<!-- 头部 -->
<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>
<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>《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>《HTML5月CSS3实现动态网页》</p>
<div>适用人群：有html和css基础的童鞋</div>
<div>费用：￥599</div>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
</section>
</body>
</html>
1回答
-
好帮手慕慕子
2021-01-18
同学你好，对于你的问题解答如下：
1、浏览器默认会给input标签添加边框，效果不美观，如下图所示：
建议优化：去掉边框，调整字体为白色，然后去掉设置的固定宽高，让其由内容撑开，通过padding属性值调整间距，示例：
2、建议优化：调整卡片的背景颜色为#add8e6，卡片中的按钮字体颜色调整为白色，效果会更好。
3、css中多次重复书写的代码，可以使用组合选择器书写在一起，简化代码书写。
另外，nav这里也可以为flex布局，设置justify-content: space-around;属性实现效果。示例：
祝学习愉快~
0
相似问题