识点写在注释中

<!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. tensorflow实现svm iris二分类——本质上在使用梯度下降法求解线性回归（loss是定制的而已）

    iris二分类 # Linear Support Vector Machine: Soft Margin # ---------------------------------- # # This f ...

  2. openfire插件开发环境

    创建java工程 SamplePlugin: package com.hoo.server.plugin; import java.io.File; import org.jivesoftware.o ...

  3. java异常的原理以及应用

    父类Throwable 两个分支: error:合理的应用程序不应该出现的严重问题,可以无需声明便抛出,比如内存溢出. Exception:程序还能够克服和恢复的问题. 其中又分为系统异常和普通异常. ...

  4. LuoguP1419 寻找段落（二分 单调队列

    题目描述 给定一个长度为n的序列a_i,定义a[i]为第i个元素的价值.现在需要找出序列中最有价值的“段落”.段落的定义是长度在[S,T]之间的连续序列.最有价值段落是指平均值最大的段落, 段落的平均 ...

  5. JS---猜数字（0-100）

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

  6. jsonp实现数据跨域请求

    1.我们知道,哪怕跨域js文件中的代码(当然指符合web脚本安全策略的),web页面也是可以无条件执行的. 远程服务器remoteserver.com根目录下有个remote.js文件代码如下: al ...

  7. 设置Android让EditText不自动获取焦点

    最近在做一个练手项目的时候,因为默认进入的页面有一个EditText控件,每次进入的时候会自动获取焦点弹出软键盘,体验非常不好,后来在网上找到了解决办法:在EditText的父级控件中找到以下属性,设 ...

  8. JavaScript高级程序设计学习笔记第四章--变量、作用域和内存问题

    1.变量可能包含两种不同数据类型的值:基本类型值和引用类型值. 基本类型值指的是简单的数据段,而引用类型值指那些可能由多个值构成的对象. 2.变量复制 如果从一个变量向另一个变量复制基本类型的值,会在 ...

  9. pythonDB api的学习

    有时候需要操作数据库,为了能使用统一的接口访问,我们采用Python DB API,地址为 https://www.python.org/dev/peps/pep-0249/ 全文参考---“疯狂的蚂 ...

  10. select2，利用ajax高效查询大数据列表（可搜索、可分页）

    二.导入css和js到网站上 1.使用CDN,节省自己网站的流量 ? 1 2 <link href="https://cdnjs.cloudflare.com/ajax/libs/se ...