通过行内块、伪类对导航栏进行设置

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <style>
  7.         body{
  8.             margin:0;
  9.             padding:0;
  10.         }
  11.         div {
  12.             width: 700px;
  13.             height: 40px;
  14.             margin: 0 auto;
  15.             background-color: #E3E4E5;
  16.             text-align: center;
  17.         }
  18.         a {
  19.             color: #8DD748;
  20.             display:inline-block;
  21.             line-height:40px;
  22.             text-decoration:none;
  23.             width:70px;
  24.             height:40px;
  25.         }
  26.         a:hover{
  27.             color:red;
  28.             text-decoration:underline;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <div>
  34.         <a href="#">语文</a>
  35.         <a href="#">数学</a>
  36.         <a href="#">化学</a>
  37.         <a href="#">历史</a>
  38.         <a href="#">体育</a>
  39.         <a href="#">物理</a>
  40.         <a href="#">生物</a>
  41.     </div>
  42. </body>
  43. </html>

效果：

html——导航demo的更多相关文章

  1. 实现百度地图导航Demo的语音播报功能

    上文中实现了在本地导入百度地图导航Demo,那么在此基础上如何实现导航的语音播报呢? 一.为该应用申请语音播报(也叫注册) http://developer.baidu.com/map/index.p ...

  2. Java程序员的日常 —— 响应式导航Demo

    这两天想要做响应式的页面,于是本着重复造轮子的想法,模仿Bootstrap官网,精简了一个响应式导航的Demo. 效果 代码 <!DOCTYPE html> <html> &l ...

  3. CoreLocation导航Demo

    CoreLocation实现定位和导航功能还是非常简单的,基本思路是: 1.导入<CoreLocation/CoreLocation.h>头文件 2.使用该框架内的导航管理者,创建该导航管 ...

  4. CSS——tab导航demo

    问题总结: 1.ul要比外套div宽度的值大一点 2.ul需要往左移动1px 3.外套的div设置overflow隐藏 解决抖动: 1.li宽度设置98px,padding左右值1px,hover之后 ...

  5. CSS——新浪导航demo

    主要运用的dispaly将a变成行内块,再用padding撑开宽度. <!DOCTYPE html> <html lang="en"> <head&g ...

  6. 百度地图SDK下载以及创建应用（申请Key）和本地导入Demo

    一.百度地图SDK下载 http://lbsyun.baidu.com/sdk/download?selected=location 选择全部,然后分别下载开发包.示例代码.类参考. 二.创建应用(申 ...

  7. 【iOS】7.4 定位服务->3.2 地图框架MapKit 功能2：路线规划（导航）

    本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. 本文相关目录: ================== 所属文集:[iOS]07 设备工具 === ...

  8. 3D立体菜单导航

    今天在微博里面看到别人分享的一个立体效果,我觉得挺好的,就拿下来自己存着,万一以后用到. 效果如下: index.html <!DOCTYPE html> <html > &l ...

  9. 关于百度地图导航AndroidSDK的初始化问题

    使用百度地图有一段时间了,导航是一个一直困扰我的问题.今天刚发现百度地图的导航SDK并不是对Android6.0版本不兼容.而是对某一部分手机不兼容,准确的说是对X64或X86的cpu不兼容.下载百度 ...

随机推荐

  1. jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）

    最近项目不是很忙,抽空整理了下,js中常用追加元素的几种方法. <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  2. codevs1031 质数环

    一个大小为N(N<=17)的质数环是由1到N共N个自然数组成的一个数环,数环上每两个相邻的数字之和为质数.如下图是一个大小为6的质数环.为了方便描述,规定数环上的第一个数字总是1.如下图可用1 ...

  3. Ubuntu 16.04下轻量级文件搜索工具Catfish

    Catfish搜索文件速度快,但是不支持正则表达式. 安装: sudo add-apt-repository ppa:catfish-search/ppa sudo apt-get update su ...

  4. [React Native] Prevent the On-screen Keyboard from Covering up Text Inputs

    When you bring up the on screen keyboard in a mobile app, it will cover any text input or buttons on ...

  5. [dfs] UVALive 3667 Ruler

    题目链接: option=com_onlinejudge&Itemid=8&page=show_problem&problem=1668">https://ic ...

  6. 关于EditText的android:maxLength属性的注意事项

    一直以为在xml布局文件中对EditText添加 android:maxLength="30";属性是控制EditText字符数的.想当然的以为一个中文占2个字符,一个英文占1个字 ...

  7. bzoj1009 [HNOI2008]GT考试——KMP+矩阵快速幂优化DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1009 字符串计数DP问题啊...连题解都看了好多好久才明白,别提自己想出来的蒟蒻我... 首 ...

  8. openstack 杂记 备忘

  9. MSP430:AD10

    使用的MSP430G2553,为AD10,正常有8路输出,P1.0-P1.7为A0-A7 有七个寄存器, 参考电压可以是VCC或者内部参考电压1.5V或者2.5V 参考时钟可以是内部ADC10OSC ...

  10. 【转载】基于AFNetWorking3.0的图片缓存分析

    原文出处: Yasin的简书 理论 不喜欢理论的可以直接跳到下面的Demo实践部分 缓存介绍 缓存按照保存位置可以分为两类:内存缓存.硬盘缓存(FMDB.CoreData…).我们常说的网络请求缓存包 ...