老师请检查
来源：3-4 自由编程
帅得无心敲代码
2021-04-15 22:24:54
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<link rel="stylesheet" href="./base.css">
<link rel="stylesheet" href="./index.css">
<script src="../通用适配和解决1px边框问题的封装方法.js"></script>
</head>
<body>
<header class="header-container">
<div class="head_wrap">
<div class="logo_box">
<a href="javascript:;">
<img src="./logo.png" alt="">
</a>
</div>
<div class="down_btn">
<button type="button">
下载APP
</button>
</div>
</div>
</header>
</body>
</html>
base.css
* {
padding:0;
margin:0;
box-sizing: border-box;
}
body {
font-size: 12px;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
img {
vertical-align: top;
border:none;
width: 100%;
}
button {
border:none;
outline: none;
}
indexx.css
.header-container {
height: 2.5rem;
background: #ccc;
}
.header-container .head_wrap {
height: 100%;
display: flex;
justify-content: space-between;
}
.header-container .head_wrap .logo_box {
height: 100%;
}
.header-container .head_wrap .logo_box a {
display: inline-block;
height: 100%;
}
.header-container .head_wrap .logo_box a img {
height: 100%;
}
.header-container .head_wrap .down_btn {
height: 100%;
display: flex;
align-items: center;
margin-right: 20px;
}
.header-container .head_wrap .down_btn button {
width: 5rem;
height: 2rem;
border-radius: 2rem;
font-size: .6rem;
background: rgba(255,0,0,0.1);
}
写回答
1回答
-
好帮手慕慕子
2021-04-16
同学你好，整体思路是可以的，由于给图片同时设置了百分百宽高，导致图片出现变形，效果不美观，如下图所示：
建议优化：去掉图片的宽度，让其自适应显示，效果会更美观。
祝学习愉快~
0
