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

 <!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. 从锅炉工到AI专家(6)

    欠拟合和过拟合 几乎所有的复杂方程都存在结果跟预期差异的情况,越复杂的方程,这种情况就越严重.这里面通常都是算法造成的,当然也存在数据集的个体差异问题. 所以"欠拟合"和" ...

  2. Oracle最新的Sql笔试题及答案

    部门表(SM_DEPT) 字段名称 数据类型 是否主键 注释 DEPT_ID NUMBER Y 部门ID PARENT_DEPARTMENT_ID NUMBER N 上级部门 DEPARTMENT_N ...

  3. webpack4.0各个击破（4）—— Javascript & splitChunk

    目录 一. Js模块化开发 二. Js文件的一般打包需求 三. 使用webpack处理js文件 3.1 使用babel转换ES6+语法 3.2 脚本合并 3.3 公共模块识别 3.4 代码分割 3.5 ...

  4. VS项目发布到本地IIS

    一.项目介绍 ①web项目,开发工具Visual Studio,语言C# ②本地IIS,手机上或其他用户在和本地在同一个局域网(并不绝对是指同一个WIFI)内访问,同时要把防火墙关掉 ③IIS全名In ...

  5. 杭电ACM2008--数值统计

    数值统计 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  6. 变量内容的删除、取代与替换 （Optional）

    变量除了可以直接设置来修改原本的内容之外,有没有办法通过简单的动作来将变量的内容进行微调呢? 举例来说,进行变量内容的删除.取代与替换等!是可以的!我们可以通过几个简单的小步骤来进行变量内容的微调喔! ...

  7. Android项目刮刮奖详解（二）

    Android项目刮刮奖详解(一) 前言 上期我们简单地实现了一个画板的功能,用户可以在上面乱写乱画,其实,刮刮奖也是如此,用户刮奖的时候也是乱写乱画的. 刮刮奖原理 一共有两层画布,底层画布存放中奖 ...

  8. 如何清理Docker占用的磁盘空间?

    摘要:用了 Docker,好处挺多的,但是有一个不大不小的问题,它会一不小心占用太多磁盘,这就意味着我们必须及时清理. 作为一个有信仰的技术公司,我们Fundebug的后台采用了酷炫的全 Docker ...

  9. 详解原生JS回到顶部

    第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...

  10. JavaScript类型化数组（二进制数组）

    0.前言 对于前端程序员来说,平时很少和二进制数据打交道,所以基本上用不到ArrayBuffer,大家对它很陌生,但是在使用WebGL的时候,ArrayBuffer无处不在.浏览器通过WebGL和显卡 ...