一般来讲，我们的网页导航栏
是这么个模式来构建
在结构上：
1.首先我们需要给导航栏的div 给个类名 一般为nav
2.然后就是一个无序表格 
3.由于导航栏的文字一般都是链接用来跳转页面 要在li里面包含一个a

<div class="nav">

            <ul>

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

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

                <li><a href="#">智慧门店</a></li>

                <li><a href="#">营销平台</a></li>

                <li><a href="#">媒体联盟</a></li>

                <li><a href="#">关于云道</a></li>

            </ul>

        </div>

在样式上： 目前我见过的分为两种
导航栏的文字 裸露 也就是没有滑动门的那种
比如这种

1.首先写网页之前就要取消 网页默认的边距，不然不管你写什么都跟别人的不一样。但是后期就不能这么写了。

* {

        margin: 0;  // *是通配选择器  选择所有的标签

        padding: 0;

    }

2.对于表格中的样式 也就是li中的小点点 要进行初始化
因为不同浏览器对小点点的兼容不支持 而且 小点点也没有那么美观好看 显得很鸡肋

ul {

        list-style: none;

    }

3.对于链接 我们一般都取消下划线的写法 因为不够美观处理如下

a {

        text-decoration: none;

}

1.2.3 三点都是写导航栏之前的初始化问题
接下来就是让表格里面的li 排列在一行，并且使得li垂直居中，而且要控制之间的距离，我们一般用浮动来做比较好，浮动的最大的作用就是让多个div在一行显示 并且脱标 不再占有位置。

 .nav li {

        float: left;

        margin: 0 10px;

    }

4.由于文字长度不能确定 又因为是纯文字没有必要转换为块级元素 所以不能够给a转换成块级元素 赋予宽 和 高（高根据字体大小会自动确定） 把a当作文字一样用的好处是 容易居中对齐 
一般垂直居中对齐用的就是行高 等于高 也就是 line-height == height
5.接下来再给li之间设置间距
有两种写法 在这里使用起来基本没有什么效果的差距
接着复习一下margin 和 padding的区别把 
padding 会撑开盒子 内边距 如图

、

margin会真正意义上的隔开距离 外边距  如图

由于写博客的人是个菜逼 分不清楚用这两个哪个好 大家就问一下大佬们把 问到的也给我说一下哈哈哈哈哈

好了接下来是另一种导航栏的写法 有推拉门的那种
这种写法跟我上述中讲的不太一样 因为在这里面的 a标签 需要转换成块级元素
转换成块级元素的目的呢 就是滑动门的原理了
滑动门的原理简单来讲 是这么个结构

<a>

    <span> </span>

 </a>

通过给 标签a 一个背景图片定位到左端
给标签span 一个背景图片定位到右端
如图

左端绿色部分 作为a的背景 右端绿色部分 作为 span 的背景 （左a 右s）
这样实现起来的话 无论文字有多长都可以滑动刚好是这个样子 大概如微信官网 如图

由于字体不一样长而背景又需要相同的样式 也就是滑动门原理
跟上述纯文字 导航栏不同的是 不能够再利用行高=高来垂直居中这些个a了 
我们在垂直居中的时候就可以利用padding-top 这个属性来操作（我查了微信的代码 也是这么做的）
不再赘述 代码如下

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

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

    <title>微信，是一种生活方式</title>

    <style>

       /*标题导航栏开始*/

       * {

           margin: 0;

           padding: 0;

       }

       body {

           background: url(wx.jpg) repeat-x;

       }

       li {

           list-style: none ;

       }

       a {

           text-decoration: none;

       }

        .nav li {

            float: left;

            margin: 0 40px;

            padding-top:21px;

        }

        .nav a{

            height: 33px;

            background: url("to.png")  no-repeat  left;

            padding-left: 10px;

            color: #fff;

            display: block;

            line-height: 33px;

            font-weight: 700;

            font-size:14px;

        }

        .nav span {

            height: 33px;

            display: block;

            background: url("to.png") no-repeat right;

            padding-right: 10px;

        }

       .nav a:hover {

           background: url("ao.png") no-repeat left;

       }

        .nav a:hover span {

            background: url("ao.png") no-repeat right;

        }

    </style>

</head>

<body>

<div class="top">

    <div class="nav">

    <ul>

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

        <li><a href="#"><span>联系电话</span></a></li>

        <li><a href="#"><span>活动中心</span></a></li>

        <li><a href="#"><span>用户指导</span></a></li>

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

    </ul>

    </div>

</div>

</body>

</html>

网页导航栏 html + css的代码实现的更多相关文章

  1. sencha touch 模仿tabpanel导航栏TabBar的实现代码

    这篇文章介绍了sencha touch 模仿tabpanel导航栏TabBar的实例代码,有需要的朋友可以参考一下 基于sencha touch 2.2所写 效果图: 代码: /* *模仿tabpan ...

  2. jquery侧边折叠导航栏制作，两行代码搞定

    jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...

  3. iOS开发之 -- 判断tableview/scrollview的滑动方法,及导航栏渐变的实现代码

    开发的过程中,肯定会用到在视图想上滑动的时候,在导航处做一些操作,比如向上滑动的时候,做个动画,出现一个搜索框,或者其他的操作,那么我们怎么来判断它的滑动方向呢? 首先我们应该知道tableview继 ...

  4. <iOS 导航栏>第一节：导航栏透明方法实现代码

      说下导航栏的透明方法:   很多应用需要导航栏随着向上滑动,逐渐从透明变成不透明,很炫酷,大部分应用都在使用导航栏渐变效果,现附上代码然后直接将实现,一会讲下如何来实现,这一部分直接上代码.   ...

  5. 通栏导航栏的制作，综合使用CSS属性，代码不超过30行

    这篇文章,小编带领大家一同做一个利用CSS技术实现的导航栏.通过这个导航栏的制作,希望大家能够对前几篇文章中学习到的CSS属性能有一个整体的认识,并能够达到灵活运用的程度. 承接文章:灵活控制块级元素 ...

  6. 如何使用css、布局横向导航栏

    使用css布局横向导航栏,css应用给网页样式的方式,就相当于,给人怎么去穿上衣服,不同的衣服有不同的穿法,这里我们使用的是内联式.在这里 我们可以适当的把值调的大一点,这样我们就可以很容易的对比. ...

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

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

  8. 【1-4】jQuery代码风格-导航栏

    实现一个导航栏,单机不同的商品名称链接,显示相应的内容,同时高亮显示当前选择的商品. 实现功能如图: css: /* reset */ ;padding:0 0 12px 0;font-size:12 ...

  9. CSS 导航栏

    实例: 导航栏 Home News Articles Forum Contact About 导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜 ...

随机推荐

  1. mybatis foreach报错It was either not specified and/or could not be found for the javaType Type handler

    或许是惯性思维,在mybatis使用foreach循环调用的时候,很多时候都是传一个对象,传一个List的情况很少,所以写代码有时候会不注意就用惯性思维方法做了. 今天向sql传参,传了一个List作 ...

  2. 内存管理-buddy[代码]

    基于2.6.32内核源码分析 首选内存区和gfp描述符关系运算 64位系统默认没有开启CONFIG_HIGHMEM选项,因此只有4个内存区DMA(0),DMA32(1),NORMAL(2),MOVAB ...

  3. RIPng配置（第十三组）

    拓扑如下 配置rip指令和ipv6包允许路由指令以r1为例 在r1上配置拓扑上对应网段的ip,r1上两个连接路由器的端口手动设置ip,同网段的路由器端口ip自动获取. r2配置 r3 配置完后查看路由 ...

  4. vue的Vuex

    网上也很多文章,但解释起来的确玄乎,小白们很难理解到位. 自问文笔没大神们好只是自己了解了掌握了Vuex用法以及主要思路 但要我解释起来也只能参考大神们的说法 Vuex就是一个全局变量,而这个全局变量 ...

  5. Maven 概要介绍

    Maven 简介 Apache Maven 是一套软件工程管理和整合工具.基于工程对象模型(POM)的概念,通过一个中央信息管理模块,Maven 能够管理项目的构建.报告和文档. Maven 工程结构 ...

  6. Spring Cloud是怎么运行的？

    导读 在之前的文章中给大家介绍了Spring Boot的基本运行原理(链接),收到了很多读者朋友们关于目前比较流行的微服务框架Spring Cloud的问题反馈.因此,在这篇文章中小码哥打算和大家一起 ...

  7. ionic3项目 出现 No provider for ApplicationInitStatus!

    出现No provider for ApplicationInitStatus!原因是在app.module.ts文件忘记导入BrowserModule导致的,打开app.module.ts文件添加以 ...

  8. Android--UI之Gallery

    前言 这篇博客讲解一下Android开发中,Gallery控件的使用,这是一个画廊视图,用于展示一组图片,用固定在中间位置的水平滚动列表显示列表项的视图.Android最新的API文档中了解到,在An ...

  9. java 判断是否大于指定版本号

    判断 a.b.c 格式的版本大小: public boolean is_version_great_than(String version) { boolean result = false; if ...

  10. 使用ZeroBrane Studio调试Openresty lua脚本

    介绍 ZeroBraneStudio 作为轻量级.跨平台的Lua IDE,已被广泛用来调试各种Lua引擎游戏框架.Openresty.Wireshark脚本等等. Openresty 是一个建立在Ng ...