1.知识点

  1. 列表
  2. 浮动
  3. 伪类
  4. 背景
  5. 文本格式化
  6. 盒子模型

2.效果

3.代码

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>导航栏例子</title>

  </head>

  <style type="text/css">

    ul {

      list-style-type: none;

      margin: 0;

      padding: 0;

    }

    li{

      float: left;

    }

    a:link,

    a:visited {

      display: block;

      font-weight: bold;

      color: #ffffff;

      background-color: #98bf21;

      width: 120px;

      text-align: center;

      padding: 4px;

      text-decoration: none;

      text-transform: uppercase;

    }

    a:hover,

    a:active {

      background-color: #7a991a;

    }

  </style>

  <body>

    <ul>

      <li><a href="#home">首页</a></li>

      <li><a href="#diary">我的日记</a></li>

      <li><a href="#article">我的文章</a></li>

      <li><a href="#aboutme">关于我</a></li>

    </ul>

  </body>

</html>

CSS实现导航栏的更多相关文章

  1. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. 巧妙使用checkbox制作纯css动态导航栏

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

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

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

  4. Css之导航栏学习

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

  5. CSS 笔记——导航栏、下拉菜单、提示工具

    8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...

  6. HTML/CSS：导航栏水平和垂直

    1.垂直导航栏 导航栏 = 链接列表导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的.如需构建垂直导航栏,我们只需要定义 <a> 元素 ...

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

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

  8. day13—CSS之导航栏

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

  9. CSS实现导航栏底部动态滚动条效果

    预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在<li></li>标签中让<span>元素的宽度由0变化 ...

  10. html css二级导航栏

    二级导航栏制作: 1.将一级导航栏去除列表样式(list-style:none),并给予浮动,使其横向排列(float:left) 2.给每个li中添加一个<a></a>标签, ...

随机推荐

  1. 百度网盘(百度云)SVIP超级会员共享账号每日更新（2023.12.27）

    一.百度网盘SVIP超级会员共享账号 可能很多人不懂这个共享账号是什么意思,小编在这里给大家做一下解答. 我们多知道百度网盘很大的用处就是类似U盘,不同的人把文件上传到百度网盘,别人可以直接下载,避免 ...

  2. [转帖]OceanBase实验4：迁移MySQL数据到OceanBase集群

    服务器环境 1)12核48G,操作系统为centos 7.9系统,单节点三副本1-1-1集群. 2)源MySQL数据库:与OceanBase同一台服务器,版本为MySQL 5.7. 1.使用 mysq ...

  3. Nginx loki监控日志的学习

    Nginx loki监控日志的学习 背景 学习自: https://mp.weixin.qq.com/s/Qt1r7vzWvCcJpNDilWHuxQ 增加了一些自己的理解 第一部分nginx日志的完 ...

  4. [转帖]Region Merge Config

    TiKV replicates a segment of data in Regions via the Raft state machine. As data writes increase, a ...

  5. [转帖]LSM-Tree:从入门到放弃——入门：基本概念、操作和Trade-Off分析

    https://zhuanlan.zhihu.com/p/428267241 LSM-Tree,全程为日志结构合并树,有趣的是,这个数据结构实际上重点在于日志结构合并,和 tree 本身的关系并不是特 ...

  6. [转帖]【存储测试】vdbench存储性能测试工具

    一.前言 1.介绍  vdbench是一个I/O工作负载生成器,通常用于验证数据完整性和度量直接附加(或网络连接)存储性能.它可以运行在windows.linux环境,可用于测试文件系统或块设备基准性 ...

  7. [转帖]使用 Crash 工具分析 Linux dump 文件

    前言 Linux 内核(以下简称内核)是一个不与特定进程相关的功能集合,内核的代码很难轻易的在调试器中执行和跟踪.开发者认为,内核如果发生了错误,就不应该继续运行.因此内核发生错误时,它的行为通常被设 ...

  8. SPECJVM2008的简单结果

    SPECJVM2008的简单结果 摘要 前面两天学习了SPECJVM2008简单使用. 今天进行一下简单的数据采集. 需要说明一下SPECJVM2008貌似仅兼容JDK1.8 更新的LTS版本都不兼容 ...

  9. Ubuntu18.04 设置ip地址

    1. 自己用vCenter安装了一个ubuntu18.04, 结果因为是 vCenter6.7 只有web界面, 发现GUI操作时鼠标位置不对,没办法只能通过cli的方式设置ip地址. 2. 先简单查 ...

  10. reposync与createrepo创建离线yum源的方法

    背景 昨天晚上进行了在线升级银河麒麟V10SP2的audit和mate-indicator的rpm包 今天想了下,如果机器无法上网. 必须得在公司内部搭建一套离线的rpm源进行处理 想了下还是使用re ...