识点写在注释中

<!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. 树莓派与 Python —— GPIO

    首先来直观地认识树莓派提供的 40 个引脚(GPIO,general purpose i/o,接收外界输入,并向外界提供运算处理后的输出): 1. 安装 从远程库(repositories)中下载安装 ...

  2. 小心transform

    张老师总结的,感谢! <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. 「BZOJ2721」「LuoguP1445」 [Violet]樱花（数论

    题目背景 我很愤怒 题目描述 求方程 $\frac{1}{x}+\frac{1}{y}=\frac{1}{N!}$ 的正整数解的组数,其中$N≤10^6$. 解的组数,应模$1e9+7$. 输入输出格 ...

  4. Python 中的 classmethod 和 staticmethod 有什么具体用途？

    作者:李保银链接:https://www.zhihu.com/question/20021164/answer/18224953来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  5. openStack高可用性和灾备方案

    1. 基础知识 1.1 高可用 (High Availability,简称 HA) 高可用性是指提供在本地系统单个组件故障情况下,能继续访问应用的能力,无论这个故障是业务流程.物理设施.IT软/硬件的 ...

  6. WPF系列学习之三（路由事件）

    路由事件实际上以一上 列三种方式出现.    1.与普通的.net事件类似的直接路由事件.它们起源于一个元素,并且不传递给其他元素.例如:MouseEnter事件.    2.在包含层次中向上传递的冒 ...

  7. （一）新建一个javaweb项目

    一.为了不影响其他项目,可以重新选择一个新的工作目录:swith workspace 二.为了尽可能统一项目,所使用的编程环境,包括:Tomcat.JRE都是项目组自己的,所以在新建项目的时候要注意选 ...

  8. SLAM细碎内容积累_来自各种技术交流群_持续更新

    imu标定 工具包:imu_utils,   imu_tk,   kalibr 用kalibr做标定,相机和imu的采样频率要求:相机20,imu100.kalibr也可以做鱼眼相机+imu的联合标定 ...

  9. 10. windows下原来可以这样隐藏webshell

    1.利用保留字隐藏 windows系统有些保留文件夹名,windows系统不允许用这些名字命名文件夹,如 aux|prn|con|nul|com1|com2|com3|com4|com5|com6|c ...

  10. UVaLive 4254 Processor (二分+优先队列)

    题意:有n个任务,每个任务有三个参数,r,d,w,表示该任务必须在[r,d]之间执行,工作量是w,处理器执行速度可以变化,当执行速度是s的时候, 一个工作量是w的任务需要需要的执行时间是w/s个工作单 ...