1、源码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .header{

            /*height:38px;*/

            background-color: #333;

        }

        .header .menu{

            float: left;

            color: white;

            /*height: 38px;*/

            /*!*垂直居中*!*/

            /*line-height: 38px;*/

        }

        .header .account{

            float: right;

            color: white;

            /*height: 38px;*/

            /*line-height: 38px;*/

        }

        /*将部件放到容器中，实现居中*/

        .container{

            width: 1000px;

            margin-top: 0;

            margin-left: auto;

            margin-right: auto;

        }

        .header a{

            color:#b0b0b0;

            line-height: 40px;

            display: inline-block;

            /*内部有了高度，外部就不用设置了*/

            font-size: 12px;

            margin-right: 10px;

            text-decoration: none;

        }

        .header a:hover{

            color: white;

        }

        .body{

            margin: 0;

        }

        .sub-header{

          height: 100px;

          /*background-color: #b0b0b0;*/

        }

        .sub-header .ht{

          height: 100px;

        }

        .sub-header .logo{

            width: 234px;

            float:left;

            /*border: 1px solid red;*/

        }

        .sub-header .menu-list{

          float: left;

            line-height: 100px;

            /*border: 1px solid red;*/

        }

        .sub-header .menu-list a{

          display: inline-block;

            padding: 0 10px;

            color: #333333;

            font-size: 16px;

            /*去掉标签的下划线*/

            text-decoration: none;

        }

        /*放上鼠标，改变颜色*/

        .sub-header .menu-list a:hover{

            color:#ff6700;

        }

        .sub-header .search{

          float: right;

        }

        .sub-header .logo a{

            /*图片居中只能使用内外边距*/

            margin-top: 22px;

            display:inline-block;

        }

        .sub-header .logo a img{

            height: 56px;width: 56px

        }

    </style>

</head>

<body >

    <div class = "header">

        <div class="container">

            <div class = "menu">

                <a href="https://www.mi.com/index.html">小米商城</a>

                <a href="https://www.mi.com/index.html">MIUI</a>

                <a href="https://www.mi.com/index.html">云服务</a>

                <div style="width: 200px;text-align: center"></div>

            </div>

            <div class = "account">

                <a href="https://www.mi.com/index.html">登录</a>

                <a href="https://www.mi.com/index.html">注册</a>

            </div>

            <div style="clear: both"></div>

        </div>

    </div>

    <div class="sub-header">

        <div class="container">

            <div class = "ht  logo">

              <!--a标签默认为行内标签，设置高度、边距无效。->变成块级标签 || 块级+行内-->

              <a href="https://www.mi.com/index.html">

                <img src="/static/xiaomi.png">

              </a>

            </div>

            <div class="ht menu-list">

                <a href="https://www.mi.com/index.html" >小米手机</a>

                <a href="https://www.mi.com/index.html">电视</a>

                <a href="https://www.mi.com/index.html">笔记本</a>

            </div>

            <div class = "ht search"></div>

            <div class="clear:both"></div>

        </div>

    </div>

</body>

</html>

2、效果展示



3、小结

html+css:小米顶部菜单+二级菜单的更多相关文章

  1. 个人练习：使用HTML+CSS制作二级菜单

    最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...

  2. 纯css实现鼠标感应弹出二级菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. html和css实现一级菜单和二级菜单学习笔记

    实现一级菜单: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...

  4. css案例学习之ul li dl dt dd实现二级菜单

    效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  5. CSS之实现二级菜单动态出现

    一直觉得二级菜单的出现效果仅仅有js才干控制.今天研究了一下阿里巴巴站点的首页,才发现,原来二级菜单的动态显示也能够使用CSS来控制,原来对CSS是静态的东西一直是误解它了,CSS也能够实现动态的效果 ...

  6. HTML+CSS实现导航栏二级下拉菜单完整代码

    工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  7. CSS制作二级菜单时，二级菜单与一级菜单不对齐

    效果如图: 部分代码如图: <li><a href="#" target="_blank">关于我们</a> <ul& ...

  8. 纯CSS实现带返回顶部右侧悬浮菜单

    这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html> <head> ...

  9. css导航菜单二级显示的问题

    m项目中出现了二级菜单的标签是在导航的里面,用css ul>li:hover ul>li>ul>li 这样子实现不了鼠标经过时导航里二级菜单的显示,这里个人感觉是冲突了.最后通 ...

  10. CSS导航菜单（二级菜单）

    index.html <div class="nav"> <ul> <li> <a href="#">Java& ...

随机推荐

  1. [转帖]top指令如何查询指定用户的所有进程？

    有两种方法. 1.top指令与字符串查询指令通过通道配合查询. 指令:    "-d 5"指的是每五秒刷新一次进程列表,"grep"是字符串查询指令,它可以将含 ...

  2. 使用Grafana监控Nacos的简单过程

    使用Grafana监控Nacos的简单过程 背景 与kafka一样,想同期监控一下nacos. 发现nacos跟minio等一样都有对应的 metrics的暴露接口. 所以这边简单使用一下. stud ...

  3. [转帖]wiki Rust

    Rust[编辑] 维基百科,自由的百科全书       跳到导航跳到搜索   此条目介绍的是由Mozilla主导开发的编程语言.关于"rust"在英文中的本意,请见"铁锈 ...

  4. [转帖]Jmeter跨线程组传参

    https://www.cnblogs.com/a00ium/p/10462576.html   我们知道,同一线程组中可以通过"正则表达式提取器"获取其中一个取样器的响应结果中的 ...

  5. [转帖]JVM-工具-jcmd

    http://events.jianshu.io/p/011f0e3a39ff 一.jcmd 用法 1.1 基本知识 jcmd 是在 JDK1.7 以后,新增了一个命令行工具. jcmd 是一个多功能 ...

  6. VM PowerCli的简单安装和使用学习

    1. Win10 上面安装 下载 zip包并且进行安装 win10 已经带了powershell 安装比较简单, 只不过安装时会提示 powershell的权限有问题需要打开powershell 执行 ...

  7. Systemd设置ulimit的方式与方法

    Systemd设置ulimit的方式与方法 摘要 Linux安装完成之后前面几件事情一般是处理selinux 以及处理ulimit 其实处理文件打开数有多种方法,之前也总结过, 但是最近因为syste ...

  8. 一文详解 Netty 组件

    作者:京东物流 张弓言 一.背景 Netty 是一款优秀的高性能网络框架,内部通过 NIO 的方式来处理网络请求,在高负载下也能可靠和高效地处理 I/O 操作 作为较底层的网络通信框架,其被广泛应用在 ...

  9. js递归根据父级id获取所有的子节点

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. js下拉加载更多-详解

    场景 有些时候,我们在pc端经常会遇见滚动到底部的时候,去加载下一页的数据, 这个时候,我们就需要知道滚动条什么时候触底了, 如果触底了,就去加载下一页的数据; 在触底的过程中,我们需要注意的是,防止 ...