网页导航栏 html + css的代码实现

一般来讲，我们的网页导航栏
是这么个模式来构建
在结构上：
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的代码实现的更多相关文章

sencha touch 模仿tabpanel导航栏TabBar的实现代码
这篇文章介绍了sencha touch 模仿tabpanel导航栏TabBar的实例代码,有需要的朋友可以参考一下基于sencha touch 2.2所写效果图: 代码: /* *模仿tabpan ...
jquery侧边折叠导航栏制作，两行代码搞定
jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...
iOS开发之 -- 判断tableview/scrollview的滑动方法,及导航栏渐变的实现代码
开发的过程中,肯定会用到在视图想上滑动的时候,在导航处做一些操作,比如向上滑动的时候,做个动画,出现一个搜索框,或者其他的操作,那么我们怎么来判断它的滑动方向呢? 首先我们应该知道tableview继 ...
<iOS 导航栏>第一节：导航栏透明方法实现代码
说下导航栏的透明方法: 很多应用需要导航栏随着向上滑动,逐渐从透明变成不透明,很炫酷,大部分应用都在使用导航栏渐变效果,现附上代码然后直接将实现,一会讲下如何来实现,这一部分直接上代码. ...
通栏导航栏的制作，综合使用CSS属性，代码不超过30行
这篇文章,小编带领大家一同做一个利用CSS技术实现的导航栏.通过这个导航栏的制作,希望大家能够对前几篇文章中学习到的CSS属性能有一个整体的认识,并能够达到灵活运用的程度. 承接文章:灵活控制块级元素 ...
如何使用css、布局横向导航栏
使用css布局横向导航栏,css应用给网页样式的方式,就相当于,给人怎么去穿上衣服,不同的衣服有不同的穿法,这里我们使用的是内联式.在这里我们可以适当的把值调的大一点,这样我们就可以很容易的对比. ...
第8天：CSS制作导航栏
今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...
【1-4】jQuery代码风格-导航栏
实现一个导航栏,单机不同的商品名称链接,显示相应的内容,同时高亮显示当前选择的商品. 实现功能如图: css: /* reset */ ;padding:0 0 12px 0;font-size:12 ...
CSS 导航栏
实例: 导航栏 Home News Articles Forum Contact About 导航栏熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜 ...

随机推荐

Java学习图
什么是JavaScript中的变量？部分2
变量:是计算机存储数据的标识符 js中存储数据的方式都是使用变量 js 中声明变量的方式都是var 存储数据,应该有对应的数据类型js中的字符串类型都用成对的单引号或者双引号包裹起来变量 1. 变 ...
Kubernetes集群搭建之CNI-Flanneld部署篇
本次系列使用的所需部署包版本都使用的目前最新的或最新稳定版,安装包地址请到公众号内回复[K8s实战]获取 Flannel是CoreOS提供用于解决Dokcer集群跨主机通讯的覆盖网络工具.它的主要思路 ...
H5在WebView上开发小结
背景来自我司业务方要求,需开发一款APP.但由于时间限制,只能采取套壳app方式,即原生app内嵌webview展示前端页面.本文主要记述JavaScript与原生app间通信,以及内嵌webvie ...
[P4886] 快递员
考虑在树上选个点rt作为根,并且快递中心就选这儿.计算出所有配送的代价(2*两段之和),设他们的最大值为Max.若此时存在下列情况时,可以判定Max已经为最优解. 1)存在代价为Max的配送(u,v) ...
Java的优点
前几天面试被问到:“Java的优点有哪些?”,当时只回答了跨平台和解释型两点,做的并不是太好,所以今天小编就总结一下Java的几大优点,增加自己的知识储备. 1.跨平台性: Java通过自带的JVM实 ...
VueJs(7)---计算属性和侦听器
计算属性和侦听器一. 概述计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="exampl ...
mysql 开发进阶篇系列 12 锁问题(隔离级别下锁的差异)
1. innodb在不同隔离级别下的一致性读及锁的差异不同的隔离级别下,innodb处理sql 时采用的一致性读策略和需要的锁是不同的,同时,数据恢复和复制机制的特点,也对一些sql的一致性读策略和 ...
Android--Menus
前言本篇博客讲解一下菜单Menu的使用.菜单在windows应用中使用十分广泛,几乎所有的windows应用都有菜单,Android中也加入了菜单的支持.从官方文档了解到,从Android3.0(A ...
Go实用开源库收集
框架 https://github.com/go-martini/martini 图形验证码 https://github.com/dchest/captcha ORM https://github. ...

网页导航栏 html + css的代码实现

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

随机推荐

热门专题