麻烦老师帮忙看看有没有需要优化的地方
来源：4-15 项目作业
贪食王
2021-04-08 14:56:06
麻烦老师帮忙看看有没有需要优化的地方？我总感觉我这样写死参数的适配方式不太妥当，是不是有什么方法让我系统自动垂直居中呢？我购物车的角标好像也没有居中到位
相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css/css.css">
</head>
<body>
<div class="background">
<div>
<img class="btn-img" src="images/btn.png" alt="">
</div>
<div>
<img class="cart-img" src="images/cart.png" alt="">
<div class="cart-number">3</div>
</div>
</div>
</body>
</html>
相关代码：
.background {
width: 1000px;
height: 300px;
background-color: antiquewhite;
position: relative;
}
.background .btn-img {
position: absolute;
top: 50%;
margin-top: -45px;
margin-left: 100px;
}
.background .cart-img {
float: right;
margin-top: 40px;
margin-right: 100px;
}
.background .cart-number {
width: 40px;
height: 40px;
position: absolute;
right: 100px;
top: 50px;
border-radius: 50%;
background-color: red;
text-align: center;
color: #ffffff;
font-size: 25px;
}
写回答
1回答
-
好帮手慕然然
2021-04-08
同学你好，关于同学的问题解答如下：
1. 关于优化问题：在进行页面布局时，建议将布局的相关属性加给父元素，让其内部子元素的位置跟随父元素的位置而移动，这种布局思路会使页面结构看起来更清晰，因此同学的代码可以进行如下优化：
2. 垂直居中问题：在css中可以使用绝对定位来实现水平和垂直居中，绝对定位居中的实现方法有很多，老师这里介绍一种比较常见的：首先给需要实现水平居中和垂直居中的元素设置绝对定位属性，然后将left设为50%，top设为50%，最后将margin-top设为高度的负一半，margin-left设为宽度的负一半，就可实现效果。
如果只想实现垂直居中的话，只需设置top为50%，margin-top为高度的负一半即可。参考代码如下：
3. 购物车角标位置调整问题：建议将相对定位属性加给购物车角标元素的最近父元素，让其根据最近父元素的原点进行偏移，此时偏移距离计算相对容易一些，参考代码如下：
祝学习愉快！
0
相似问题