一、置顶导航即页头（公共页面）
1、<nav>导航标签。可以更加明确的告诉搜索引擎，这部分内容，是用于导航的，帮助搜索引擎理解你的网页。
2、连续摆放的超链<a>和<span>。因为超链和span是内联元素，不会自动换行，所以这些会自动出现左侧，并且水平摆放。在右侧放了一个<span>， 这个<span>本身是飘在右侧的。
3、右侧<span>里，放了超链<a>和<span>，自动进行水平摆放。
纯html+css的导航效果及代码如下：
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!--为了使用图标，引入了Bootstrap和Jquery--> <title>仿天猫购物网站</title> </head> <nav> <a href="nowhere">图表+天猫首页</a> <span>喵，欢迎来天猫</span> <a href="nowhere">请登录</a> <a href="nowhere">免费注册</a> <span style="float:right"> <a href="nowhere">我的订单</a> <a href="nowhere">图标+购物车0件</a> </span> </nav>
View Code
4、使用Bootstrap主要是为了使用其中的字体图标，以及轮播和模态窗口效果。
1）向右飘逸定位使用Bootstrap的pull-right样式，其实这个样式很简单，就是使用的float:right. !important;表示高优先级。
.pull-right {
float: right !important;
}
View Code
导航效果图及代码如下：
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!--为了使用图标，引入了Bootstrap和Jquery--> <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <title>仿天猫购物网站</title> </head> <nav> <a href="nowhere">图表+天猫首页</a> <span>喵，欢迎来天猫</span> <a href="nowhere">请登录</a> <a href="nowhere">免费注册</a> <span class="pull-right"> <a href="nowhere">我的订单</a> <a href="nowhere">图标+购物车0件</a> </span> </nav>
View Code
2）Bootstrap字体图标的用法：只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。
<span class="glyphicon glyphicon-search"></span>
View Code
导航效果图及代码如下：
!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--为了使用图标，引入了Bootstrap和Jquery-->
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<title>仿天猫购物网站</title>
</head>
<nav>
<a href="nowhere">
<span class="glyphicon glyphicon-home"></span>天猫首页
</a>
<span>喵，欢迎来天猫</span>
<a href="nowhere">请登录</a>
<a href="nowhere">免费注册</a>
<span class="pull-right">
<a href="nowhere">我的订单</a>
<a href="nowhere">
<span class="glyphicon glyphicon-shopping-cart"></span>购物车<strong>0</strong>件
</a>
</span>
</nav>
View Code
5、Bootstrap自带的样式风格并不是天猫的样式风格，并不能直接拿来使用。 所以使用最基本的CSS去实现天猫的效果。
原创文章，作者：506227337，如若转载，请注明出处：https://blog.ytso.com/275526.html