识点写在注释中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>MENU</title>

    <style type="text/css">

        .menu {

            width: 694px;

            height: 50px;
/*设置元素水平居中*/

            margin: 50px auto 0;
/*去除内联元素间隙*/

            font-size: 0;
/*去掉ul自带的.格式*/

            list-style: none;

            padding: 0;

        }

        .menu li{
/*将元素转换为行内块元素*/

            display:inline-block;

            width:98px;

            height:48px;

            border:1px solid gold;

            font-size:16px;
/*将边框合并*/

            margin-right:-1px;

            text-align:center;

            line-height:48px;

        }

        .menu a{

            font-family: "Microsoft YaHei UI";

            color:pink;
/*去掉a元素的下划线*/

            text-decoration: none;

        }
/*鼠标位于元素位置时改变元素样式*/

        .menu li:hover{

            background-color: orange;

        }

        .menu a:hover{

            color:#fff;

        }

    </style>

</head>

<body>

<ul class="menu">

    <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>

</body>

</html>

效果图：

HTML——制作一个简易菜单栏的更多相关文章

  1. 用XMLHttpRequest制作一个简易ajax

    概述 jquery退出历史舞台之后,我们怎么来发送ajax请求呢?可以用相关的库,也可以自己制作一个简易的ajax. 需要说明的是,我们使用的是XMLHttpRequest 2,它几乎兼容所有主流浏览 ...

  2. 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具

    查看本章节 查看作业目录 需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具 实现思路: 使用history对象中的 forward() 方法和 ...

  3. iOS:制作一个简易的计算器

    初步接触视图,制作了一个简易的计算器,基本上简单的计算是没有问题的,不是很完美,可能还有一些bug,再接再厉. // // ViewController.m // 计算器 // // Created ...

  4. 使用Windows Form 制作一个简易资源管理器

    自制一个简易资源管理器----TreeView控件 第一步.新建project,进行基本设置:(Set as StartUp Project:View/Toolbox/TreeView) 第二步.开始 ...

  5. Opencv探索之路（二十）：制作一个简易手动图像配准工具

    近日在做基于sift特征点的图像配准时遇到匹配失败的情况,失败的原因在于两幅图像分辨率相差有点大,而且这两幅图是不同时间段的同一场景的图片,所以基于sift点的匹配已经找不到匹配点了.然后老师叫我尝试 ...

  6. 使用jQuery制作一个简易的购物车结算流程

    因为今天下午时候在网上买了东西,在结算界面的时候突发奇想的也想自己动手做一个结算界面,当然了,只是一个最简易的结算界面,有商品数量的加减,有单价和小计,单个多个删除,全选和区县全选等等一些小功能,我在 ...

  7. 制作一个简易计算器——基于Android Studio实现

    一个计算器Android程序的源码部分分为主干和细节两部分. 一.主干 1. 主干的构成 计算器的布局 事件(即计算器上的按钮.文本框)监听 实现计算 2. 详细解释 假设我们的项目名为Calcula ...

  8. 通过JS制作一个简易数码时钟

    设计思路: 数码时钟即通过图片数字来显示当前时间,需要显示的图片的URL根据时间变化而变化. a.获取当前时间Date()并将当前时间信息转换为一个6位的字符串; b.根据时间字符串每个位置对应的数字 ...

  9. VC++ 制作一个简易的控制台时钟应用

    1.下载EasyX Library for C++ (http://www.easyx.cn/) 直接下载:EasyX_20151015(beta) EasyX 绘图库目前支持 Visual C++ ...

随机推荐

  1. Elasticsearch mapping文档相似性算法

    Elasticsearch allows you to configure a scoring algorithm or similarity per field. The similarityset ...

  2. openfire调试环境

    导入工程: File->New->project: 选择“Java project from existing ant buildfile” 再从菜单windows->show vi ...

  3. BZOJ_5359_[Lydsy1805月赛]寻宝游戏_DP

    BZOJ5359_[Lydsy1805月赛]寻宝游戏_DP Description begin.lydsy.com/JudgeOnline/upload/201805.pdf 我们需要找到一条权值最大 ...

  4. Xshell 主机和远程机之间的文件传输

    (1)宿主机传输文件到远程机 方法1:直接拖动文件至xshell远程机命令行界面 方法2:远程机命令行输入rz打开文件选择框 (2)远程机传输文件到宿主机 远程机命令行界面上输入sz xxx.txt( ...

  5. javacpp-FFmpeg系列之3： 像素图像数据转换（BGR与BufferdImage互转，RGB与BufferdImage互转，BufferdImage转Base64编码）

    javacpp-ffmpeg系列: javacpp-FFmpeg系列之1:视频拉流解码成YUVJ420P,并保存为jpg图片 javacpp-FFmpeg系列之2:通用拉流解码器,支持视频拉流解码并转 ...

  6. 基于STM32的uCGUI移植和优化

    基于STM32的uCGUI移植和优化 首先在开始这个说明之前,要简要说明下具体的环境: 编译工具:MDK4.20 开发板:安富莱v2版开发板 调试器:JLink  v8盗版 移植篇 相信大家有移植经验 ...

  7. The current .NET SDK does not support targeting .NET Core 2.2

    The current .NET SDK does not support targeting .NET Core 2.2 1. 奇怪的错误 最近遇到了一件奇怪的事, The current .NET ...

  8. Poj_1011_Sticks(剪枝)

    一.Description 乔治拿来一组等长的木棒,将它们随机地砍断,使得每一节木棍的长度都不超过50个长度单位.然后他又想把这些木棍恢复到为裁截前的状态,但忘记了初始时有多少木棒以及木棒的初始长度. ...

  9. Windows下Anaconda安装 python + tensorflow

    下载安装Anaconda 首先下载Anaconda,可以从清华大学的镜像网站进行下载. 安装Anaconda,注意安装时不要将添加环境变量的选项取消掉. 安装完成之后,在安装目录下cmd,输入 con ...

  10. POCO库中文编程参考指南（10）如何使用TCPServer框架？

    1 TCPServer 框架概述 POCO 库提供TCPServer框架,用以搭建自定义的 TCP 服务器.TCPServer维护一个连接队列.一个连接线程池.连接线程用于处理连接,连接线程只要一空闲 ...