## 一、頁面預覽  ## 二、頁面結構 ``` <div class="my"> <div class="header"> <img class="avatar" src="http://i.waimai.meituan.com/static/img/default-avatar.png" /> <p class="nickname">美團小騎手 &gt;</p> </div> <div class="content"> <ul class="items"> <li class="address">收貨地址管理</li> <li class="money">商家代金券</li> </ul> <ul class="items"> <li class="email">意見反饋</li> <li class="question">常見問題</li> </ul> <p class="tel">客服電話:&nbsp;101-097-77</p> <p class="time">服務時間:&nbsp;9:00-23:00</p> </div> </div> ``` ## 三、頁面樣式 ``` .header { width: 100%; height: 4.266667rem; background-image: url('../img/header.png'); background-size: cover; overflow: hidden; } .avatar { width: 1.92rem; height: 1.92rem; margin: 0 auto; display: block; border: 0.08rem solid rgba(255,255,255,0.4); border-radius: 50%; margin-top: 0.666667rem; } .nickname { color: #333; font-size: 0.426667rem; text-align: center; margin-top: 0.4rem; } .content { min-height: 13.52rem; background-color: #eee; } .items { border-bottom: 0.266667rem solid #eee; background-color: #fff; } .items li { height: 1.2rem; font-size: 0.373333rem; position: relative; padding-left: 0.693333rem; margin-left: 0.4rem; border-bottom: 1px solid #e4e4e4; line-height: 1.2rem; } .items li::before { content: ' '; display: block; width: 0.426667rem; height: 0.426667rem; position: absolute; left: 0.026667rem; background-size: cover; top: 0.373333rem; } .items li::after { content: '>'; display: block; width: 0.426667rem; height: 0.426667rem; position: absolute; top: 0; right: 0.16rem; color: #aaa; } .items li:last-child { border: none; } .address::before { background-image: url('../img/address.png'); } .money::before { background-image: url('../img/money.png'); } .email::before { background-image: url('../img/email.png'); } .question::before { background-image: url('../img/question.png'); } .tel { font-size: 0.4rem; color: #ffb000; text-align: center; height: 1.226667rem; line-height: 1.226667rem; background-color: #fff; } .time { font-size: 0.373333rem; text-align: center; margin-top: 0.346667rem; color: #999; } ```