<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8" content="This is a meta data" name="dengyexun">

     <title>Title</title>

     <link rel="stylesheet" type="text/css" href="home.html">

     <style>

         ul{

             list-style-type: none;

             margin: 10px;

             padding: 0px;

         }

         a:link, a:visited{

 {#            display: block;#}

             font-weight: bold;

             color: white;

             background-color: #98bf21;

             text-align: center;

             width: 120px;

             padding: 10px;

             text-transform: uppercase;

         }

         a:hover, a:active{

             background-color: orangered;

         }

         li{

             display: inline;

         }

     </style>

 </head>

 <body>

     <ul>

         <li><a href="home.html">Home</a></li>

         <li><a href="home.html">News</a></li>

         <li><a href="home.html">Contact</a></li>

         <li><a href="home.html">About</a></li>

     </ul>

 </body>

 </html>

显示结果

CSS水平导航栏的更多相关文章

  1. HTML/CSS：导航栏水平和垂直

    1.垂直导航栏 导航栏 = 链接列表导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的.如需构建垂直导航栏,我们只需要定义 <a> 元素 ...

  2. CSS 笔记——导航栏、下拉菜单、提示工具

    8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...

  3. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  4. [前端]如何写一个水平导航栏？（浮动、inline-block+消除间距）

    在看W3school时,看到一个很好的例子,如何制作一个水平的导航栏?没有任何要求,只需要达到下面的效果: 我认为这个例子包含了很多css布局需要了解的知识,因此单独写一下. W3school上面的方 ...

  5. day13—CSS之导航栏

    转行学开发,代码100天——2018-03-29 见过这么多网页,没有导航栏的几乎没见过.因此,对导航栏的练习非常之必要. 导航栏的实现,基本上都是通过链接列表实现,即ul->li->a标 ...

  6. CSS水平导航条和纵向导航条

    问题描述:         使用CSS制作水平导航条和纵向导航条   问题解决:        (1)水平导航条            1.1 效果预览:                   1.2 ...

  7. 巧妙使用checkbox制作纯css动态导航栏

    前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...

  8. 第8天：CSS制作导航栏

    今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...

  9. Css之导航栏学习

    Css: ul { list-style-type:none; margin:; padding:; overflow:hidden; background-color:blue; /*固定在顶部*/ ...

随机推荐

  1. JQuery Mobile难点备忘

    1 固定header: data-position="fixed",如果仅仅是加了这个属性,当页面出现滚动条的时候点击页面内容,header还是会隐藏显示全屏,如果不需要这样,加入 ...

  2. 架构设计：系统存储（28）——分布式文件系统Ceph（挂载）

    (接上文<架构设计:系统存储(27)--分布式文件系统Ceph(安装)>) 3. 连接到Ceph系统 3-1. 连接客户端 完毕Ceph文件系统的创建过程后.就能够让客户端连接过去. Ce ...

  3. lua 对表的简单序列化与反序列化

    参考文档:http://blog.csdn.net/xiaodan007/article/details/7096718 function sz_T2S(_t) local szRet = " ...

  4. 【NLP】HanLP环境

    1.参考:https://github.com/hankcs/pyhanlp 2.问题: C:\Users\ADMINI~1\AppData\Local\Temp\pip-install-u617cf ...

  5. FFmpeg X264的preset和tune

    鉴于x264的参数众多,各种参数的配合复杂,为了使用者方便,x264建议如无特别需要可使用preset和tune设置.这套开发者推荐的参数较为合理,可在此基础上在调整一些具体参数以符合自己需要,手动设 ...

  6. Explaining Delegates in C# - Part 1 (Callback and Multicast delegates)

    I hear a lot of confusion around Delegates in C#, and today I am going to give it shot of explaining ...

  7. React Native(三)——推送jpush-react-native

    瞬间,有种满血复活的赶脚…… 原因呢,就是熟悉了rn项目的套路:当老大问道,“推送功能看了还是没看呢?”的时候,虽然一直没有调试通,但还是不怯场的回答,“看了,按照网上说的也配了,但是还是用不了,不知 ...

  8. LinQ的初步学习与总结

    嘿嘿,说起来ORM和LinQ,就感觉离我好遥远的,在学校是没有学习的,所以总感觉学习了LinQ就是大神,现在嘛,终于也体会一点,感觉LinQ只是初步学习,没有太难,当然以后使用在项目中就没有这样的简单 ...

  9. PON系统基础知识简介

    一  PON基础知识 1.1 PON技术概念 PON(Passive Optical Network)即无源光网络,一种基于点到多点(P2MP)拓朴的技术.“无源”指ODN(光分配网络)不含有任何电子 ...

  10. delphixe10 android操作 打电话，摄像头，定位等

    XE6 不支持JStringToString.StringTojString.StrToJURI:use Androidapi.Helpers //Splash Image Delphi XE5,XE ...