代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>元素类型转换</title>

    <style type="text/css">

        .menu{

            width:694px;

            height:50px;

            /*background-color:cyan;*/

            margin:50px auto;  /* 居中显示 */

            font-size:0;  /* 清除间隙 */

        }

        .menu a{

            width:98px;

            height:48px;

            background-color:#fff;

            display:inline-block;  /* 转换为内联块元素 */

            border:1px solid gold;  /* 设置边框 */

            font-size:16px;      /* 清除间隙 */

            margin-left:-1px;    /* 合并左边框 */

            text-align:center;   /* 水平居中 */

            line-height:48px;    /* 设置行高 */

            text-decoration:none;  /* 取消下划线 */

            color:pink;  /* 设置文字颜色 */

            font-family:"Microsoft YaHei"; /* 设置字体 */

        }

        .menu a:hover{

            background-color:gold;

            color:#fff;

        }

    </style>

</head>

<body>

    <div class="menu">

        <a href="#">首页</a>

        <a href="#">公司简介</a>

        <a href="#">解决方案</a>

        <a href="#">公司新闻</a>

        <a href="#">行业动态</a>

        <a href="#">招贤纳士</a>

        <a href="#">联系我们</a>

    </div>

</body>

</html>

页面效果：

css 制作菜单的更多相关文章

  1. Adobe Edge Animate –使用css制作菜单

    Adobe Edge Animate –使用css制作菜单 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 效果图:

  2. 学习CSS制作菜单列表，举一反三

    1.普通的二三级菜单 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  3. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  4. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  5. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  6. 个人练习：使用HTML+CSS制作二级菜单

    最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...

  7. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  8. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  9. JS+css滑动菜单简单实现

    JS+css滑动菜单 制作一个简单的滑动菜单,当鼠标指向菜单标题时,滑出二级菜单.移开时二级菜单隐藏.目标很简单,实践时有一些细节需要注意,比如鼠标移向二级菜单的 过程中,二级菜单消失了.还有定位出错 ...

随机推荐

  1. qt: 获取sql数据表的所有的字段；

    1. mysql 数据库: 转载: https://www.cnblogs.com/fuqia/p/8994080.html mysql安装成功后可以看到已经存在mysql.information_s ...

  2. openstack项目【day24】：KVM部署

    本节内容 虚拟化支持 软件准备 检查CPU虚拟化支持 安装软件包 激活并启动libvirtd服务 网络模式 配置桥接网络 验证网络 尝试连接Hypervisor 创建虚拟机 虚拟机操作 一.虚拟化支持 ...

  3. kubernetes云平台管理实战： 高级资源deployment-滚动升级（八）

    一.通过文件创建deployment 1.创建deployment文件 [root@k8s-master ~]# cat nginx_deploy.yml apiVersion: extensions ...

  4. LFYZ-OJ ID: 1017 士兵站队问题

    分析 该题和"输油管道问题"类似,只不过由一维问题编程了二维问题.可以将总步数分解为移动到水平线y位置的总步数ysteps和移动到序列x, x+1, x+2, ... , x+n- ...

  5. Spring Cloud使用样例

    Spring Cloud Demo 项目地址:https://github.com/hackyoMa/spring-cloud-demo 组件 基于Spring Boot 2.0.4.Spring C ...

  6. JN_0006：MongoDB未授权访问漏洞处理

    开启MongoDB服务时不添加任何参数时,默认是没有权限验证的,登录的用户可以通过默认端口无需密码对数据库任意操作而且可以远程访问数据库. 2.[修复建议]:临时方案:配置AUTH,做好访问认证.打开 ...

  7. 18、cookies与session学习笔记

    本文记录学习 cookies 和 session 的一些小练习和知识点   知识点1    cookies 和 session 的由来   HTTP协议是无状态的协议,因为一旦浏览器和服务器之间的请求 ...

  8. * CSS 视觉格式化（基本框、包含块、盒模型、水平格式化、垂直格式化、行布局、em框、内容区、行间距、行内框、行框）

    前言 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应该显示的 ...

  9. [物理学与PDEs]第3章第5节 一维磁流体力学方程组 5.1 一维磁流体力学方程组

    1.  当磁流体力学方程组中的量只依赖于 $t$ 及一个空间变量时, 该方程组称为一维的. 2.  一维磁流体力学方程组 $$\beex \bea \cfrac{\p H_2}{\p t}& ...

  10. 第三章Android移植平台工具介绍

    第三章Android移植平台工具介绍 进行 Android 移植的学习并不一定需要一款 Android 手机,但必须要有一款主流的开发板,开发板是用来进行嵌入式系统开发的电路板,包括中央处理器.存储器 ...