• 欢迎光临~

关于电商网站项目的实践总结

开发技术 开发技术 2022-07-19 次浏览

一、置顶导航即页头(公共页面)

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去实现天猫的效果。

 

程序员灯塔
转载请注明原文链接:关于电商网站项目的实践总结
喜欢 (0)