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

 <!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. 学生选课系统 c语言

    /********************************* *主题:学生选修课程系统设计 * *设计要求: *1.添加功能:程序能够任意添加课程和学生记录,可提供选择界面供用户选择所需要添加 ...

  2. Python爬虫入门教程 17-100 CSD*博客抓取数据

    写在前面 写了一段时间的博客了,忽然间忘记了,其实CSD*博客频道的博客也是可以抓取的,所以我干了..... 其实这事情挺简单的,打开CSDN博客首页,他不是有个最新文章么,这个里面都是最新发布的文章 ...

  3. C#版[击败100.00%的提交] - Leetcode 6. Z字形变换 - 题解

    版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...

  4. 知其所以然~redis的原子性

    原子性 原子性是数据库的事务中的特性.在数据库事务的情景下,原子性指的是:一个事务(transaction)中的所有操作,要么全部完成,要么全部不完成,不会结束在中间某个环节. 对于Redis而言,命 ...

  5. Docker最全教程——从理论到实战（七）

    在本系列教程中,笔者希望将必要的知识点围绕理论.流程(工作流程).方法.实践来进行讲解,而不是单纯的为讲解知识点而进行讲解.也就是说,笔者希望能够让大家将理论.知识.思想和指导应用到工作的实际场景和实 ...

  6. Spring基础系列-容器启动流程(1)

    原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/9870339.html 概述 ​ 我说的容器启动流程涉及两种情况,SSM开发模式和Spri ...

  7. javascript基础修炼(11)——DOM-DIFF的实现

    目录 一. 再谈从Virtual-Dom生成真实DOM 二. DOM-Diff的目的 三. DOM-Diff的基本算法描述 四. DOM-Diff的简单实现 4.1 期望效果 4.2 DOM-Diff ...

  8. PHP中的__get和__set理解

    先来了解一下PHP类中的__get和__set函数 当我们试图获取一个不可达属性时(比如private),类会自动调用__get函数.当试图设置一个不可达属性时(比如private),类会自动调用__ ...

  9. javaweb中上传图片并显示图片，用我要上传课程信息（里面包括照片）这个例子说明

    原理:  从客户端上传到服务器                照片——文件夹——数据库 例如:桌面一张照片,在tomacat里创建upload文件夹,把桌面照片上传到upload文件夹里,并且把照片的 ...

  10. JavaScript字符串转数字的5种方法及其陷阱

    摘要 :JavaScript 是一个神奇的语言,字符串转数字有 5 种方法,各有各的坑法! String 转换为 Number 有很多种方式,我可以想到的有 5 种! parseInt(num); / ...