二话不说直接上代码（萌新：实在也没什么好说的）

 <!DOCTYPE html>

 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta charset="utf-8" />

     <title>导航栏</title>

     <style type="text/css">

      #nav{

          width:%;

          height:39px;

         margin:0px;

         background:#

     }

      #nav ul li{

          margin:5px 10px;

          float:left;

          list-style:none;

      }

      #nav ul li a{

          float:left;

          padding:0px 16px;

          <!--margin:auto;-->

          color:#ffffff;

          font-size:15px;

      }

     </style>

 </head>

 <body>

     <div id="nav">

         <ul >

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

             <li ><a href="#">朋友</a></li>

             <li ><a href="#">商城</a></li>

             <li ><a href="#">下载客户端</a></li>

         </ul>

     </div>

 </body>

 </html>

主要就是css（级联样式表）对html的内容做格式化（不太会表述）；

其中对元素可以直接用标识对其设置格式；对某个id为nav的元素做格式化，要在前面加#；对class=“nav”修改格式要在nav前加 "."

这三个的应用我自己还是不太熟悉，就不说了，此处希望有大触可以指导一番，或者有人和我探讨也行。

css代码可以用开始<style type="txt/css">、结束标识</style>写在html文档的head里，即内嵌在head里，

我这里是简易的导航栏css代码不多就内嵌在head里

上述是css的一种引用方式：内嵌式样式表

---------------------------------------------------------------------------------------------------------------------------

如果css代码比较多可以直接把代码写在css文件，然后用link标记在html文件的head里引入样式表css。

上述事实第二种引用方式：外部样式表（现在的网页繁杂，用这种方法比较多）

还有一种就是内联样式表，这里不做解释。

html+css 制作简易导航栏的更多相关文章

  1. CSS3学习-用CSS制作立体导航栏

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  3. 【温故而知新-CSS】使用CSS设计网站导航栏

    body #nav li a { width: auto; } #nav li a:hover { background-color: #ffcc00; color: #fff; border-rig ...

  4. CSS3特效----制作立体导航栏菜单

    使用CSS3实现下图的导航菜单效果 <!doctype html> <html lang="en"> <head> <meta chars ...

  5. 【源码分享】jquery+css实现侧边导航栏

    jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

  6. AndroidStudio制作底部导航栏以及用Fragment实现切换功能

    前言 大家好,给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢 学习目标 AndroidStudio制作底部导航栏以及用Fragment实现切换 ...

  7. 纯CSS制作二级导航

    一.问题描述 做一个类似校园网首页,主要是导航栏的设置,ul默认纵向排列,如何横向排列,同时去掉圆点. 二.问题解决 2.1 先写导航条 用两个ul嵌套,一个ul是横向导航条,另一个是每个小项目下连一 ...

  8. CSS常用操作-导航栏

    1.垂直导航栏 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  9. Bootstrap入门Demo——制作路径导航栏

    今天在在群里聊天的时候看到一仅仅程序猿发了一张用Bootstrap做的界面.感觉挺好看.然后去官网看了下组件.发现都挺美丽的,然后看到了路径导航栏,刚好要做这个东西,然后就下了Bootstrap的源代 ...

随机推荐

  1. java基础(五)-----关键字static

    在Java中并不存在全局变量的概念,但是我们可以通过static来实现一个“伪全局”的概念,在Java中static表示“全局”或者“静态”的意思,用来修饰成员变量和成员方法,当然也可以修饰代码块. ...

  2. Python爬虫入门教程 14-100 All IT eBooks多线程爬取

    All IT eBooks多线程爬取-写在前面 对一个爬虫爱好者来说,或多或少都有这么一点点的收集癖 ~ 发现好的图片,发现好的书籍,发现各种能存放在电脑上的东西,都喜欢把它批量的爬取下来. 然后放着 ...

  3. PHPExcel使用笔记

    PHPExcel使用笔记 - 常见操作总结 最近做项目时,PHPExcel插件用得比较频繁,将其常见的操作总结一下- $objPHPExcel->getDefaultStyle()->ge ...

  4. Linux学习笔记（一）：常用命令（1）

    经过统计Linux中能够识别的命令超过3000种,当然常用的命令就远远没有这么多了,按照我的习惯,我把已经学过的Linux常用命令做了以下几个方面的分割: 1.文件处理命令 2.文件搜索命令 3.帮助 ...

  5. SpringBoot+gradle项目构建war

    前言 一开始觉得这并不是什么很难的事情,但是踩坑了之后才发现... 步骤 1.在build.gradle配置文件中加入apply plugin: 'war' 很多人以为这样就完事了,我一开始也是这样认 ...

  6. 想晋级高级工程师只知道表面是不够的！Git内部原理介绍

    本文由云+社区发表 作者:腾讯工蜂用户:王二卫 从不一样的视角了解git,以便更好的使用git 一.git & git 版本库认识 git 是一个内容寻址的文件系统,其核心部分是一个简单的键值 ...

  7. 网络协议抓包分析——TCP传输控制协议（连接建立、释放）

    前言 TCP协议为数据提供可靠的端到端的传输,处理数据的顺序和错误恢复,保证数据能够到达其应到达的地方.TCP协议是面向连接的,在两台主机使用TCP协议进行通信之前,会先建立一个TCP连接(三次握手) ...

  8. .Net语言 APP开发平台——Smobiler学习日志：如何设置页面的title

    1.修改Mobile Form的TitleText的属性 输入需要显示标题,如图1: 2.修改Mobile Form的TitleStyle属性 其中包括Image属性(窗体图标).BackColor属 ...

  9. 第51章 内省端点(Introspection Endpoint) - Identity Server 4 中文文档(v1.0.0)

    内省端点是RFC 7662的实现. 它可用于验证引用令牌(如果消费者不支持适当的JWT或加密库,则可以使用JWT).内省端点需要身份验证 - 因为内省端点的客户端是API,您可以在其上配置秘密ApiR ...

  10. 《C#并发编程经典实例》学习笔记—2.4　等待一组任务完成

    问题 执行几个任务,等待它们全部完成. 使用场景 几个独立任务需要同时进行 UI界面加载多个模块,并发请求 解决方案 Task.WhenAll 传入若干任务,当所有任务完成时,返回一个完成的任务. 重 ...