<!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. 【Windows socket+IP+UDP+TCP】网络基础

    Windows Socket+网络      Winsock是 Windows下套接字标准.          Winsock 编程分为UDP[Windows socket + UDP],TCP[Wi ...

  2. SVN设置没有写log不能commit

    操作方法:在SVN的Repositories下,找到要配置的项目,在项目目录下找到hooks文件夹,在其下创建pre-commit.bat文件,把下面复制进去就可以了(无需重启,如果改动,保存bat文 ...

  3. linux下命令学习

    1 在linux中,./代表当前目录下 例如 创建一个文件夹123   mkdir ./123   ->当前目录下创建一个123文件夹 mkdir -p ./123/456  在当前目录下创建一 ...

  4. JS动态设置确认弹窗

    多次使用确认弹窗 <!--START 确认收货--> <div class="popout-boxbg out" id="delivery_goods& ...

  5. 【ipad神坑】ipad麦克风听不到声音怎么回事 微信QQ语音视频对方都听不到

    今天遇到了这个问题 说话听不见,但是敲击ipad,可以明显的听到击打的声音 siri也是可以听到 上网上找,大多都是说恢复设置,重启,隐私麦克风权限等解决方案 都是浪费感情 全部尝试过了,依然没有用. ...

  6. GoldenGate的监控

    1.进入GoldenGate安装目录,运行GGSCI,然后使用info all查看整体的运行状况 GGSCI (aix212) 1> info all Program Status Group ...

  7. zabbix高级玩法之通过xml文件一次性导入

    author:headsen  chen date: 2018-11-10  10:08:38 背景:zabbix的硬件监控架构已经部署完成,接下来就是创建主机这一步,2400台主机如果采用一台台的创 ...

  8. 一个不错的工具推荐:JMeter

    在开发中可能会遇到一些场景需要对程序的性能,并发能力等进行度量,就是对一些程序的性能进行度量,生成一些报告等,最近遇到了一个不错的工具 apache JMeter,它是用java的swing开发的,功 ...

  9. VS2003安装Opencv1.0 windows系统 win7

    一．步骤 下载安装opencv1.0     安装文件我上传到百度网盘分享连接 http://pan.baidu.com/s/1o8na0aA 配置电脑windows环境变量 配置VS2003全局设置 ...

  10. 【CF875E】Delivery Club 二分+线段树

    [CF875E]Delivery Club 题意:有n个快递需要依次接收,这n个快递分部在x轴上,第i个快递的位置是xi.有两个快递员,一开始分别在s0,s1,你可以任意安排哪个人收哪个快递,前提是一 ...