完整小米网页制作

已于 2022-11-17 10:22:15 修改
阅读量1.6k 收藏 25
点赞数 4
分类专栏： 前端 web实践案例 javaweb 文章标签： 前端 javascript java
于 2022-11-17 10:21:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57780589/article/details/127898822
版权
前端 同时被 3 个专栏收录
26 篇文章 0 订阅
订阅专栏
web实践案例
13 篇文章 1 订阅
订阅专栏
javaweb
13 篇文章 0 订阅
订阅专栏

效果图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
图标待完善、固定栏待完善、响应式待完善、Js链接到其他页面待完善

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米</title>
    <!-- 网页图标 -->
    <link rel="icon" href="images/favicon.ico">
    <!-- 全局样式 -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 字体图标 -->
    <link rel="stylesheet" href="css/iconfont.css">
    <!-- 自己的css文件 -->
    <link rel="stylesheet" href="css/mi.css">
</head>
<body>
<!--头部-->
<div class="header">
    <div class="wrap">
        <ul class="header-left">
            <li><a href="#">小米商城</a><span>|</span></li>
            <li><a href="#">MIUI</a><span>|</span></li>
            <li><a href="#">loT</a><span>|</span></li>
            <li><a href="#">云服务</a><span>|</span></li>
            <li><a href="#">天星数科</a><span>|</span></li>
            <li><a href="#">有品</a><span>|</span></li>
            <li><a href="#">小爱开放平台</a><span>|</span></li>
            <li><a href="#">企业团购</a><span>|</span></li>
            <li><a href="#">资质证照</a><span>|</span></li>
            <li><a href="#">协议规则</a><span>|</span></li>
            <li><a href="#">下载app</a><span>|</span>
            <div class="download">
                  <img src="./images/download.png" alt="">
                <p>小米商城app</p>
            </div>
                <div class="triangle">

                </div>
            </li>
            <li><a href="#">智能生活</a><span>|</span></li>
            <li><a href="#">Select Location</a></li>
        </ul>
        <ul class="header-right">
            <li><a href="#">登录</a><span>|</span></li>
            <li><a href="#">注册</a><span>|</span></li>
            <li><a href="#">消息通知</a></li>
            <li class="cart"><a href="#"><i class="iconfont"></i>&#xe90a;购物车(0)</a>
            <div class="cart-list">
                   你还没有选中商品
            </div>
            </li>
        </ul>
    </div>
</div>
<!--导航栏-->
<div class="nav">
<div class="wrap">
    <div class="logo">
        <img src="./images/logo-footer.png" alt="">
    </div>
    <div class="nav-bar">
        <ul>
            <li><a href="#">Xiaomi手机</a>
            <div class="nav-bar-list">
               <div class="wrap">
                <ul>
                    <li>
                        <a href="#">
                              <div class="nav-bar-img">
                                  <img src="./images/4c87947d104ee5833913e4c520108f16.jpg" alt="">
                              </div>
                            <p>Xiaomi 12 pro</p>
                            <p>4699元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="nav-bar-img">
                                <img src="./images/4c87947d104ee5833913e4c520108f16.jpg" alt="">
                            </div>
                            <p>Xiaomi 12 pro</p>
                            <p>4699元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="nav-bar-img">
                                <img src="./images/4c87947d104ee5833913e4c520108f16.jpg" alt="">
                            </div>
                            <p>Xiaomi 12 pro</p>
                            <p>4699元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="nav-bar-img">
                                <img src="./images/4c87947d104ee5833913e4c520108f16.jpg" alt="">
                            </div>
                            <p>Xiaomi 12 pro</p>
                            <p>4699元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="nav-bar-img">
                                <img src="./images/4c87947d104ee5833913e4c520108f16.jpg" alt="">
                            </div>
                            <p>Xiaomi 12 pro</p>
                            <p>4699元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="nav-bar-img">
                                <img src="./images/4c87947d104ee5833913e4c520108f16.jpg" alt="">
                            </div>
                            <p>Xiaomi 12 pro</p>
                            <p>4699元起</p>
                        </a>
                    </li>
                </ul>
               </div>
            </div>
            </li>
            <li><a href="#">Redmi红米</a>
                <div class="nav-bar-list">
                    <div class="wrap">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="nav-bar-img">
                                       <img src="images/2c16238f786e4f93bdb175d7bf21aa47.jpg" alt="">
                                    </div>
                                    <p>Xiaomi 12 pro</p>
                                    <p>4699元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="nav-bar-img">
                                        <img src="images/2c16238f786e4f93bdb175d7bf21aa47.jpg" alt="">
                                    </div>
                                    <p>Xiaomi 12 pro</p>
                                    <p>4699元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="nav-bar-img">
                                        <img src="images/2c16238f786e4f93bdb175d7bf21aa47.jpg" alt="">
                                    </div>
                                    <p>Xiaomi 12 pro</p>
                                    <p>4699元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="nav-bar-img">
                                        <img src="images/2c16238f786e4f93bdb175d7bf21aa47.jpg" alt="">
                                    </div>
                                    <p>Xiaomi 12 pro</p>
                                    <p>4699元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="nav-bar-img">
                                        <img src="images/2c16238f786e4f93bdb175d7bf21aa47.jpg" alt="">
                                    </div>
                                    <p>Xiaomi 12 pro</p>
                                    <p>4699元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="nav-bar-img">
                                        <img src="images/2c16238f786e4f93bdb175d7bf21aa47.jpg" alt="">
                                    </div>
                                    <p>Xiaomi 12 pro</p>
                                    <p>4699元起</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </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>
        </ul>
    </div>
    <div class="search">
        <form action="" >
            <input type="text" placeholder="电视">
            <button class="iconfont">&#xe933;</button>
            <div class="hot-list">
                <a href="#">商品1</a>
                <a href="#">商品2</a>
                <a href="#">商品3</a>
                <a href="#">商品4</a>
                <a href="#">商品5</a>
                <a href="#">商品6</a>
                <a href="#">商品7</a>
                <a href="#">商品8</a>
            </div>
        </form>
    </div>
</div>
</div>
<!--banner-->
<div class="banner">
    <div class="wrap">
        <div class="banner-box">
            <a href="#">
                <img src="images/a2938e547bc127b0014daa1f9b614fc0.jpg" alt="">
            </a>
<!--轮播图、滑动图-->
            <div class="slide">
                <ul>
                    <li><a href="#">手机1</a><i class="iconfont">&#xe93d;</i>
                    <div class="slide-list">
                        <ul>
                            <li>
                               <a href="#">
                                   <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                   <span>Xiaomi 12 pro</span>
                               </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
                                    <span>Xiaomi 12 pro</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    </li>
                    <li><a href="#">手机2</a><i class="iconfont">&#xe93d;</i>
                        <div class="slide-list">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
                                        <span>Xiaomi 12 pro</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">手机</a><i class="iconfont">&#xe93d;</i> </li>
                    <li><a href="#">手机</a><i class="iconfont">&#xe93d;</i> </li>
                    <li><a href="#">手机</a><i class="iconfont">&#xe93d;</i> </li>
                    <li><a href="#">手机</a><i class="iconfont">&#xe93d;</i> </li>
                    <li><a href="#">手机</a><i class="iconfont">&#xe93d;</i> </li>
                    <li><a href="#">手机</a><i class="iconfont">&#xe93d;</i> </li>
                    <li><a href="#">手机</a><i class="iconfont">&#xe93d;</i> </li>
                    <li><a href="#">手机</a><i class="iconfont">&#xe93d;</i> </li>
                </ul>
            </div>
        </div>
        <div class="prev"></div>
        <div class="next"></div>
    </div>
</div>
<!--广告部分-->
<div class="adv">
<div class="wrap">
    <div class="adv-aside">
        <ul>
            <li class="row col">
                <a href="#">
                    <img src="images/12eb0965ab33dc8e05870911b90f3f13.png" alt="">
                    <span>奥里给</span>
                </a>
            </li>
            <li class="row col">
                <a href="#">
                    <img src="images/12eb0965ab33dc8e05870911b90f3f13.png" alt="">
                    <span>奥里给</span>
                </a>
            </li>
            <li class="row">
                <a href="#">
                    <img src="images/12eb0965ab33dc8e05870911b90f3f13.png" alt="">
                    <span>奥里给</span>
                </a>
            </li>
            <li class="col">
                <a href="#">
                    <img src="images/12eb0965ab33dc8e05870911b90f3f13.png" alt="">
                    <span>奥里给</span>
                </a>
            </li>
            <li class="col">
                <a href="#">
                    <img src="images/12eb0965ab33dc8e05870911b90f3f13.png" alt="">
                    <span>奥里给</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/12eb0965ab33dc8e05870911b90f3f13.png" alt="">
                    <span>奥里给</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="adv-img">
        <a href="#"><img src="images/7bc54a61b927dd8c54ddd39a0acf0254.jpg" alt=""> </a>
    </div>
    <div class="adv-img">
        <a href="#"><img src="images/7bc54a61b927dd8c54ddd39a0acf0254.jpg" alt=""> </a>
    </div>
    <div class="adv-img">
        <a href="#"><img src="images/7bc54a61b927dd8c54ddd39a0acf0254.jpg" alt=""> </a>
    </div>
</div>
</div>
<!--主体-->
<div class="contant">
<div class="wrap">
<div class="home-box">
<a href="#">
    <img src="./images/11fc2ced4d8b5a924633f9a5b59f9fd2.jpg" alt="">
</a>
</div>
<!--手机-->
    <div class="phone">
        <h2 class="title">手机</h2>
        <div class="phone-box">
            <div class="phone-box-left">
                <a href="#">
                    <img src="images/b67de5a8ce9025fb5d8bac66e019d1c3.jpg" alt="">
                </a>
            </div>
            <div class="phone-box-right">
                <div class="items">
                    <a href="#">
                        <img src="images/c924c3f3436b6934495fd98f159ee3f7.jpg" alt="" class="goods-img">
                        <p class="name">Xiaomi 12 Pro</p>
                        <p class="desc">全新一代 天机8</p>
                        <p class="price">4699元起</p>
                    </a>
                </div>
                <div class="items">
                    <a href="#">
                        <img src="images/c924c3f3436b6934495fd98f159ee3f7.jpg" alt="" class="goods-img">
                        <p class="name">Xiaomi 12 Pro</p>
                        <p class="desc">全新一代 天机8</p>
                        <p class="price">4699元起</p>
                    </a>
                </div>
                <div class="items">
                    <a href="#">
                        <img src="images/c924c3f3436b6934495fd98f159ee3f7.jpg" alt="" class="goods-img">
                        <p class="name">Xiaomi 12 Pro</p>
                        <p class="desc">全新一代 天机8</p>
                        <p class="price">4699元起</p>
                    </a>
                </div>
                <div class="items">
                    <a href="#">
                        <img src="images/c924c3f3436b6934495fd98f159ee3f7.jpg" alt="" class="goods-img">
                        <p class="name">Xiaomi 12 Pro</p>
                        <p class="desc">全新一代 天机8</p>
                        <p class="price">4699元起</p>
                    </a>
                </div>
                <div class="items">
                    <a href="#">
                        <img src="images/c924c3f3436b6934495fd98f159ee3f7.jpg" alt="" class="goods-img">
                        <p class="name">Xiaomi 12 Pro</p>
                        <p class="desc">全新一代 天机8</p>
                        <p class="price">4699元起</p>
                    </a>
                </div>
                <div class="items">
                    <a href="#">
                        <img src="images/c924c3f3436b6934495fd98f159ee3f7.jpg" alt="" class="goods-img">
                        <p class="name">Xiaomi 12 Pro</p>
                        <p class="desc">全新一代 天机8</p>
                        <p class="price">4699元起</p>
                    </a>
                </div>
                <div class="items">
                    <a href="#">
                        <img src="images/c924c3f3436b6934495fd98f159ee3f7.jpg" alt="" class="goods-img">
                        <p class="name">Xiaomi 12 Pro</p>
                        <p class="desc">全新一代 天机8</p>
                        <p class="price">4699元起</p>
                    </a>
                </div>
                <div class="items">
                    <a href="#">
                        <img src="images/c924c3f3436b6934495fd98f159ee3f7.jpg" alt="" class="goods-img">
                        <p class="name">Xiaomi 12 Pro</p>
                        <p class="desc">全新一代 天机8</p>
                        <p class="price">4699元起</p>
                    </a>
                </div>


            </div>
        </div>
    </div>
</div>
</div>
<!--手表-->
<div class="contant">
    <div class="wrap">
        <div class="home-box">
            <a href="#">
                <img src="./images/41d16e66381cfeda7b6b39ab67678d5e.jpg" alt="">
            </a>
        </div>
<div class="phone">
    <h2 class="title">手表</h2>
    <div class="phone-box">
        <div class="phone-box-left">
            <a href="#">
                <img src="images/b56fd90a60e3d9e5d87dae9fbd427ea8.jpg" alt="">
            </a>
        </div>
        <div class="phone-box-right">
            <div class="items">
                <a href="#">
                    <img src="images/d295c4fb500d163a7045dc715b47f808.jpg" alt="" class="goods-img">
                    <p class="name">Xiaomi 12 Pro</p>
                    <p class="desc">全新一代 天机8</p>
                    <p class="price">4699元起</p>
                </a>
            </div>
            <div class="items">
                <a href="#">
                    <img src="images/d295c4fb500d163a7045dc715b47f808.jpg" alt="" class="goods-img">
                    <p class="name">Xiaomi 12 Pro</p>
                    <p class="desc">全新一代 天机8</p>
                    <p class="price">4699元起</p>
                </a>
            </div>
            <div class="items">
                <a href="#">
                    <img src="images/d295c4fb500d163a7045dc715b47f808.jpg" alt="" class="goods-img">
                    <p class="name">Xiaomi 12 Pro</p>
                    <p class="desc">全新一代 天机8</p>
                    <p class="price">4699元起</p>
                </a>
            </div>
            <div class="items">
                <a href="#">
                    <img src="images/d295c4fb500d163a7045dc715b47f808.jpg" alt="" class="goods-img">
                    <p class="name">Xiaomi 12 Pro</p>
                    <p class="desc">全新一代 天机8</p>
                    <p class="price">4699元起</p>
                </a>
            </div>
            <div class="items">
                <a href="#">
                    <img src="images/d295c4fb500d163a7045dc715b47f808.jpg" alt="" class="goods-img">
                    <p class="name">Xiaomi 12 Pro</p>
                    <p class="desc">全新一代 天机8</p>
                    <p class="price">4699元起</p>
                </a>
            </div>
            <div class="items">
                <a href="#">
                    <img src="images/d295c4fb500d163a7045dc715b47f808.jpg" alt="" class="goods-img">
                    <p class="name">Xiaomi 12 Pro</p>
                    <p class="desc">全新一代 天机8</p>
                    <p class="price">4699元起</p>
                </a>
            </div>
            <div class="items">
                <a href="#">
                    <img src="images/d295c4fb500d163a7045dc715b47f808.jpg" alt="" class="goods-img">
                    <p class="name">Xiaomi 12 Pro</p>
                    <p class="desc">全新一代 天机8</p>
                    <p class="price">4699元起</p>
                </a>
            </div>
            <div class="items">
                <a href="#">
                    <img src="images/d295c4fb500d163a7045dc715b47f808.jpg" alt="" class="goods-img">
                    <p class="name">Xiaomi 12 Pro</p>
                    <p class="desc">全新一代 天机8</p>
                    <p class="price">4699元起</p>
                </a>
            </div>

        </div>
    </div>
</div>
</div>
</div>
<!--视频-->
<div class="video">
    <div class="wrap">
    <h2 class="title">视频</h2>
    <div class="video-box">
        <ul>
            <li>
                <a href="images/bb682b7e1c0fba0e4e1eac1d8c7f47ce.mp4"></a>
            <div class="video-img">
                <img src="images/2fd26bb99b723337a2f8eaba84f7d5bb.jpg" alt="">
                <div class="play">
                      <span></span>
                </div>
            </div>
                <p>好好学习天天向上</p>
                </a>
            </li>
            <li>
                <a href="images/bb682b7e1c0fba0e4e1eac1d8c7f47ce.mp4"></a>
                <div class="video-img">
                    <img src="images/2fd26bb99b723337a2f8eaba84f7d5bb.jpg" alt="">
                    <div class="play">
                        <span></span>
                    </div>
                </div>
                <p>好好学习天天向上</p>
                </a>
            </li>
            <li>
                <a href="images/bb682b7e1c0fba0e4e1eac1d8c7f47ce.mp4"></a>
                <div class="video-img">
                    <img src="images/2fd26bb99b723337a2f8eaba84f7d5bb.jpg" alt="">
                    <div class="play">
                        <span></span>
                    </div>
                </div>
                <p>好好学习天天向上</p>
                </a>
            </li>
            <li>
                <a href="images/bb682b7e1c0fba0e4e1eac1d8c7f47ce.mp4"></a>
                <div class="video-img">
                    <img src="images/2fd26bb99b723337a2f8eaba84f7d5bb.jpg" alt="">
                    <div class="play">
                        <span></span>
                    </div>
                </div>
                <p>好好学习天天向上</p>
                </a>
            </li>
        </ul>
    </div>
</div>
</div>
<!--页脚-->
<div class="footer">
    <div class="footer-top">
        <div class="wrap">
            <div class="footer-server">
                <ul>
                    <li>
                        <a href="#">
                        <img src="images/4f036ae4d45002b2a6fb6756cedebf02.png" alt="">
                        <span>预约服务</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/4f036ae4d45002b2a6fb6756cedebf02.png" alt="">
                            <span>预约服务</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/4f036ae4d45002b2a6fb6756cedebf02.png" alt="">
                            <span>预约服务</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/4f036ae4d45002b2a6fb6756cedebf02.png" alt="">
                            <span>预约服务</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/4f036ae4d45002b2a6fb6756cedebf02.png" alt="">
                            <span>预约服务</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-links">
                <ul>
                    <li>帮助中心</li>
                    <li><a href="#">财务管理</a></li>
                    <li><a href="#">财务管理</a></li>
                    <li><a href="#">财务管理</a></li>
                </ul>
                <ul>
                    <li>帮助中心</li>
                    <li><a href="#">财务管理</a></li>
                    <li><a href="#">财务管理</a></li>
                    <li><a href="#">财务管理</a></li>
                </ul>
                <ul>
                    <li>帮助中心</li>
                    <li><a href="#">财务管理</a></li>
                    <li><a href="#">财务管理</a></li>
                    <li><a href="#">财务管理</a></li>
                </ul>
                <ul>
                    <li>帮助中心</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>
                </ul>
                <ul>
                    <li>帮助中心</li>
                    <li><a href="#">财务管理</a></li>
                    <li><a href="#">财务管理</a></li>
                    <li><a href="#">财务管理</a></li>
                    <li><a href="#">财务管理</a></li>
                </ul>
                <ul>
                    <li>帮助中心</li>
                    <li><a href="#">财务管理</a></li>
                    <li><a href="#">财务管理</a></li>
                    <li><a href="#">财务管理</a></li>
                </ul>
<!--                <div class="contant">-->
<!--                    <p>400-100-5678</p>-->
<!--                    <p>8:00-18:00(仅收市话费）</p>-->
<!--                    <a href="#" class="btn">人工客服</a>-->
<!--                    <p>-->
<!--                        <span>关注小米：</span>-->
<!--                        <a href="#" class="wb"> </a>-->
<!--                        <a href="#" class="wx"> </a>-->
<!--                    </p>-->
<!--                </div>-->
            </div>
        </div>
    </div>
    <div class="footer-bottom"></div>

</div>
<!--固定位置-->
<div class="fixed">
    
</div>
</body>
</html>

CSS

*{
    margin: 0px;
    padding: 0px;
}
/*头部*/
.header{
    width: 100%;
    height:40px;
    line-height: 40px;
    background-color:#333;
}
.wrap{
    width:1226px;
    margin:0 auto;
}
.header-left{
    float: left;
}
.header-right{
    float: right;
}
.header li{
    float: left;
    position: relative;
    height: 40px;
    /*设置一下高度不然下面板块会有空隙*/
}
li{
    list-style-type: none;
}
.header a{
    color:#b0b0b0;
    font-size:12px;
}
a{
    text-decoration: none;
}
.header a:hover{
    color:#fff;
}
.header span{
    color:#424242;
    margin: 0 3.6px;
    font-size:12px;
}
.cart{
    position: relative;
    width:100px;
    height:40px;
    background-color:#424242;
    margin-left: 25px;
    text-align: center;
}
.cart:hover{
    background-color:#fff;
}
.cart:hover>a{
    color:#ff6700;
}
.cart-list{
    z-index: 950;
    position: absolute;
    right:0;
    top:40px;
    width:316px;
    height:0px;
/*隐藏文字高度设置为0*/
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0, .15);
    color: #424242;
    font-size:12px;
    line-height:100px ;
    transition: all .3s;
/*过渡*/
    overflow: hidden;
}
.cart:hover>.cart-list{
    height:100px;
}
.download{
    /*被遮挡*/
    z-index: 900;
    position: absolute;
    top:40px;
    left:50%;
    margin-left: -55px;
    width:124px;
    height:0px;
    background-color:#fff;
    box-shadow: 0 1px 5px #aaa;
    overflow: hidden;
    transition: all .3s;
}
.download>img{
    width:90px;
    margin: 18px 0 12px;
   padding-left: 18px;
}
.download>p{
    color: #333;
    font-size: 14px;
    line-height: 1;
    text-align: center;
}
.header-left>li:hover>.download{
    height:148px;
}
.triangle{
    display: none;
    position: absolute;
    bottom: 0;
    left:50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-bottom:8px solid #fff;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
}
.header-left>li:hover>.triangle{
    display: block;
}
/*导航栏*/
.nav{
    /*清除边距，也可以更改上面li高度*/
    clear:both;
    width: 100%;
    height:100%;
    background-color: #fff;
    position: relative;
}
.logo{
    float: left;
    width: 234px;
    height:100px;
    /*background-color: red;*/
    text-align: left;
}
.nav-bar{
    float: left;
    width: 696px;
    height:100px;
    /*background-color: sienna;*/
}
.search{
    float: left;
    width:296px;
    height:50px;
    /*background-color: seagreen;*/
    margin-top: 25px;
    position: relative;
}
.logo>img{
    width: 56px;
    margin-top:22px;
}
.nav-bar>ul>li{
    float: left;
}
.nav-bar>ul>li>a{
    display: block;
    padding:38px 10px;
    color: #333;
}
.nav-bar>ul>li>a:hover{
    color: #ff6700;
}
.nav-bar-list{
    z-index: 850;
    /*写的时候打开，写完了就隐藏*/
    display: none;
    position: absolute;
    top:100px;
    left:0;
    width: 100%;
    height: 229px;
    border-top:1px solid #e0e0e0;
    background-color: #fff;
    box-shadow: 0 3px 4px rgba(0,0,0, .18);
}
.nav-bar li:hover>.nav-bar-list{
    display: block;
}
/*有遮挡上面下拉列表，添加z-index*/
.nav-bar-list li{
    width: 204px;
    /*height: 100px;*/
    /*background-color:red;*/
    padding-top:35px;
    float: left;
}
.nav-bar-img{
    width: 100%;
    height:110px;
    border-right:1px solid #e0e0e0;
}
.nav-bar-img img{
    width:50%;
    height:100px;
    margin-left: 10px;
}
.nav-bar-list p{
    line-height: 20px;
    font-size: 12px;
    color:#333;
    margin-left: 20px;
}
.nav-bar-list p:last-of-type{
    color: #ff6700;
    margin-left: 30px;
}
.nav-bar-list li:last-child .nav-bar-img{
    border-right: none;
}
.search input{
    float: left;
    width: 223px;
    height:48px;
    padding:0 10px;
    border: 1px solid #e0e0e0;
    border-right: none;
    outline: none;
    /*去自带边框*/
    transition: all .2s;
}
.search button{
    float: left;
    width: 52px;
    height: 50px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    transition: all .2s;
}
.search button:hover{
    background-color: #ff6700;
    border-color: #ff6700;
    color: #fff;
}
/*包含关系用空格或者大于，同级用加或波浪线*/
.search input:hover,.search input:hover+button{
    border-color: #b0b0b0;
}
.search input:focus,.search input:focus+button{
    border-color: #ff6700;
}
/*悬停+点击，换成焦点就好了*/
.hot-list{
    z-index: 900;
    display: none;
    position: absolute;
    top:50px;
    left:0;
    width: 243px;
    height: 240px;
    border: 1px solid #ff6700;
    border-top:none;
    background-color: #fff;
}
.hot-list a{
    display: block;
    color: #424242;
    font-size: 12px;
    padding: 6px 15px;
    height: 18px;
}
.hot-list a:hover{
    background-color: #e0e0e0;
}
.search input:focus~.hot-list{
    display: block;
}
/*banner*/
.banner{
    width: 100%;
    height:460px;
    /*background-color: red;*/
    margin-top: 100px;
}
.banner-box{
    position: relative;
    width: 100%;
    height: 460px;
    /*background-color: sienna;*/
}
.banner-box img{
    width: 100%;
    height:460px;
}
/*滑动门*/
.slide{
    position: absolute;
    top:0px;
    left:0px;
    width: 234px;
    height: 420px;
    padding: 20px 0;
    background-color: rgba(105,101,101, .6);
}
.slide>ul>li{
    height: 42px;
    line-height: 42px;
    padding-left: 30px;
    text-align: left;
}
.slide>ul>li:hover{
    background-color: #ff6700;
}
.slide>ul>li>a{
    color: #fff;
    font-size: 14px;
}
.slide i{
    float: right;
    margin-right: 20px;
    color: #e0e0e0;
}
.slide-list{
    z-index: 700;
    display: none;
    position: absolute;
    top:0;
    left:100%;
    width: 992px;
    height: 456px;
    border: 1px solid #e0e0e0;
    border-left: none;
    background-color: #fff;
    box-shadow: 0 8px 16px rgba(0,0,0, .18);
    padding-top: 2px;
}
.slide li:hover>.slide-list{
    display: block;
}
.slide-list>ul{
    width: 245px;
    float: left;
}
.slide-list li{
    width: 100%;
    height: 76px;
    /*background-color: red;*/
    padding: 18px 0 18px 20px;
    box-sizing: border-box;
}
.slide-list li img{
    position: relative;
    width: 30px;
    height:42px;
}
.slide-list li span{
    position: absolute;
    margin-top: 1.5px;
    font-size: 12px;
    color: #333;
}
.slide-list li:hover span{
    color: #ff6700;
}
/*箭头*/
.prev,.next{
    position: absolute;
    top:50%;
    margin-top: -34.5px;
    width: 41px;
    height:69px;
    background: url("../images/icon-slides.png");
}
.prev{
    left:400px;
    background-position:-83px;
}
.prev:hover{
    background-position: 0;
}
.next{
    right: 180px;
    background-position: -124px;
}
.next:hover{
    background-position: -42px;
}
/*广告部分*/
.adv{
    width:100%;
    height: 170px;
    margin: 14px 0 26px;
}
.adv-aside{
    position: relative;
    float: left;
    width:228px;
    height: 164px;
    padding:3px;
    background-color: #5f5750;
}
.adv-img{
    float: left;
    width:316px;
    height:170px;
    background-color: red;
    margin-left: 14.66px;
    transition: all .2s linear;
}
.adv-img img{
    width:100%;
}
.adv-img :hover{
    box-shadow:0 15px 30px rgba(0,0,0, .1) ;
}
.adv-aside li{
    position: relative;
    float: left;
    width: 76px;
    height: 82px;
}
.adv-aside img{
    float: left;
    width: 35px;
    height:35px;
}
.adv-aside span{
    float: left;
    text-decoration: none;
    margin-bottom: 4px;
    display:block;
    font-size: 16px;
}
.adv-aside img,span{
    padding-left: 13px;
    padding-top: 7px;
}
.adv-aside a{
    display: block;
    color: #fff;
    font-size: 12px;
    opacity: .7;
    transition: all .2s;
}
.adv-aside a:hover{
    opacity: 1;
}
.row::after{
    position: absolute;
    bottom: 0;
    left:5px;
    content: " ";
    height: 1px;
    width: 64px;
    background-color: #665e57;
}
.col::before{
    position: absolute;
    right:0;
    top:5px;
    content: " ";
    width: 1px;
    height: 70px;
    background-color:#665e57;
}
/*可以直接合并*/
/*.row::after,.col::before{*/
/*    position: absolute;*/
/*    content: " ";*/
/*    background-color:#665e57;*/
/*}*/
/*.row::after{*/
/*    bottom: 0;*/
/*    left:5px;*/
/*    height: 1px;*/
/*    width: 64px;*/
/*}*/
/*.col::before{*/
/*    right:0;*/
/*    top:5px;*/
/*    width: 1px;*/
/*    height: 70px;*/
/*}*/

/*主体*/
.contant{
    width: 100%;
    background-color: #f5f5f5;
    padding: 4px 0 12px;
}
.home-box{
    width: 100%;
    height: 120px;
    margin: 22px 0;
}
.title{
    text-align: left;
    font-size: 22px;
    font-weight: 200;
    color:#333;
    line-height: 58px;
}
.phone-box{
    width: 100%;
    height: 614px;
    /*background-color: red;*/
}
.phone-box-left{
    float: left;
    width: 234px;
    height:614px;
    /*background-color: seagreen;*/
    transition: all .2s linear;
}
.phone-box-left img{
    width: 100%;
    height: 100%;
}
.phone-box-right{
    float: left;
    width: 992px;
    height:614px;
    /*background-color: pink;*/
}
.items{
    float: left;
    width: 234px;
    height: 300px;
    background-color: #fff;
    margin-bottom: 14px;
    margin-left: 14px;
    transition: all .2s linear;
}
.items:hover,.phone-box-left:hover,.video-box li:hover{
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0,0,0, .1);
}
.goods-img{
    width: 160px;
    margin: 30px 20px 10px 35px;
}
.items p{
    text-align: center;
}
.name{
    width: 214px;
    height: 21px;
    margin: 0 auto 2px;
    /*background-color: red;*/
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.desc{
    width: 214px;
    height: 18px;
    color: #b0b0b0;
    font-size: 12px;
    margin: 0 auto 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*可合并写*/
.price{
    color: #ff6700;
    font-size: 14px;
}

/*视频*/
.video-box li{
    width: 296px;
    height:285px;
    margin-bottom: 14px;
    background-color: #fff;
    float: left;
    margin-left: 14px;
    transition: all .2s linear;
}
.video-box li:first-child{
    margin-left: 0;
}
.video-img{
    position: relative;
    width: 100%;
    height: 180px;
    margin-bottom: 28px;
}
.video-box p{
    width: 268px;
    height: 21px;
    color: #333;
    font-size: 14px;
    margin: 0 auto 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.video-box a{
    display: block;
}
.play{
    position: absolute;
    left:20px;
    bottom: 10px;
    width: 32px;
    height:20px;
    border: 2px solid #fff;
    border-radius: 12px;
    background-color: rgba(0,0,0, .6);
    transition: all .2s;
}
.play>span{
    padding: 0;
    margin: 0;
    width: 0;
    height:0;
    display: inline-block;
    border-left: 10px solid #fff;
    border-top:6px solid transparent;
    border-bottom: 6px solid transparent;
    position: relative;
    left:12px;
    top:-1px;
}
.video-img:hover>.play{
    background-color: #ff6700;
    border-color: #ff6700;
}

/*页脚*/
.footer-top{
    background-color: #fff;
}
.footer-bottom{
    background-color: #fafafa;
    padding: 30px 0;
}
.footer-server{
    width: 100%;
    height:25px;
    line-height: 25px;
    padding:27px 45px;
    border-bottom: 1px solid #e0e0e0;
}
.footer-server li{
    float: left;
    width:19.8%;
    border-right: 1px solid #e0e0e0;
}
.footer-server li:last-child{
    border-right: none;
}
.footer-server img{
    width: 20px;
    height: 20px;
    margin-right: 6px;
    position: relative;
    left:20px;
    top:4px;
}
.footer-server a{
    color:#616161;
    transition: all .2s;
}
.footer-server a:hover{
    color: #ff6700;
}
.footer-links{
     padding:40px 0;
    height:172px;
}
.footer-links ul{
    float: left;
    width: 160px;
    text-align: left;
    padding-left: 43px;
    margin-top: 30px;
}
.footer-links li{
    height: 18px;
    margin-top: 10px;
    font-size: 14px;
    color: #424242;
}
.footer-links li:first-child{
    height:17px;
    margin: -1px 0 26px;
}
.footer-links li a{
    font-size: 12px;
    color: #757575;
}
.footer-links li a:hover{
    color: #ff6700;
}
/*.contant{*/
/*    float: right;*/
/*    width: 251px;*/
/*    height: 111px;*/
/*    border-left: 1px solid #e0e0e0;*/
/*    padding-top: 50px;*/
/*}*/
/*.contant>p:first-of-type{*/
/*    font-size: 22px;*/
/*    line-height: 22px;*/
/*    color: #ff6700;*/
/*    margin-bottom: 5px;*/
/*}*/
/*.contant>p:nth-of-type(2){*/
/*    color: #616161;*/
/*    font-size: 12px;*/
/*    margin-bottom: 5px;*/
/*}*/
/*.btn{*/
/*    width: 118px;*/
/*    height:28px;*/
/*    border: 1px solid #ff6700;*/
/*    display: inline-block;*/
/*    line-height:28px;*/
/*    background-color: #fff;*/
/*    color: #ff6700;*/
/*    font-size: 12px;*/
/*    transition: all .4s;*/
/*}*/
/*.btn:hover{*/
/*    background-color: #ff6700;*/
/*    color: #fff;*/
/*}*/
/*.contant p:last-of-type{*/
/*    font-size: 12px;*/
/*    color: #616161;*/
/*    margin-top: 10px;*/
/*}*/
/*.contant p:last-of-type span{*/
/*    position: relative;*/
/*    top:-5px;*/
/*}*/
/*.xb,wx{*/
/*    width: 24px;*/
/*    height: 24px;*/
/*    margin-left: 6px;*/
/*    display: inline-block;*/
/*}*/
/*.wb{*/
/*    background-image: url("../images");*/
/*    background-size: 100%;*/
/*}*/
/*.wb:hover{*/
/*    background-image: url("../images");*/
/*}*/
/*.wx{*/
/*    background-image: url("../images");*/
/*    background-size: 100%;*/
/*}*/
/*.wx:hover{*/
/*    background-image: url("../images");*/
/*}*/
.fixed{
    position: fixed;
    right:0;
    bottom: 70px;
    width: 84px;
    height: 455px;
    background-color: pink;
}
佳美不ERROR
关注
  • 4
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
css、HTML制作小米商城网页（一）
m0_70516782的博客
07-06 1741
制作首页导航栏属性： float:（浮动）display: block;（显示块元素）display: none;（隐藏块元素）margin（外边距） :hover（悬浮变色）border（边框） line-height:（行高） padding（内边距）border-style（边框样式）text-shadow: 1px 1px 1px red(红); 阴影效果 可选值: 水平效果(必填)，垂直效果(必填)，模糊半径(选填)，颜色(选填)代码：
小米官网首页网页制作（不完整）
08-05
小米官网首页网页制作（不完整）
前端 ：用HTML和css制作一个小米官网的静态页面
aisheisadas的博客
10-28 1872
【代码】前端 ：用HTML和css制作一个小米官网的静态页面。
HTML5+CSS3实现小米官网（完整版）
m0_63512120的博客
03-10 7963
纯html+css实现的小米官网，文章结尾附有源代码和图片素材。希望能够帮助到大家！！！
前端---【1】如何制作小米商城【全套】？
最新发布
lxt135744的博客
03-31 1286
本内容用的是vue2以及elementui组件库来制作，内容很详细，只要按照我图片内容敲，
小米商城网页制作（附源码）
才下眉头n.的博客
03-28 1万+
本人学习时所做，源码链接在文末( • ̀ω•́ )✧。 目录 前言 一、介绍 二、首页 1.*轮播图 2.css动画实现秒杀模块 3.小米秒杀模块左侧 4.*侧边栏 5.购物车经过弹出盒子 6.必要模块字体图标 二、商品页面 1.商品分类展示 2.*放大镜 三、注册页面 1.页面展示 2.经过注册小米账号出现彩条 总结 前言 当时学习完html/css/js/jquery后，自己动手做了一个小米官网的静态页面（包括首页、商品详情页、注册页面。当......
网页设计-仿小米商城-前端期末大作业
07-28
网页设计-仿小米商城-前端期末大作业（免积分下载），网页比较完美，详细情况请看我的文章介绍。
网页设计大作业-小米商城
07-26
网页设计大作业-小米商城（免积分下载），详细情况请看我的文章介绍
小米商城（HTML+CSS）网页设计期末作业
01-04
对于学生而言，既满足了期末网页设计的需要，又能在其中查缺补漏，为以后的学习打好坚实的基础和充分的准备；对于已经工作的朋友们而言，这是去往前端开发的必由之路，把前端基础打好，以后学习各种框架，比如node....
大学生静态网页设计期末作业仿照小米商城的官网源码.zip
06-18
大学生静态网页设计期末作业仿照小米商城的官网源码。仿照小米商城的官网编写的主页、登录、注册和购物车功能，只是一些静态网页和一些简单的功能,没有涉及到与后台数据的交互，适合新手来练习web的技术项目 大学生...
HTML+CSS购物网站——小米有品
03-23
HTML+CSS购物网站——小米有品（含首页，购物车，个人信息，登录，商品详细信息，注册页面）
小米官网HTML网页制作项目
04-29
关于小米官网的一个项目,如果说有初学者的话,项目不会做可以参考一下.
小米商城页面
12-17
小米商城页面
仿小米官网(html+js+css)
11-09
学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码
一千行代码实现高仿小米网站(草稿)
08-21
大一程序员一千行代码实现高仿小米网站（草稿），实现了绝大部分的效果
HTML5+CSS3实现小米商城 （完整版）
热门推荐
m0_63512120的博客
07-20 1万+
做了一个小米商场的网页，用HTML5+CSS3做出来的，在文章最后附带 网页所有的源码和图片素材供大家参考。原创不易，大家有任何问题都可在评论区指出。
HTML5+CSS3实现小米商城（课程设计版）
m0_63512120的博客
11-06 3534
这个小米商城用到了html+css+js，内容是今年6月份的。 结构相对简单，比较容易理解。 如果想要纯html+css实现的小米商城，可以看我的这个作品 HTML+CSS实现小米商城 如果需要其他网页作品了，可以看主页其他作品。 HTML+CSS实现华为商城 HTML+CSS实现华为官网 HTML+CSS实现哔哩哔哩首页 HTML+CSS实现小米官网 HTML+CSS实现QQ注册页面 下面先展示一个页面整体结构，然后再分析一下实现代码吧！ 文章末尾附项目源代码！！！ 2.广告块部分 3.右侧固定
HTML+CSS制作小米官网
weixin_45232818的博客
11-08 5105
经过一个星期学习了中国大学MOOC上北京林业大学精品课——《Web前端开发》（对小白来说太友好）。看完之后为了巩固学过的知识点，对着小米官网的布局敲了一遍。本着记录学习的想法发了这篇文章。 以下为小米官网预览图： 这是对着官网写的页面： Html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
小米商城代码html
12-23
小米商城的HTML代码主要涉及到页面的布局和设计，通常由一系列的HTML元素和样式组成。以下是一个简单的示例，展示了一个基本的网页布局： ```html <!DOCTYPE html> <html> <head> <title>小米商城</title> <style> /* 样式表 */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 10px; } nav { background-color: #fff; padding: 10px; } main { padding: 20px; } footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } </style> </head> <body> <header> <h1>欢迎来到小米商城</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">购物车</a></li> <li><a href="#">我的订单</a></li> </ul> </nav> <main> <!-- 主要内容 --> </main> <footer> <p>© 2023 小米商城 版权所有</p> </footer> </body> </html> ``` 这个示例中包含了基本的网页布局元素，包括标题、导航栏、主要内容和页脚。你可以根据实际需求进行修改和扩展。另外，你还可以使用CSS样式来调整页面的外观和布局，包括字体、颜色、间距等。你可以在小米商城的源代码中查找具体的样式表，以便进一步了解和修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

佳美不ERROR

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值