css练习-小米官网首页静态页面制作

最新推荐文章于 2024-06-15 12:12:02 发布

Gogo2328

最新推荐文章于 2024-06-15 12:12:02 发布

阅读量681

点赞数 1

分类专栏： css练习文章标签： css

本文链接：https://blog.csdn.net/Gogo2328/article/details/123174178

版权

本文通过CSS技术详细解析了如何制作小米官网的快捷导航、banner及手机产品展示等关键区域，涵盖CSS布局和样式设计。

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

部分代码如下：

快捷导航区域代码

<!-- 头部 -->
        <header>

            <!-- 快捷导航 -->
            <div class="shortcut">
                <div class="wrapper">
                    <!-- 快捷导航左部 -->
                    <div class="left com">
                        <ul>
                            <li><a href="#">小米商城</a></li>
                            <li><a href="#">MIUI</a></li>
                            <li><a href="#">loT</a></li>
                            <li><a href="#">云服务</a></li>
                            <li><a href="#">天星科技</a></li>
                            <li><a href="#">有品</a></li>
                            <li><a href="#">小爱开放平台</a></li>
                            <li><a href="#">企业团购</a></li>
                            <li><a href="#">资质证照</a></li>
                            <li><a href="#">协议规则</a></li>
                            <li><a href="#">下载app</a></li>
                            <li><a href="#">Select Location</a></li>
                        </ul>
                    </div>

                    <!-- 快捷导航右部 -->
                    <div class="right com">
                        <ul>
                            <li><a href="#">登录</a></li>
                            <li><a href="#">注册</a></li>
                            <li><a href="#">消息通知</a></li>
                            <li>
                                <a href="#">
                                    <span class="iconfont icon-cart"></span>
                                    <span>购物车</span>
                                    <i>0</i>

                                    <p class="hov">您的购物车还没有加购</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 快捷导航 -->

// 头部
// 快捷导航
.shortcut{
    font-size: 12px;
    background: #333;
    .wrapper{
        display: flex;
        justify-content: space-between;
        // 公共样式
        .com{
            ul{