天猫前端系列教材（六）- 公共页面

工具版本兼容问题

13分7秒

1.0 原速 1.25 倍速 1.5 倍速 1.75 倍速

本视频采用html5方式播放，如无法正常播放，请将浏览器升级至最新版本，推荐火狐，chrome，360浏览器如果装有迅雷，播放视频呈现直接下载状态，请调整迅雷系统设置-基本设置-启动-监视全部浏览器 (去掉这个选项)

步骤 1 : 效果
步骤 2 : 布局
步骤 3 : 纯html
步骤 4 : 加上样式
步骤 5 : 样式讲解
步骤 6 : 再整合在一起

步骤 1 :

效果

edit edit 顶折

纠问

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
 
<style>
body{
    font-size: 12px;
    font-family: Arial;
}
a{
    color:#999;
}
.redColor{
    color: #C40000 !important;
}
nav.top{
    background-color: #f2f2f2;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom:1px solid  #e7e7e7;
}
nav.top span, nav.top a{
    color: #999;
    margin: 0px 10px 0px 10px;
}
nav.top a:hover{
    color: #C40000;
    text-decoration: none;
}
</style>
 
<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. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
 
<style>
body{
    font-size: 12px;
    font-family: Arial;
}
a{
    color:#999;
}
.redColor{
    color: #C40000 !important;
}
nav.top{
    background-color: #f2f2f2;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom:1px solid  #e7e7e7;
}
nav.top span, nav.top a{
    color: #999;
    margin: 0px 10px 0px 10px;
}
nav.top a:hover{
    color: #C40000;
    text-decoration: none;
}
</style>
 
<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>

渲染中渲染完成

效果

步骤 2 :

布局

edit edit 顶折

纠问

模仿天猫前端，单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力，积累宝贵前端项目经验。总计28张页面布局分析图， 33个js交互代码讲解， 395个选择器，1150个样式（每个均有注释），涵盖全部68个知识点，267个学习步骤,包含一共21个讲解视频，累计时长11小时44分25秒，大小1.97G，为简历加上一个有吸引力的砝码。学习期间，遇到本项目任何问题，都可以得到我的专业指导。 (购买一次，即可访问天猫前端所有知识点)
增值内容，点击购买

最外面是nav元素，nav元素和div元素一样都是用来进行布局的。不同之处在于，nav可以更加明确的告诉搜索引擎，这部分内容，是用于导航的，帮助搜索引擎理解你的网页。

然后是连续摆放的超链和span，因为超链和span是内联元素，不会自动换行，所以这些会自动出现左侧，并且水平摆放。

然后是在右侧放了一个span，这个span本身是飘在右侧的。
span里放了超链和span，自动进行水平摆放。

步骤 3 :

纯html

edit edit 顶折

纠问

这是html的内容没有使用CSS的效果。

1. 为了使用图标，引入了Bootstrap和Jquery

2. 使用了Bootstrap之后，超链会发生变化
超链会变成浅蓝色，但是并不是天猫的颜色风格

3. 没有背景色和边框

4. 向右飘逸定位使用Bootstrap的pull-right样式，其实这个样式很简单，就是使用的float:right. !important;表示高优先级

.pull-right {
float: right !important;
}

不是说了纯HTML+CSS吗？为什么这就开始用Bootstrap了？
使用Bootstrap主要是为了使用其中的字体图标，以及轮播和模态窗口效果。可以看到Bootstrap自带的超链风格并不是天猫的样式风格，并不能直接拿来使用。所以接下来，还是会让大家掌握如何使用最基本的CSS去实现天猫的效果，这样才能锻炼硬功夫

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study../../../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. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 4 :

加上样式

edit edit 顶折

纠问

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
 
<style>
body{
    font-size: 12px;
    font-family: Arial;
}
a{
    color:#999;
}
.redColor{
    color: #C40000 !important;
}
nav.top{
    background-color: #f2f2f2;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom:1px solid  #e7e7e7;
}
nav.top span, nav.top a{
    color: #999;
    margin: 0px 10px 0px 10px;
}
nav.top a:hover{
    color: #C40000;
    text-decoration: none;
}
</style>
 
<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. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 5 :

样式讲解

edit edit 顶折

纠问

点击进入样式详解

步骤 6 :

再整合在一起

edit edit 顶折

纠问

等下同学们自己做的时候，就一点一点的把样式放上去，观察变化，确认每个样式的用处。

完了之后，再自己从零开始，不看答案设计一遍，做出来，就可以很好的把本知识点的内容消化掉了。

不要着急，慢工出细活，花这些时间是非常值得的

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
 
<style>
body{
    font-size: 12px;
    font-family: Arial;
}
a{
    color:#999;
}
.redColor{
    color: #C40000 !important;
}
nav.top{
    background-color: #f2f2f2;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom:1px solid  #e7e7e7;
}
nav.top span, nav.top a{
    color: #999;
    margin: 0px 10px 0px 10px;
}
nav.top a:hover{
    color: #C40000;
    text-decoration: none;
}
</style>
 
<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. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

天猫前端系列教材（五）- 公共页面 - 概念

天猫前端系列教材（七）- 公共页面 - 搜索栏

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于实践项目-天猫前端-置顶导航的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 982790551

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图