<style>* {padding: 0px;margin: 0px;}section {/* background-color: pink; */margin: 65px auto;width: 300px;height: 479px;/* box-shadow: 10px 10px 5px #888888; */transition: all 1.5s;/* 让图片实现居中要在父元素中设置 *//* 但是这句属性影响到了后面所有盒子都居中显示了，因此去除在img中设置了margin属性实现居中 *//* text-align: center; */}section:hover {box-shadow: 5px 4px 38px #888888;}img {/* 通过父元素中的居中实现 */width: 203px;height: 302px;margin: 0 48px;}article {/* 注意调用calc函数时运算符前后都要以空格隔开 */width: calc(100% - 26px);height: 114px;/* background-color: skyblue; */margin: 0 auto;}article p:first-child {color: rgb(122, 127, 127);font-size: 14px;text-align: left;}article span:nth-child(2) {display: inline-block;height: 30px;/* background-color: purple; */color: red;font-size: 24px;margin-top: 12px;vertical-align: unset;}article :nth-child(3) {color: rgb(122, 127, 127);}.one,.two>span {color: rgb(122, 127, 127);font-size: 14px;}.redword {color: red;font-size: 14px !important;}.nav {display: inline-block;height: 10px;width: 118px;border: 2px solid;border-radius: 9px;}#io {width: 87%;height: 10px;border-bottom-left-radius: 5px;border-top-left-radius: 5px;background-color: red;}.enterbox {width: 236px;height: 45px;background-color: red;border: 0px;margin: -1px 28px;text-align: center;vertical-align: middle;box-sizing: border-box;padding-top: 11px;color: white;}</style>
</head><body><section class="border"><img src="images/QQ图片20220110142233.jpg" alt=""><article id="idr"><p>Apple苹果iPhone MAX (A1699)32G金色 移动联通电信4G手机</p><span class="number">￥6088</span><del class="del">￥6988</del><nav><span class="one"><span>已售 </span><span class="redword">87%</span></span><div class="nav"><p id="io"></p></div><span class="two"><span>剩余<span class="redword">29</span>件</span></span></nav></article><div class="enterbox">立即抢购</div></section>
</body></html>