关于电商网站项目的实践总结
一、置顶导航即页头(公共页面)
1、<nav>导航标签。可以更加明确的告诉搜索引擎,这部分内容,是用于导航的,帮助搜索引擎理解你的网页。
2、连续摆放的超链<a>和<span>。因为超链和span是内联元素,不会自动换行,所以这些会自动出现左侧,并且水平摆放。在右侧放了一个<span>, 这个<span>本身是飘在右侧的。
3、右侧<span>里,放了超链<a>和<span>,自动进行水平摆放。
纯html+css的导航效果及代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
4、使用Bootstrap主要是为了使用其中的字体图标,以及轮播和模态窗口效果。
1)向右飘逸定位使用Bootstrap的pull-right样式,其实这个样式很简单,就是使用的float:right. !important;表示高优先级。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.pull-right { float: right !important; }
导航效果图及代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
2)Bootstrap字体图标的用法:只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<span class="glyphicon glyphicon-search"></span>
导航效果图及代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
!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>
5、Bootstrap自带的样式风格并不是天猫的样式风格,并不能直接拿来使用。 所以使用最基本的CSS去实现天猫的效果。