仿小米下拉导航

最新推荐文章于 2022-09-01 15:36:43 发布
最新推荐文章于 2022-09-01 15:36:43 发布
阅读量932 收藏 7
点赞数 3
分类专栏： html+css案例 文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43285360/article/details/123946090
版权

对于这一部分大致分为三个区域：左侧的logo区域、导航区域、右侧的搜索区域

左侧的 logo 区域就是两张图片

左侧的导航区域主要用ul li实现，这里需要注意的是第一个li里放的是一张动图

右侧的搜索区域就是一个input标签以及button按钮，还有就是模拟当鼠标点击到搜索框后会弹出一个搜索历史

其基本机构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="white-nav">
        <div class="wrap">
            <!-- 左侧logo区域 -->
            <div class="logo">
                <img class="mi-home" src="images/mi-home.png" alt="">
                <img class="mi-logo" src="images/mi-logo.png" alt="">
            </div>
            <!-- 左侧导航区域 -->
            <div class="nav-bar">
                <ul>
                    <li>
                        <a href="">
                            <img src="images/f58837161090e2e04bf687088b2ffe77.gif" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">小米手机</a>
                    </li>
                    <li>
                        <a href="#">Redmi 红米</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>
                </ul>
            </div>
            <!-- 右侧搜索区域 -->
            <div class="search">
                <input type="text" placeholder="元宇宙">
                <button class="iconfont">&#xe63d;</button>
            </div>
        </div>
    </div>
</body>
</html>
* {
    margin: 0;
    padding: 0;
}

ul,li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #000;
}

.wrap {
    width: 1226px;
    margin: 0 auto;
    text-align: center;
}

接下来就是去设置相应的样式

.white-nav {
    width: 100%;
    height: 100px;
    background: #fff;
    position: relative;
}

logo区域：

当鼠标移动到logo上时默认的 mi logo就会被向右给寄过去，然后最开始隐藏的那个 logo 此时显示从左侧向右出现

/* logo区域 */
.logo {
    width: 55px;
    height: 55px;
    background: #ff6700;
    float: left;
    margin-top: 22.5px;
    /* 这里默认有两张图片，当鼠标移动到logo区域时
    实现图标的滑动切换，但是默认情况下只显示一张
    隐藏这里利用overflow:hidden;进行隐藏 */
    overflow: hidden;
    /* logo区域的图片相对于logo定位 */
    position: relative;
}

.logo>img {
    width: 100%;
    height: 100%;
    /* 通过绝对定位来调整图片的位置 */
    position: absolute;
    top: 0;
    transition: all .2s;
}

.mi-home {
    left: -55px;
}

.mi-logo {
    left: 0;
}

.logo:hover>.mi-home {
    left: 0;
}

.logo:hover>.mi-logo {
    left: 55px;
}

 

接下来实现左侧的导航样式：

左侧导航整体向左浮动

右侧搜索区域整体向右浮动

左侧导航整体浮动后，其里面的li也应该向左浮动，这样才会在一行内显示

当鼠标移动到左侧导航的li标签上时字体颜色会变

/* 导航样式 */
.nav-bar {
    width: 875px;
    height: 100px;
    line-height: 100px;
    float: left;
}

.nav-bar li {
    float: left;
}

.nav-bar>ul>li>a {
    color: #333;
    padding: 0px 10px;
}

.nav-bar>ul>li>a:hover {
    color: #ff6700;
}

.nav-bar>ul>li:first-child img {
    margin-top: 22.5px;
}

 

右侧搜索区域：

对于这一部分的话主要就是样式的设置，需要注意的是可能会出现搜索框和按钮对不齐的情况：

 解决的方法就是在 input 搜索框样式里加上：vertical-align: top; 即可解决

/* 搜索区域 */
.search {
    float: right;
    width: 296px;
    height: 100px;
    line-height: 100px;
}

.search input {
    width: 244px;
    height: 50px;
    border: 1px solid #e0e0e0;
    margin-top: 25px;

    /* 去除选中的边框 */
    outline: none;

    padding: 0 10px;

    /* 由于设置了内边距，那么原先的宽高就会被撑大
    为了防止这种情况，需要将其设置为怪异盒模型 */
    box-sizing: border-box;

    border-right: 0;

    /* 解决搜索框和button对不齐的问题 */
    vertical-align: top;
}

.search button {
    width: 52px;
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    float: right;
    margin-top: 25px;
}

.search button:hover {
    background-color: #ff6700;
    color: #fff;
}

 


下拉菜单区域：

对于这一部分其实就是直接在左侧导航部分的li下面直接加上二级下来菜单的相应内容，然后利用定位来实现

 二级下拉菜单li里面主要就顶部的图片、底部的手机名称以及手机价格

这里需要注意的是二级下拉菜单的定位（nav-bar-list）是相对于最层的父级（nav-bar）来进行决定定位的，这样才是100%全屏撑开，否则就不是

默认二级下来菜单是不显示的，只有当我们鼠标滑动到li标签上时，才会显示对应的二级下拉菜单

 对于右侧的竖线的实现其实就是给包含手机图片的容器设置它的右边框即可，需要注意的是最后一个的右边框没有

                    <li>
                        <a href="#">小米手机</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/phone1.jpg" alt="">
                                            </div>
                                            <p class="name1">小米10</p>
                                            <p class="price1">3999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/phone2.jpg" alt="">
                                            </div>
                                            <p class="name1">小米Note9</p>
                                            <p class="price1">2999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/phone3.jpg" alt="">
                                            </div>
                                            <p class="name1">小米R</p>
                                            <p class="price1">4299元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/phone4.jpg" alt="">
                                            </div>
                                            <p class="name1">小米10至尊纪念版</p>
                                            <p class="price1">5299元起</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
/* 二级菜单区域 */
.nav-bar-list {
    width: 100%;
    height: 229px;
    background-color: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 3px 4px rgba(0,0,0,.1);

    /* 相对于最外层的父元素也就是 nav-bar 
    来定位，这样才能 100% 全屏撑开 */
    position: absolute;
    left: 0;
    top: 100px;
    display: none;
}

/* 当鼠标滑动到li标签上时，显示对应的二级下拉菜单 */
.nav-bar li:hover .nav-bar-list {
    display: block  ;
}

.nav-bar-list .img-box {
    width: 100%;
    height: 110px;
    margin-top: 35px;

    /* 实现每个商品右侧的分割线 */
    border-right: 1px solid #eee;

    /* 变为怪异盒模型 */
    box-sizing: border-box;

    margin-bottom: 16px;
}

.img-box img {
    transition: all .3s;
}

.img-box img:hover {
    transform: translateY(-5px) scale(1.1);
}

.nav-bar-list li:last-child .img-box{
    border-right: 0;
}

.nav-bar-list p {
    font-size: 12px;
    line-height: 20px;
}

.nav-bar-list .name1 {
    color: #333;
}

.nav-bar-list .price1 {
    color: #ff6700;
}

源码：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="white-nav">
        <div class="wrap">
            <!-- 左侧logo区域 -->
            <div class="logo">
                <img class="mi-home" src="images/mi-home.png" alt="">
                <img class="mi-logo" src="images/mi-logo.png" alt="">
            </div>
            <!-- 左侧导航区域 -->
            <div class="nav-bar">
                <ul>
                    <li>
                        <a href="">
                            <img src="images/f58837161090e2e04bf687088b2ffe77.gif" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">小米手机</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/phone1.jpg" alt="">
                                            </div>
                                            <p class="name1">小米10</p>
                                            <p class="price1">3999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/phone2.jpg" alt="">
                                            </div>
                                            <p class="name1">小米Note9</p>
                                            <p class="price1">2999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/phone3.jpg" alt="">
                                            </div>
                                            <p class="name1">小米R</p>
                                            <p class="price1">4299元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/phone4.jpg" alt="">
                                            </div>
                                            <p class="name1">小米10至尊纪念版</p>
                                            <p class="price1">5299元起</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="img-box">
                                                <img width="160" height="110px" src="images/h-phone1.jpg" alt="">
                                            </div>
                                            <p class="name1">K40Pro</p>
                                            <p class="price1">5299元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/phone1.jpg" alt="">
                                            </div>
                                            <p class="name1">小米10</p>
                                            <p class="price1">3999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/phone2.jpg" alt="">
                                            </div>
                                            <p class="name1">小米Note9</p>
                                            <p class="price1">2999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/phone3.jpg" alt="">
                                            </div>
                                            <p class="name1">小米R</p>
                                            <p class="price1">4299元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/phone4.jpg" alt="">
                                            </div>
                                            <p class="name1">小米10至尊纪念版</p>
                                            <p class="price1">5299元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/phone3.jpg" alt="">
                                            </div>
                                            <p class="name1">小米R</p>
                                            <p class="price1">4299元起</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="#">笔记本</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/notebook1.jpg" alt="">
                                            </div>
                                            <p class="name1">RedmiBook Pro 14</p>
                                            <p class="price1">4699元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/notebook2.jpg" alt="">
                                            </div>
                                            <p class="name1">RedmiBook Pro 14</p>
                                            <p class="price1">4999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/notebook3.jpg" alt="">
                                            </div>
                                            <p class="name1">Redmi G 游戏本</p>
                                            <p class="price1">5299元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/notebook4.jpg" alt="">
                                            </div>
                                            <p class="name1">RedmiBook 16</p>
                                            <p class="price1">4699元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/notebook5.jpg" alt="">
                                            </div>
                                            <p class="name1">RedmiBook Air 13</p>
                                            <p class="price1">4499元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/notebook6.jpg" alt="">
                                            </div>
                                            <p class="name1">曲面显示器 34英寸</p>
                                            <p class="price1">2399元起</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="#">家电</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/jiadian1.jpg" alt="">
                                            </div>
                                            <p class="name1">米家风冷对开门冰箱 483L</p>
                                            <p class="price1">2399元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/jiadian2.jpg" alt="">
                                            </div>
                                            <p class="name1">米家扫拖机器人1T</p>
                                            <p class="price1">1999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/jiadian3.jpg" alt="">
                                            </div>
                                            <p class="name1">米家互联网洗烘一体机</p>
                                            <p class="price1">1899元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/jiadian4.jpg" alt="">
                                            </div>
                                            <p class="name1">小米净水器S1 800G</p>
                                            <p class="price1">2798元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/jiadian5.jpg" alt="">
                                            </div>
                                            <p class="name1">米家空气净化器3 高效除菌</p>
                                            <p class="price1">899元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/jiadian6.jpg" alt="">
                                            </div>
                                            <p class="name1">米家两门冰箱 160L</p>
                                            <p class="price1">949元起</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="#">路由器</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/luyouqi1.jpg" alt="">
                                            </div>
                                            <p class="name1">小米路由器AX6000</p>
                                            <p class="price1">599元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/luyouqi2.jpg" alt="">
                                            </div>
                                            <p class="name1">Redmi路由器 AX6</p>
                                            <p class="price1">349元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/luyouqi3.jpg" alt="">
                                            </div>
                                            <p class="name1">Redmi路由器 AX5</p>
                                            <p class="price1">249元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/luyouqi4.jpg" alt="">
                                            </div>
                                            <p class="name1">小米路由器 AX1800</p>
                                            <p class="price1">329元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/luyouqi5.jpg" alt="">
                                            </div>
                                            <p class="name1">小米AIoT路由器 AX3600</p>
                                            <p class="price1">499元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/luyouqi6.jpg" alt="">
                                            </div>
                                            <p class="name1">Redmi路由器AC2100</p>
                                            <p class="price1">159元起</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="#">智能硬件</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/znyj1.jpg" alt="">
                                            </div>
                                            <p class="name1">小米全自动智能门锁</p>
                                            <p class="price1">1699元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/znyj2.jpg" alt="">
                                            </div>
                                            <p class="name1">Redmi小爱触屏音箱Pro 8</p>
                                            <p class="price1">499元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/znyj3.jpg" alt="">
                                            </div>
                                            <p class="name1">小爱触屏音箱</p>
                                            <p class="price1">199元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/znyj4.jpg" alt="">
                                            </div>
                                            <p class="name1">Redmi小爱音箱 Play</p>
                                            <p class="price1">89元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img width="160" height="110px" src="images/znyj5.jpg" alt="">
                                            </div>
                                            <p class="name1">查看全部</p>
                                            <p class="price1">智能硬件</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="#">服务</a>
                    </li>
                    <li>
                        <a href="#">社区</a>
                    </li>
                </ul>
            </div>
            <!-- 右侧搜索区域 -->
            <div class="search">
                <input type="text" placeholder="元宇宙">
                <button class="iconfont">&#xe63d;</button>
            </div>
        </div>
    </div>
</body>
</html>
* {
    margin: 0;
    padding: 0;
}

ul,li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #000;
}

.wrap {
    width: 1226px;
    margin: 0 auto;
    text-align: center;
}

.white-nav {
    width: 100%;
    height: 100px;
    background: #fff;
    position: relative;
}

/* logo区域 */
.logo {
    width: 55px;
    height: 55px;
    background: #ff6700;
    float: left;
    margin-top: 22.5px;
    /* 这里默认有两张图片，当鼠标移动到logo区域时
    实现图标的滑动切换，但是默认情况下只显示一张
    隐藏这里利用overflow:hidden;进行隐藏 */
    overflow: hidden;
    /* logo区域的图片相对于logo定位 */
    position: relative;
}

.logo>img {
    width: 100%;
    height: 100%;
    /* 通过绝对定位来调整图片的位置 */
    position: absolute;
    top: 0;
    transition: all .2s;
}

.mi-home {
    left: -55px;
}

.mi-logo {
    left: 0;
}

.logo:hover>.mi-home {
    left: 0;
}

.logo:hover>.mi-logo {
    left: 55px;
}

/* 导航样式 */
.nav-bar {
    width: 875px;
    height: 100px;
    line-height: 100px;
    float: left;
}

.nav-bar li {
    float: left;
}

.nav-bar>ul>li>a {
    color: #333;
    padding: 0px 10px;
}

.nav-bar>ul>li>a:hover {
    color: #ff6700;
}

.nav-bar>ul>li:first-child img {
    margin-top: 22.5px;
}

/* 二级菜单区域 */
.nav-bar-list {
    width: 100%;
    height: 229px;
    background-color: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 3px 4px rgba(0,0,0,.1);

    /* 相对于最外层的父元素也就是 nav-bar 
    来定位，这样才能 100% 全屏撑开 */
    position: absolute;
    left: 0;
    top: 100px;
    display: none;
}

/* 当鼠标滑动到li标签上时，显示对应的二级下拉菜单 */
.nav-bar li:hover .nav-bar-list {
    display: block  ;
}

.nav-bar-list .img-box {
    width: 100%;
    height: 110px;
    margin-top: 35px;

    /* 实现每个商品右侧的分割线 */
    border-right: 1px solid #eee;

    /* 变为怪异盒模型 */
    box-sizing: border-box;

    margin-bottom: 16px;
}

.img-box img {
    transition: all .3s;
}

.img-box img:hover {
    transform: translateY(-5px) scale(1.1);
}

.nav-bar-list li:last-child .img-box{
    border-right: 0;
}

.nav-bar-list p {
    font-size: 12px;
    line-height: 20px;
}

.nav-bar-list .name1 {
    color: #333;
}

.nav-bar-list .price1 {
    color: #ff6700;
}

/* 搜索区域 */
.search {
    float: right;
    width: 296px;
    height: 100px;
    line-height: 100px;
}

.search input {
    width: 244px;
    height: 50px;
    border: 1px solid #e0e0e0;
    margin-top: 25px;

    /* 去除选中的边框 */
    outline: none;

    padding: 0 10px;

    /* 由于设置了内边距，那么原先的宽高就会被撑大
    为了防止这种情况，需要将其设置为怪异盒模型 */
    box-sizing: border-box;

    border-right: 0;

    /* 解决搜索框和button对不齐的问题 */
    vertical-align: top;
}

.search button {
    width: 52px;
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    float: right;
    margin-top: 25px;
}

.search button:hover {
    background-color: #ff6700;
    color: #fff;
}

小白小白从不日白
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css3仿小米官网导航下拉菜单代码
06-05
一款黑色风格的仿小米官方网站css3导航下拉菜单代码，简洁实用的css3下拉导航菜单网页特效。
H5C3练习心得 12.17（小米商城下拉二级菜单）--hover,display
最新发布
yaoya_yaoya的博客
12-17 541
然后当鼠标悬停在li上的时候,div设置成display:block;大家有什么不懂可以在评论区问我，或者我的代码有什么值得改进的地方，欢迎大家给我更好的建议。鼠标悬停在A元素时，改变A的指定兄弟元素B的样式（AB可以不相邻，但B必须在A之后）然后，当鼠标悬停在下拉菜单所在的元素上时，我们使用。鼠标悬停在A元素时，改变与A相邻的兄弟元素B元素的样式（B必须与A相邻）以下是我做小米商城下拉二级菜单的代码，大家有需要的可以运行运行，琢磨琢磨。鼠标悬停在A元素时,改变A元素的子元素B元素的样式。
CSS——下拉框的制作（以小米商城为例）
Bonsoir777的博客
07-08 3335
本文主要介绍了下拉框的实现过程（以小米商城为例），以及display:none和visibiliy：hidden的区别。
小米商城侧导航栏的实现（导航栏的制作）
weixin_65607135的博客
09-01 4072
我的想法是将下拉框写在列表里面，然后给下拉框绝对定位，给ul相对定位，因为我没有给li设置相对定位，那么下拉框的参照物就是相对定位了的ul，把下拉框的位置定好，然后实现鼠标移入下拉框出现，鼠标移出下拉框消失的问题。侧导航栏在我们写的时候很常用，很多网站上面都有侧边导航栏的应用，那么如何制作侧边导航栏呢？我们实现的思路是先制作一个列表，设置列表的样式，然后在列表里面完成我们需要的内容。下面看一看我制作的小米商城的侧导航栏。所涉及到的知识点有定位和格式化文档。css代码段如上所示。...
实训-利用HTML+CSS制作某米官网首页
m0_64336780的博客
04-08 9182
目录 项目介绍 需求分析 页面布局及样式实现 1.引入css文件及初始化 2.实现顶部广告 3.黑色导航栏 4.白色导航 5.banner 6.广告 7.手机 8.家电 9.视频 10.页脚 11.icon 网页总体效果图 总结 源码 项目介绍 学习HTML和CSS有一段时间了，笔者做了一个相对练习而言较为复杂的网页，某米的官网首页，上一下最终效果图： 这个网页相对来说还是比较有练习意义的，包含导航栏，大量的浮动和弹性布局以及一些细小却重要的知识点...
css3仿小米官网导航下拉菜单代码.zip
07-11
CSS3仿小米官网导航下拉菜单代码是一个实现此类交互效果的示例，它结合了JavaScript（JS）和层叠样式表（CSS3）技术，旨在为用户提供与小米官网相似的下拉菜单体验。 首先，我们需要理解CSS3在其中的角色。CSS3是...
仿小米网站
08-27
【仿小米网站】项目概述 本项目旨在模拟创建一个与小米官网类似的功能完善的网页平台，旨在帮助学习者理解和掌握前端开发技术，同时提供一个实践平台，以提升网站设计与用户体验优化的能力。虽然该项目在某些方面...
小米官网_前端实现仿小米官网_
10-02
在仿制小米官网时，我们需要用到如`<header>`（页眉）、`<nav>`（导航）、`<main>`（主要内容）、`<section>`（分段）、`<article>`（文章）、`<aside>`（侧边栏）、`<footer>`（页脚）等元素来组织页面布局。...
小米官网导航栏代码实现
01-30
小米官网 导航栏 HTML页面
Android 仿小米桌面悬浮菜单.rar
07-16
Android 仿小米桌面悬浮菜单仿小米的桌面悬浮菜单做了一个悬浮菜单, 测试机是小米Max;
android仿百度搜索条,仿MIUI v5自带浏览器搜索条风格
12-16
最近有个项目，发现MIUI v5自带浏览器的百度搜索条效果不错，想模仿写一个，但总是不像，网上找了好多资料都不太对，花了一下午的时间好好研究了一番。 demo代码量非常精简，模块化设计，移植方便，适合新手学习。 demo简介，这个demo的入口是MainActivity，search bar是用widget组件的形式动态加载的，联网用android-support-v4.jar包，解析百度返回的json用了android-async-http-1.4.3.jar包，这个不固定死，大家见仁见智。别忘了AndroidManifest.xml加入联网权限<uses-permission android:name="android.permission.INTERNET" />。搜索之后使用intent跳转，当然也可以用android自带的webview组件实现。 不足的地方是没有动态的显示/隐藏效果，看起来比较生硬，跟原版效果的有一定的差距。 希望对大家有所帮助，UI设计方面大家一起进步！
前端实现小米官网导航栏的实现 主要通过HTML+CSS完成效果有下拉列表和一个固定定位，中间色块用来辨识固定定位，效果更加明显
小杨的博客
07-01 1698
话不多说直接上代码效果有下拉列表和一个固定定位，中间色块用来辨识固定定位，效果更加明显 需要图片请私信哦
仿写小米网站首页 产品导航栏
qq_45234177的博客
05-29 1178
说明： 1.由于本人只学习了部分html和css，所以本文没有涉及到js部分。 2.本文并没有实现小米官网首页的全部功能，还存在很多问题。如果以后技能提升，会继续更新实现未完成的功能。 3.这个练习会为分几篇文章介绍从最初分析到最后实现的代码，如果发现问题或者有更好的方法请联系本人探讨更正。 4.总体框架分析见博客 《仿写小米官网 简单的HTML+CSS练习》 目标：仿写小米官网的顶部导航栏： 初步HTML元素分析： 观察可知，与顶部导航栏部分类似，整体结构为一个整个的块，使用一个div元素
Android 炫酷的流式布局 仿小米搜索
weishl110的博客
07-20 1179
Android 流式布局 仿小米搜索弹出的流式布局
小米官网竖直导航栏html,小米官网css3导航菜单代码_html/css_WEB-ITnose
weixin_39600837的博客
06-03 990
小米官网css3导航菜单代码。这是一款黑色风格的小米官方网站css3导航下拉菜单代码。效果图如下：在线预览 源码下载实现的代码。html代码：css代码：* { margin: 0px; padding: 0px; } .nav { position: relative; w...
仿小米首页中的导航页
qq_47997447的博客
10-05 104
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0px; padding: 0px; } a { text-decoration: none; color: #616161; .
小米商城主页面的实现（HTML+CSS）
热门推荐
weixin_45045828的博客
07-26 1万+
c语言谭浩强课后题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mark
jQuery仿腾讯云滑动下拉导航菜单效果代码
05-13
以下是一个简单的jQuery代码，可以实现类似腾讯云的滑动下拉导航菜单效果： HTML代码： ```html <div class="dropdown"> <button class="dropbtn">菜单</button> <div class="dropdown-content"> <a href="#">链接1</a> <a href="#">链接2</a> <a href="#">链接3</a> </div> </div> ``` CSS样式： ```css .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; z-index: 1; } .dropdown-content a { display: block; text-align: left; } .dropdown:hover .dropdown-content { display: block; } .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover { background-color: #3e8e41; } ``` jQuery代码： ```javascript $(document).ready(function() { $(".dropdown").hover(function() { $(this).children(".dropdown-content").slideDown("fast"); }, function() { $(this).children(".dropdown-content").slideUp("fast"); }); }); ``` 代码解释： - 首先，在HTML中创建一个包含菜单按钮和下拉内容的元素。 - 用CSS样式设置菜单按钮和下拉内容的样式。 - 使用jQuery代码设置当鼠标悬停在菜单按钮上时，下拉内容被显示出来。当鼠标移开时，下拉内容又被隐藏起来。具体实现是通过jQuery的`hover()`方法来完成的，方法的第一个参数是当鼠标进入时要执行的函数，第二个参数是当鼠标移出时要执行的函数。在这里，我们使用`slideDown()`和`slideUp()`方法来实现下拉和隐藏的效果，其中`"fast"`表示动画的速度，也可以使用其他值或者自定义速度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小白小白从不日白

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

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

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

打赏作者

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

抵扣说明：

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

余额充值