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. [转帖]shell编程：变量知识进阶（三）

    https://www.cnblogs.com/luoahong/articles/9154309.html 1 Shell特殊位置变量 范例1:$n的实践例子 1 2 3 4 5 6 7 8 9 1 ...

  2. [转帖]可直接拿来用的kafka+prometheus+grafana监控告警配置

    kafka配置jmx_exporter 点击:https://github.com/prometheus/jmx_exporter,选择下面的jar包下载: 将下载好的这个agent jar包上传到k ...

  3. [转帖]TiDB 统计数据库占用大小的N种方法

    TiDB之路2022-03-06 3896 前言 TiDB 如何统计数据库占用空间大小 四种方法 方法一 TiDB 统计数据库占用大小的第一种方法是监控.通过查看 {cluster-name} - O ...

  4. [转帖]通过拓扑 label 进行副本调度

    https://docs.pingcap.com/zh/tidb/stable/schedule-replicas-by-topology-labels#%E5%9F%BA%E4%BA%8E%E6%8 ...

  5. [转帖]FIO 存储性能压测

    一. FIO简介 FIO 是一个多线程IO生成工具,可以生成多种IO模式(随机.顺序.读.写四大类),用来测试磁盘设备的性能.GFIO是FIO的图形监测工具,它提供了图形界面的参数配置,和性能监测图像 ...

  6. 【转帖】nginx变量使用方法详解-3

    https://www.diewufeiyang.com/post/577.html 也有一些内建变量是支持改写的,其中一个例子是 $args. 这个变量在读取时返回当前请求的 URL 参数串(即请求 ...

  7. [转帖]diskspd的使用

    https://www.cnblogs.com/tcicy/p/10005374.html 参数翻译 可测试目标: file_path 文件abc.file #<physical drive n ...

  8. 4G5G和上网带宽与下载速度的换算方法

    前言 2020年5G越来越火热,而且运营商多次推出免费宽带升级,免费升级到100M,20M升级50M等等.很多人疑惑我们平时 的下载速度也就几百K或者有时候能上1M,但是就算升级到10M的宽带,也从来 ...

  9. 解决SystemExit: 2，args = parser.parse_args() 的问题，

    报错: File "/home/barry/PycharmProjects/EEPC/detect.py", line 283, in parse_opt opt = parser ...

  10. PaddleNLP通用信息抽取技术UIE【一】产业应用实例：信息抽取{实体关系抽取、中文分词、精准实体标。情感分析等}、文本纠错、问答系统、闲聊机器人、定制训练

    相关文章: 1.快递单中抽取关键信息[一]----基于BiGRU+CR+预训练的词向量优化 2.快递单信息抽取[二]基于ERNIE1.0至ErnieGram + CRF预训练模型 3.快递单信息抽取[ ...