<!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. nodejs服务器部署教程四

    nodejs服务器部署最后一篇文章,部署ssl证书,升级http为https,其实网上相关教程有很多,但是略麻烦,本教程让你一切从简,5分钟搞定https,免费一年哦 申请ssl证书 免费申请的机构有 ...

  2. vue时间格式化

    export function formatTime(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.g ...

  3. ios开发之--awakeFromNib和initWithFrame分别什么时候调用

    - (void)awakeFromNib { //代码 } 这个方法只有是通过storyborad或者xib方式创建的cell时才会自动调用 - (instancetype)initWithFrame ...

  4. C语言的声明的优先级规则

    C语言的声明的优先级规则如下: A 声明从它的名字开始读取,然后按照优先级顺序依次读取 B 优先级从高到低依次是:   B.1 声明中被括号括起来的那一部分   B.2 后缀操作符[圆括号 ()表示这 ...

  5. osg剔除背面开启

    //设置背部剔除看不见背面东西 osg::ref_ptr<osg::CullFace> cullface=new osg::CullFace(osg::CullFace::BACK); s ...

  6. 编译poco-1.7.8

    运行build_vs140.cmd,运行之前可以修改一些参数,例如编译64位 buildwin 140 build shared both x64 nosamples notests devenv 修 ...

  7. GLIBC_2.14报错

    [linux]提示"libc.so.6: version `GLIBC_2.14' not found",系统的glibc版本太低 0.以下在系统CentOS 6.3 x86_64 ...

  8. linux文件和目錄管理的基本命令命令

    ls命令 作用:顯示目標列表或目錄的內容 語法:ls［選項］［目錄或文件］ -a:顯示指定目錄下所有子目錄與文件,包括隱藏文件 -l:顯示文件的詳細信息 -d: 顯示目錄 例:ls -dl cd命令 ...

  9. 【宝塔面板】pm2 安装没反应问题

    在使用宝塔安装 node环境时候..点击 PM2管理器安装.然后没反应.刷新列表.还是未安装 解决办法: 进入SSH, 查看错误 cat /tmp/panelExec.log 更新git yum up ...

  10. 一起脱去小程序的外套和内衣 - 微信小程序架构解析

    版权声明:本文由渠宏伟  原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/760767001484042227 来源:腾云阁 ...