用HTML和CSS写小米商城主体部分

最新推荐文章于 2024-12-31 17:07:28 发布

时光带不走

最新推荐文章于 2024-12-31 17:07:28 发布

阅读量376

点赞数 4

文章标签： html css

本文链接：https://blog.csdn.net/cj1555640/article/details/126472006

版权

这篇博客详细介绍了如何使用HTML和CSS来构建小米商城的主体部分，包括轮播图和广告栏的设计。在轮播图部分，博主展示了如何创建左侧导航以及与其配合的背景轮播图，并给出了相应的HTML和CSS代码。接着，博主讨论了广告栏的构建，分为左侧的服务区和右侧的图片广告区，同样提供了对应的HTML结构和CSS样式代码。

摘要由CSDN通过智能技术生成

一.轮播图部分

完成页面

轮播图部分分为左边导航以及右边的轮播图,轮播图也是导航栏的背景。

左边导航栏代码：

                <ol class="left-nav">
                    <li><a href="#">手机</a><i class="fa fa-angle-right" aria-hidden="true"></i>
                        <div class="left-nav-ybk">

                        </div>
                    </li>
                    <li><a href="#">电视</a><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                    <li><a href="#">笔记本 平板</a><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                    <li><a href="#">出行 穿戴</a><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                    <li><a href="#">耳机 音箱</a><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                    <li><a href="#">家电</a><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                    <li><a href="#">智能 路由</a><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                    <li><a href="#">电源 配件</a><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                    <li><a href="#">健康 儿童</a><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                    <li><a href="#">生活 箱包</a><i class="fa fa-angle-right" aria-

最低0.47元/天解锁文章