<!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实现经理与员工的差异

    对于在同一家公司工作的经历和员工而言,两者是有很多共同点的.例如,每个月都要发工资,但是经理在完成目标任务后,还会获得奖金.此时,利用员工类来编写经理类就会少写很多代码,利用继承技术可以让经理类使用员 ...

  2. 【Cesium】模型转换和使用（转）

    http://52.4.31.236/convertmodel.html https://blog.csdn.net/UmGsoil/article/details/74572877 var view ...

  3. 运行RF测试案例，显示unable to open socket to "localhost:56505" error: [Errno 10061] 错误，且关闭RF卡死的解决办法

    问题描述: 执行WEB ui测试案例后,执行请他的测试案例显示unable to open socket to "localhost:56505" error: [Errno 10 ...

  4. Win10 如何安装 Ubuntu

    在 Microsoft Store 中安装 Ubuntu ( 如下图1 ) 把开发者模式打开 ( 如下图2 ) 把 WSL ( Windows下的Linux子系统 ) 打开并重启电脑 ( 如下图3 )

  5. springboot 集成elasticsearch

    In this article, we will discuss about “How to create a Spring Boot + Spring Data + Elasticsearch Ex ...

  6. codeforces水题100道 第十七题 Codeforces Beta Round #25 (Div. 2 Only) A. IQ test (brute force)

    题目链接:http://www.codeforces.com/problemset/problem/25/A题意:在n个书中找到唯一一个奇偶性和其他n-1个数不同的数.C++代码: #include ...

  7. Python入门 学习笔记

    十六进制:0x123 布尔运算:and, or, not 空值:None 注释:# raw字符串不需要转义:r'XXX' 多行字符:'''XXX''' 多行字符+raw字符串:r'''XXX''' U ...

  8. Ubuntu apt-get彻底卸载软件包

    https://blog.csdn.net/get_set/article/details/51276609 如果你关注搜索到这篇文章,那么我可以合理怀疑你被apt-get的几个卸载命令有点搞晕了. ...

  9. OpenCV——轮廓特征描述

    检测出特定轮廓,可进一步对其特征进行描述,从而识别物体. 1. 如下函数,可以将轮廓以多种形式包围起来. // 轮廓表示为一个矩形 Rect r = boundingRect(Mat(contours ...

  10. Linux终端多用户通信实用命令

    一  命令 1.1 write 该命令将当前终端(源)输入的字符拷贝至目标用户的终端,从而发送消息给系统中某个用户.用法如下: #write <user> <msg> [Ctr ...