一般来讲，我们的网页导航栏
是这么个模式来构建
在结构上：
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. java中this的N种使用方法

    this可能是几乎所有有一点面向对象思想的语言都会引用到的变量,java自然不例外.只是,this有多少种用法,我也不知道了,让我们来see see. 由简入奢! 易. 来个例子说明下: public ...

  2. Spring Boot 2.x 启动全过程源码分析（上）入口类剖析

    Spring Boot 的应用教程我们已经分享过很多了,今天来通过源码来分析下它的启动过程,探究下 Spring Boot 为什么这么简便的奥秘. 本篇基于 Spring Boot 2.0.3 版本进 ...

  3. MacOS下命令行安装神器brew

    1.安装brew:/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/mast ...

  4. 基于Mono和VSCode打造轻量级跨平台IDE

      近期Visual Studio推出Mac版本号的消息迅速在技术圈里刷屏,当project师们最喜欢的笔记本电脑Mac,邂逅地球上最强大的集成开发环境Visual Studio的时候,会碰撞出如何精 ...

  5. Java核心技术及面试指南 面向对象部分的面试题总结以及答案

    问题2.7.1,开放性问题,说一下你对面向对象思想的了解. 要点1,先说基础概念,比如面向对象思想包括封装.继承.多态,然后说些语法,比如可以通过extends继承类.通过implement来实现接口 ...

  6. springBoot(9)---定时任务,异步任务

    定时任务,异步任务 一.定时任务 1.步骤: 1:在启动类上写@EnableScheduling注解 2:在要定时任务的类上写@component 3:在要定时执行的方法上写@Scheduled(fi ...

  7. Java多线程之一

    进程与线程 进程 进程是进程实体的运行过程,是系统进行资源分配和调度的一个独立单位,比如我们windows电脑上运行的一个程序就是一个进程.在传统进程中进程是资源分配和调度的一个基本单位,在后来引入线 ...

  8. Set存储元素为啥是唯一的(以HashSet为例源码分析)

    本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作,如有错误之处忘不吝批评指正! 说些废话 以前面试的时候会遇到有人问Set 和list的区别 这个很好答,但 ...

  9. SpringBoot 配置文件application.properties

    # =================================================================== # COMMON SPRING BOOT PROPERTIE ...

  10. leetcode — text-justification

    import java.util.ArrayList; import java.util.Arrays; import java.util.List; /** * * Source : https:/ ...