<!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;

         }

     </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. 巧妙使用checkbox制作纯css动态导航栏

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

  5. day13—CSS之导航栏

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

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

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

  7. Css之导航栏学习

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

  8. 前端css小米导航栏设置及盒子定位居中问题

    1.小米最上部导航栏设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  9. HTML+CSS实现导航栏二级下拉菜单完整代码

    工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

随机推荐

  1. Java使用String类格式化当前日期

    在输出日期信息时,经常需要输出不同格式的日期格式,本实例中介绍了String字符串类中的日期格式化方法,实例使用不同的方式输出String类的日期格式参数值,组合这些值可以实现特殊格式的日期字符串. ...

  2. 【一步步学OpenGL 21】 -《聚光灯光源》

    教程 21 聚光灯光源 原文: http://ogldev.atspace.co.uk/www/tutorial21/tutorial21.html CSDN完整版专栏: http://blog.cs ...

  3. Cocos2dx3.0 TextField 输入中文的问题

    一开始无法输入中文, 显示出来的是乱码, 修改一个函数, 下面是修改过后的代码 void GLView::onGLFWCharCallback(GLFWwindow *window, unsigned ...

  4. Apache安全配置基线指导

    搜索关键词:Apache安全配置基线指导 参考链接: windows服务器下Apache 的降权 https://www.landui.com/help/show-1749.html

  5. NSIS安装vcredist_64.exe

    ; ExecWait ‘vcredist_x86.exe’ # 一般的安装ExecWait ‘”vcredist_x86.exe” /q’ # silent install 静默安装; ExecWai ...

  6. Linux下的/proc目录介绍

    proc被称为虚拟文件系统,它是一个控制中心,可以通过更改其中某些文件改变内核运行状态, 它也是内核提空给我们的查询中心,用户可以通过它查看系统硬件及当前运行的进程信息. Linux中许多工具的数据来 ...

  7. Kafka consumer group位移重设

    本文阐述如何使用Kafka自带的kafka-consumer-groups.sh脚本随意设置消费者组(consumer group)的位移.需要特别强调的是, 这是0.11.0.0版本提供的新功能且只 ...

  8. 汉字按首字母排序（javascript，php，mysql实现）

    1.javascript实现 var a = ["啊","得啊_123","得啊_0124","波啊","婆& ...

  9. mysqlint类型的长度值mysql在建表的时候int类型后的长度代表什么

    详解mysql int类型的长度值 mysql在建表的时候int类型后的长度代表什么 是该列允许存储值的最大宽度吗 为什么我设置成int(1), 也一样能存10,100,1000呢. 当时我虽然知道i ...

  10. python基础---->python的使用(一)

    这里面记录一些python的一些基础知识,数据类型和变量.幸而下雨,雨在街上泼,却泼不进屋内.人靠在一块玻璃窗旁,便会觉得幸福.这个家还是像个家的. python的一些基础使用 一.python中的数 ...