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

工具版本兼容问题

13分7秒

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

本视频采用html5方式播放，如无法正常播放，请将浏览器升级至最新版本，推荐火狐，chrome，360浏览器。如果装有迅雷，播放视频呈现直接下载状态，请调整迅雷系统设置-基本设置-启动-监视全部浏览器 (去掉这个选项)。 chrome 的视频下载插件会影响播放，如 IDM 等，请关闭或者切换其他浏览器

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

步骤 1 :

效果

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

纠问

模仿天猫前端，单纯使用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 顶折

纠问

这是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 顶折

纠问

运行效果

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

<!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 顶折

纠问

点击进入样式详解

步骤 6 :

再整合在一起

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公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2021-04-03 用html+css写的

镜子里的笑脸

关于实践项目-天猫前端-置顶导航 -再整合在一起的提问

图标没有用bootstrap，因为做的是天猫网站，所以网站发现有个阿里巴巴矢量图标库Iconfont，里面有各种各样的图标，引用的方法类似，图标下载好后放入项目文件夹，<link rel="stylesheet" href="font/iconfont.css">引用，可以看我的代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>daohang</title>
    <link rel="stylesheet" href="font1/iconfont.css">
    <style>
        body{
            margin: 0px;
        }
        nav{
            background-color: #f2f2f2;
            padding:3px 150px 7px 130px;
            font-size: 12px;
            color: #999999;
        }
        .floatr{
            float:right !important;
        }
        .red{
            color:#c40000 !important;
        }
        a{
            text-decoration:none;
            color:#999999;
        }
        a:hover{
            color:#c40000;
        }
        .left{
            margin-left:20px
        }
    </style>
</head>
<body>
<nav>
    <a href="#">
        <span class="iconfont red">&#xe60f;</span>
    天猫首页
    </a>

    <span class="left">喵，欢迎来天猫</span>
    <a href="#" class="left">请登录</a>
    <a href="#" class="left">免费注册</a>

    <span class="floatr">
        <a href="#">我的订单</a>
        <a href="#" class="left"><span class="iconfont red">&#xe622;</span>
            购物车<b>0</b>件</a>
    </span>
</nav>
</body>
</html>

2 个答案

帅的惊动了联合国
答案时间：2021-04-23

请问引用的css文件可以详细解释一下吗，小白看不懂

镜子里的笑脸
答案时间：2021-04-03

也可以用ps做好图标来，不过需要会ps

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

2020-12-09 布局划分使用的软件好奇

少卿	关于实践项目-天猫前端-置顶导航的提问问题截图代码异常站长，想问一下你的这个划分布局的软件是什么啊

1 个答案

how2j
答案时间：2020-12-12

用的 edraw 觉得挺好用，推荐使用

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

2020-07-30 页面缩小就乱了啊

2020-06-30 bootstarp.min.css在项目里面但是样式没出来

Terminator⛏

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

bootstarp.min.css在项目里面但是样式没出来

<script src="../../wabapp/js/jquery.min.js"></script>
<link href="../../wabapp/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

2 个答案

moyu01
答案时间：2020-07-08

fonts是不是没有加进项目

how2j
答案时间：2020-07-01

不熟悉的时候，可以先使用现成的，而非自己修改： <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> 可以节约你很多时间。

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

2020-06-15 样式出不来

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 75 条以前的提问，请点击查看

提问之前请登陆

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

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

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

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

上传截图