html+css:运用弹性布局写一个移动端手机商品模块

最新推荐文章于 2024-04-25 20:22:26 发布

Astar stars

最新推荐文章于 2024-04-25 20:22:26 发布

阅读量384

点赞数 2

分类专栏： html作品分享文章标签： html css

本文链接：https://blog.csdn.net/astar2022/article/details/126141907

版权

html作品分享专栏收录该内容

14 篇文章 3 订阅

订阅专栏

效果图：

html结构部分:

 <!-- 功能模块 -->
        <div class="user">
            <ul>
                <a href="">
                    <li>
                        <img src="./img/user/user0.png" alt="">
                        <p>每日签到</p>
                    </li>
                </a>
                <a href="">
                    <li>
                        <img src="./img/user/user1.png" alt="">
                        <p>限时抢购</p>
                    </li>
                </a>
                <a href="">
                    <li>
                        <img src="./img/user/user2.png" alt="">
                        <p>会员专享</p>
                    </li>
                </a>
                <a href="">
                    <li>
                        <img src="./img/user/user3.png" alt="">
                        <p>好货拼团</p>
                    </li>
                </a>
                <a href="">
                    <li>
                        <img src="./img/user/user4.png" alt="">
                        <p>分享领卷</p>
                    </li>
                </a>
                <a href="">
                    <li>
                        <img src="./img/user/user5.png" alt="">
                        <p>手机充值</p>
                    </li>
                </a>
                <a href="">
                    <li>
                        <img src="./img/user/user6.png" alt="">
                        <p>金融理财</p>
                    </li>
                </a>
                <a href="">
                    <li>
                        <img src="./img/user/user7.png" alt="">
                        <p>电器商城</p>
                    </li>
                </a>
                <a href="">
                    <li>
                        <img src="./img/user/user8.png" alt="">
                        <p>萌宝超市</p>
                    </li>
                </a>
                <a href="">
                    <li>
                        <img src="./img/user/user9.png" alt="">
                        <p>个人中心</p>
                    </li>
                </a>
            </ul>
        </div>
        <!-- 商品模块 -->
        <div class="commodity">
            <div class="commodity-top">
                <div class="freezer">
                    <h3 style="color:#E72F3E ;">电器城抢购</h3>
                    <p>全场低至299</p>
                    <img src="./img/ad/f1.jpg" alt="">
                </div>
                <div class="right">
                    <div class="right-top">
                        <div>
                            <h3 style="color:#4DB8F7 ;">创新新品</h3>
                            <p>好品质选创新新品上市</p>
                        </div>
                        <img src="./img/ad/f2.jpg" alt="">
                    </div>
                    <div class="right-bottom">
                        <ul>
                            <li>
                                <h3 style="color: #FFC31F;">拍摄一族</h3>
                                <p>喜欢旅游拍摄</p>
                                <img src="./img/ad/f3.jpg" alt="">
                            </li>
                            <li>
                                <h3 style="color: #199B8E;">每日坚果</h3>
                                <p>每天补充一下</p>
                                <img src="./img/ad/f5.jpg" alt="">
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="commodity-bottom">
                <ul>
                    <li>
                        <img src="./img/pd/cf-1.jpg" alt="">
                    </li>
                    <li>
                        <img src="./img/pd/cf-3.jpg" alt="">
                    </li>
                </ul>
            </div>
        </div>

css样式:

.user > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.user > ul li {
  margin: 0 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 1.5rem;
}

.user a {
  color: inherit;
}

.user > ul li p {
  text-align: center;
  font-size: 0.2rem;
}
.user > ul li img {
  width: 1rem;
  height: 1rem;
}
/* 商品 */
.commodity {
  width: 100%;
  margin-top: 0.3rem;
  display: flex;
  flex-direction: column;
}
.commodity-top {
  display: flex;
}

.freezer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 0.2rem;
  flex-shrink: 0;
}
.freezer img {
  height: 4rem;
  width: 2rem;
}
.commodity h3 {
  font-size: 0.35rem;
  font-weight: 400;
}
.commodity p {
  margin-top: 0.1rem;
  font-size: 0.28rem;
}

/* 右侧 */
.commodity .right {
  flex: 1;
  margin: 0 0.2rem 0 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.right-top {
  display: flex;
  justify-content: space-between;
}
.right-top img {
  height: 1rem;
}
.right-bottom ul {
  display: flex;
  justify-content: space-between;
}
.right-bottom img {
  width: 2.3rem;
  height: 2.3rem;
}

.commodity-bottom ul {
  display: flex;
}
.commodity-bottom img {
  width: 3.75rem;
  height: 3rem;
}

今日份更新！