一般来讲，我们的网页导航栏
是这么个模式来构建
在结构上：
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. 每天学点SpringCloud（四）：Feign的使用及自定义配置

    Feign:SpringCloud的官网对它的定义是这样的: 是一个声明式的Web服务客户端.它支持Feign本身的注解.JAX-RS注解以及SpringMVC的注解.Spring Cloud集成Ri ...

  2. 客户端ip获取蹲坑启示： 不要侥幸

    怎么获取一个客户端ip ? 我想这个问题,在网上遍地都是答案! 而且多半是像下面这样: public static String getIpAddress(HttpServletRequest req ...

  3. 机器学习入门04 - 使用TensorFlow的起始步骤 (First Steps with TensorFlow)

    原文链接:https://developers.google.com/machine-learning/crash-course/first-steps-with-tensorflow/ 1- 工具包 ...

  4. python的函数学习2

    名称空间 用来存放名字的地方,有三种名称空间:内置名称空间,全局名称空间,局部名称空间. 比如执行test.py: python test.py .python解释器先启动,因而首先加载内置名称空间 ...

  5. 【ABP杂烩】面向切面编程(AOP)知识总结

    目录 1.存在问题 2.AOP的概念 3.AOP应用范围 3.AOP实现方式 4.应用举例 5.结束语 本文在学习[老张的哲学]系列文章AOP相关章节后,自己归纳总结的笔记. 1.存在问题 最近,其它 ...

  6. selenium之 玩转鼠标键盘操作（ActionChains）

    用selenium做自动化,有时候会遇到需要模拟鼠标操作才能进行的情况,比如单击.双击.点击鼠标右键.拖拽等等.而selenium给我们提供了一个类来处理这类事件——ActionChains sele ...

  7. EL表达式jsp页面double小数点后保留两位

    EL表达式jsp页面double小数点后保留两位,四舍五入 <fmt:formatNumber type="number" value="${member.logi ...

  8. 一个前端开发者换电脑的过程（git篇）

    一,安装git. 要安装git,首先得把它下载下来.去到git官网. 现在开始安装. 讲真,这些东西哪些要勾哪些不要勾我也不清楚,所以全部都按默认的来,一路next. 现在再打开vscode的终端,发 ...

  9. python的pyspider框架下爬虫

    1.将框架下载好之后,控制台运行pyspider 2.浏览器打开http://localhost:5000 3.创建项目 页面区域介绍: 整个页面分为两栏,左边是爬取页面预览区域,右边是代码编写区域. ...

  10. Linux常用命令之文件和目录处理命令

    目录 1.Linux命令的普遍语法格式 2.目录处理命令 一.显示目录文件命令:ls 二.创建目录命令:mkdir 三.切换目录命令:cd 四.shell内置命令和外部命令的区别 五.显示当前目录命令 ...