<!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. phonegap入门–1 Android 开发环境搭建

    一.JDK 安装JDK,安装包中包含了JDK和JRE两部分,建议将它们安装在同一个盘符下面. 配置环境变量: 1.右键点击我的电脑,选择属性,点击高级选项卡,选择环境变量. 2.找到Path变量名(无 ...

  2. 海康视频监控---Demo

    1,使用在页面中调用ActiveX控件 <object classid='clsid:E7EF736D-B4E6-4A5A-BA94-732D71107808' codebase='' stan ...

  3. python是c语言开发的

    python是c语言开发的. #c语言,没有字符串:字符串使用字符组表现   hello —五个字符 字符数组 [’h’,’e’,…’o’]   所以python中如果对一个字符串进行修改,就是在内存 ...

  4. 【代码审计】CLTPHP_v5.5.3后台任意文件删除漏洞分析

      0x00 环境准备 CLTPHP官网:http://www.cltphp.com 网站源码版本:CLTPHP内容管理系统5.5.3版本 程序源码下载:https://gitee.com/chich ...

  5. RF使用ie浏览器访问页面，浏览器启动只显示This is the initial start page for the WebDriver server，页面访问失败

    问题描述:启动ie浏览器后,页面显示如下: 问题定位: 1.IE页面缩放没有设置成100% 2.ie浏览器的安全模式设置是否都将“启动保护模式”勾选上 3.iedriver驱动版本号是否和seleni ...

  6. Linux CentOS6.5上搭建环境遇到的问题

    1.卸载CentOS自带的JDK 查看centos上 安装的jdk:rpm -qa|grep jdk 出现如下: java-1.7.0-openjdk-1.7.0.45-2.4.3.3.el6.x86 ...

  7. proxy chains 试用

    我的机子是通过一台windows机器上的CCProxy代理上网.可是在设置了系统代理以后,发现在终端下若要进行ftp或者ssh等操作,并不能使用代理(但是wget是可以的). 期间试过一些方法,比如在 ...

  8. [SublimeText] Sublime Text 2 运行 Python 脚本中文路径解决方法

    在 SublimeText 中直接运行 Python 脚本,出现以下报错提示: Running python -u C:\Documents and Settings\Administrator\桌面 ...

  9. MDK972-EK开发板裸调试设置和裸机程序烧写（转）

    硬件平台:MDK972-EK开发板编译调试软件:KEIL uVision4仿真工具:JLINK V7/V8   本例子从串口输出信息,如图:       KEIL uVision4调试设置如图所示: ...

  10. Python错误和异常 学习笔记

    错误和异常概念 错误:     1.语法错误:代码不符合解释器或者编译器语法     2.逻辑错误:不完整或者不合法输入或者计算出现问题 异常:执行过程中出现万体导致程序无法执行     1.程序遇到 ...