主体部分用 main标签包裹。

<main>
    <div class="adrInfo">
      <div><i class="iconfont icon-location"></i></div>
    <div class="userInfo">
      <p> <span class="name">张三</span>19931432434</p>
    <p>上海市翻斗花园123号楼44层 401室</p>
    </div>
    <a href="#" class="more"><i class="iconfont icon-more"></i></a>
  </div>
  </main>

样式:

/* 订单页面主体样式 */
main{
  padding: 10px 10px 90px;
}

main>div{
  background-color: #fff;
  border-radius: 3px;
  margin-bottom: 10px;
  padding: 10px;
}

/* 订单页面收货信息模块 */

/* 整个盒子开启flex圣杯布局 */
.adrInfo{
  display: flex;
  justify-content: space-between;
}

/* 里面的第一个盒子装地址图标 */
.adrInfo div:nth-child(1){
  background-color: rgb(0, 190, 127);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  color: #fff;
}

/* 第二个盒子开启宽度自适应 */
.adrInfo div:nth-child(2){
  flex: 1;
  margin-left: 20px;
}

/* 更多按钮 */
.adrInfo .more{
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  text-decoration: none;
  color: black;
}

/* 收获用户信息 */
.adrInfo .name{
 font-size: 19px;
 margin-right: 10px;
}
/* 收获用户信息地址 */
.adrInfo .userInfo p:nth-child(2){
  margin: 10px 0px;
  line-height: 25px;
 }

效果:

用户收货

最后修改:2022 年 08 月 23 日
如果觉得我的文章对你有用,请随意赞赏