识点写在注释中

<!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. hdu 1002 A + B Problem II（大数）

    题意:就是求a+b (a,b都不超过1000位) 思路:用数组存储 第一道大数的题目,虽然很水,纪念一下! 代码: #include<cstdio> #include<cstring ...

  2. MongoDB 使用经验笔记

    bin下的mongod就是MongoDB的服务端进程,mongo就是其客户端,其它的命令用于MongoDB的其它用途如MongoDB文件导出等 启动方式: 1.直接启动,指定各项参数: /usr/lo ...

  3. 3D Flip

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

  4. Vmware ESXi 6.5 安装手册

    1          安装前准备 1.1          硬件环境准备 无 备注: 本指导书以虚拟光驱.虚拟软驱为例,如使用物理光驱.物理软驱安装系统操作则以实际系统光盘.软盘代替. 1.2     ...

  5. Oracle字段增删改方法总结

    一.修改字段的语法:alter table tablename modify (字段名 类型 [default value][null/not null],….);有一个表名为tb,字段段名为name ...

  6. struts2的使用知识点

    最开始学习java的时候学习过struts,但是对配置和struts的理解深度不够,现在工作虽然再用,但是自己搭建环境和使用心得始终很零散,所以现在决定重新理一遍,有条理的学习一下struts. 至于 ...

  7. CentOS虚拟机通过主机网络上网

    0 环境简介 环境如下: (1)宿主机为WIN7系统,连接内网,同时通过网关服务器上外网: (2)虚拟机为VMWare12下的CentOS7系统. 宿主机通过WIFI方式上外网的配置方法,参考本人另一 ...

  8. 第一章 Git 一览

    虽然这个系列的文章主要关注的是Github,然而首先了解下Git的基本概念和名词也是非常有帮助的. 工作目录(Working Directory) 工作目录是你个人计算机上的一个目录.在该目录下,每一 ...

  9. UnicodeDecodeError: 'ascii' codec can't decode byte 0xe6 in position 0: ordinal not in range(128)

    2017-03-16 11:23:29.601 1238 ERROR nova.compute.manager [instance: 3f195047-250a-4eb5-8da0-63bea6e26 ...

  10. ssh无密码登录设置失败的 解决办法

    因为要安装hadoop所以需要设置ssh无密码登录,SSH的安装就不在这里介绍了: 我的系统是ubuntu15.10,开始按照网上很多的步骤去配置,最后发现登录时还要密码,登录多次也是这样的情况 最后 ...