识点写在注释中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>MENU</title>
  6.     <style type="text/css">
  7.         .menu {
  8.             width: 694px;
  9.             height: 50px;
    /*设置元素水平居中*/
  10.             margin: 50px auto 0;
    /*去除内联元素间隙*/
  11.             font-size: 0;
    /*去掉ul自带的.格式*/
  12.             list-style: none;
  13.             padding: 0;
  14.         }
  15.  
  16.         .menu li{
    /*将元素转换为行内块元素*/
  17.             display:inline-block;
  18.             width:98px;
  19.             height:48px;
  20.             border:1px solid gold;
  21.             font-size:16px;
    /*将边框合并*/
  22.             margin-right:-1px;
  23.             text-align:center;
  24.             line-height:48px;
  25.         }
  26.         .menu a{
  27.             font-family: "Microsoft YaHei UI";
  28.             color:pink;
    /*去掉a元素的下划线*/
  29.             text-decoration: none;
  30.         }
    /*鼠标位于元素位置时改变元素样式*/
  31.         .menu li:hover{
  32.             background-color: orange;
  33.         }
  34.  
  35.         .menu a:hover{
  36.             color:#fff;
  37.         }
  38.  
  39.     </style>
  40. </head>
  41. <body>
  42. <ul class="menu">
  43.     <li><a href="">首页</a></li>
  44.     <li><a href="">公司简介</a></li>
  45.     <li><a href="">解决方案</a></li>
  46.     <li><a href="">公司新闻</a></li>
  47.     <li><a href="">行业动态</a></li>
  48.     <li><a href="">招贤纳才</a></li>
  49.     <li><a href="">联系我们</a></li>
  50. </ul>
  51. </body>
  52. </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. SENet（Squeeze-and-Excitation Networks）算法笔记---通过学习的方式来自动获取到每个特征通道的重要程度，然后依照这个重要程度去提升有用的特征并抑制对当前任务用处不大的特征

    Momenta详解ImageNet 2017夺冠架构SENet 转自机器之心专栏 作者:胡杰 本届 CVPR 2017大会上出现了很多值得关注的精彩论文,国内自动驾驶创业公司 Momenta 联合机器 ...

  2. bzoj3312

    K个硬币,要买N个物品. 给定买的顺序,即按顺序必须是一路买过去,当选定买的东西物品序列后,付出钱后,货主是不会找零钱的.现希望买完所需要的东西后,留下的钱越多越好,如果不能完成购买任务,输出-1 $ ...

  3. MySQL 单笔订单满6个及以上产品且金额>=300赠送优惠券_20161103

    活动内容: 单笔订单满6个及以上产品(帽子.浴巾除外),金额满赠300元,即赠送300-10元(除帽子.浴巾外)优惠券一张.需求数据:满足条件的用户ID活动时间:11.2-11.5(4天)活动规则:① ...

  4. php之配置redis

    Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. 配置说明:https://www.cnblogs.com/lucky-man/p/8359110.html ph ...

  5. sum(sum(abs(y))) 中 sum(sum())什么意思?

    >> y=[1 3;2 5] y =      1     3      2     5 >> sum(y) ans =      3     8 >> sum(s ...

  6. Java高并发（1）

    1.同步和异步的区别和联系: 所谓同步,可以理解为在执行完一个函数或方法之后,一直等待系统返回值或消息,这时程序是出于阻塞的,只有接收到 返回的值或消息后才往下执行其它的命令. 异步,执行完函数或方法 ...

  7. NFS资料

      Linux NFS服务器的安装与配置 http://www.cnblogs.com/mchina/archive/2013/01/03/2840040.html Linux NFS服务器的安装与配 ...

  8. 30.构建单机多容器环境-故障&31.构建单机多容器环境

    主要的命令是docker run .主要是用它来构建容器 关机打开序列化 31.构建单机多容器环境 构建自己单机的多容器 加入我们做一个应用程序 -d是在后台运行,不会阻塞你的命令行 之前有一个空的a ...

  9. Hibernate的auto-import属性详解

    auto-import是什么意思呢? 我们经常会写这样一个HQL语句: from User u where u.name='罗灿锋'; 绝大多数时候,这样写是不会发生问题的. hibernate在处理 ...

  10. 关于$_SERVER['PHP_SELF']用法及其安全性---改良

    网站来源:http://www.5idev.com/p-php_server_php_self.shtml PHP 使用 $_SERVER['PHP_SELF'] 获取当前页面地址及其安全性问题 PH ...