天猫商城前端总结(1)

最新推荐文章于 2024-06-24 14:08:38 发布

沈钢板

最新推荐文章于 2024-06-24 14:08:38 发布

阅读量428

点赞数

分类专栏：前端文章标签：学习总结

本文链接：https://blog.csdn.net/qq_16930699/article/details/84848860

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

代码

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
 
<nav class="top ">
        <a href="#nowhere">
            <span class="glyphicon glyphicon-home redColor"></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 redColor" ></span>
            购物车<strong>0</strong>件</a>       
        </span>
           
</nav>

访问出来的效果是在这里插入图片描述
基础概念总结
1、因为bootstrap用到了html5的特性，为了正常使用，需要在最开头加上 <!DOCTYPE html>
2、而如下代码的作用是为了使用Bootstrap的功能，必须要导入，顺序不要搞错了，否则有一些效果会出不来。
首先是JQuery
然后是Bootstrap css
最后是Bootstrap js

<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>

3、<a href="#nowhere">是超链接为以后的功能做准备
4、<span class="pull-right"> <span class=" glyphicon glyphicon-shopping-cart redColor" ></span> 是Bootstrap的一些定义可以显示出炫酷的效果。
5、<nav>元素可以用作页面导航的链接组，在导航链接组里面有很多的链接，点击每个链接可以链接到其他页面或者当前页面的其他部分，并不是所有的链接组都要被放在nav元素里面，我们只需要把最主要的、基本的、重要的放在nav元素里面即可。

沈钢板

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
天猫商城前端总结(1)

代码&lt;!DOCTYPE html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;&lt;script src="js/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;&lt;
复制链接

扫一扫

专栏目录