识点写在注释中

<!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. codeforces 569C C. Primes or Palindromes?(素数筛+dp)

    题目链接: C. Primes or Palindromes? time limit per test 3 seconds memory limit per test 256 megabytes in ...

  2. AtCoder Grand Contest #026 A - Colorful Slimes 2

    Time Limit: 2 sec / Memory Limit: 1024 MB Score : 200200 points Problem Statement Takahashi lives in ...

  3. ACM学习历程—HDU4720 Naive and Silly Muggles(计算几何）

    Description Three wizards are doing a experiment. To avoid from bothering, a special magic is set ar ...

  4. MySQL 用户管理与权限管理

    MySQL 用户管理与权限管理 -- 操作环境mysql> show variables like 'version';  +---------------+--------+| Variabl ...

  5. VMware vs openStack对比直观优势

    openStack VS VMware直观优势:1.openStack设计架构开放.生态稳定 大型国际巨头公司支持及开发参与,功能版本迭代快,相对的VMware则是封闭的商业化系统.2.基于openS ...

  6. [hdu2586]How far away?(LCA)

    题意:问树上两点之间的最短距离 解题关键:LCA模板题,在线做法,LCA->RMQ,用st表求解 这里是用first,rmq数组长度可以减半. #include<cstdio> #i ...

  7. 《精通Spring4.X企业应用开发实战》读后感第五章（<bean>之间的关系\整合多个配置文件）

  8. iOS内购流程一(协议、税务和银行业务)

    协议.税务和银行业务,这一选项是当你App使用了In-app purchaes时候,你跟苹果签订协议的,需要签订合同和填写你的银行收款等信息 一.填写法人信息 1.登录iTunes Store,点击协 ...

  9. HTML5学习笔记（三）新属性、功能

    HTML5 拖放 1.元素的 draggable 属性设置为 true 2.ondragstart 属性调用函数,函数中dataTransfer.setData() 方法设置被拖数据的数据类型和值 3 ...

  10. LeetCode: 389 Find the Difference(easy)

    题目: Given two strings s and t which consist of only lowercase letters. String t is generated by rand ...