一般来讲，我们的网页导航栏
是这么个模式来构建
在结构上：
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. HTTP 协议常见的状态码

    HTTP状态码负责表示客户端HTTP请求的返回结果.标记服务器端的处理是否正常.通知出现的错误等工作. 状态码的类别: 记录在RFC2616上的HTTP状态码有40种,再加上WebDAV等的扩展,数量 ...

  2. 第35节：Java面向对象中的多线程

    Java面向对象中的多线程 多线程 在Java面向对象中的多线程中,要理解多线程的知识点,首先要掌握什么是进程,什么是线程?为什么有多线程呢?多线程存在的意义有什么什么呢?线程的创建方式又有哪些?以及 ...

  3. Python学习笔记【第十二篇】：Python异常处理

    什么是异常 异常就是程序运行时发生错误的信号,在python中,错误触发的异常如下 错误类型分为两种:语法错误和业务逻辑错. 异常的类型 AttributeError 试图访问一个对象没有的树形,比如 ...

  4. 《http权威指南》读书笔记6

    概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...

  5. Kali学习笔记12：服务扫描

    关于什么是服务扫描不多介绍,通俗来看: 我已经扫描到目标机器某个端口开放,接下来我需要知道开放这个端口的是什么应用 情景: 我的Kali机器IP地址:192.168.22.130 我要扫描的Metas ...

  6. Java多线程可以分组，还能这样玩！

    前面的文章,栈长和大家分享过多线程创建的3种方式<实现 Java 多线程的 3 种方式>. 但如果线程很多的情况下,你知道如何对它们进行分组吗? 和 Dubbo 的服务分组一样,Java ...

  7. Kubernetes系列之Coredns and Dashboard介绍篇

    本次系列使用的所需部署包版本都使用的目前最新的或最新稳定版,安装包地址请到公众号内回复[K8s实战]获取 介绍 项目地址:https://github.com/coredns/coredns Core ...

  8. python应用-爬取猫眼电影top100

    import requests import re import json import time from requests.exceptions import RequestException d ...

  9. 基于Alpha-Beta剪枝的欢乐斗地主残局辅助

    2019年4月17日更新: 将搜索主函数优化为局部记忆化搜索,再次提高若干倍搜索速度 更新了main和player,helper无更新 #include "Player-v3.0.cpp&q ...

  10. mysql 架构篇系列 3 复制运行状态监控与选项参数说明

    一. 概述 在上一篇中,搭建了一主一从的复制架构,这篇通过一些诊断方法来了解复制的运行状态和一些选项参数说明.上次mysql主从服务关机,今天在打开mysql服务,出现了错误信息. 1.首先 启动主从 ...