天猫前端系列教材（一）- 基础 - 前端练手项目-先定一个小目标，做他一个天猫官网

工具版本兼容问题

学习完了前端的HTML CSS JavaScript等各项技术之后，会有一个感慨，各个知识点分开都不难，但是要做出一个成型的，好看的，时尚的网页，就无从下手。

这就需要经验的积累了。

本项目是一个十分接近天猫官网的网站

点击进入: 模仿天猫官网

本项目90%的内容是由纯 Html CSS和JQuery完成，你可以学习到如何使用最原本的html和css完成天猫这样量级的前端效果。

学习本项目过程中，能够学习到如何考虑布局，细节怎么处理，积累宝贵的前端项目经验。
面试的时候，多一项谈资，多一层砝码，多一些薪水

纠

7分56秒

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

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

天猫前端系列教材（二）- 基础 - 前端页面一览

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

最近10个提问

2021-04-05 上面这一栏没有用图片做了一下

镜子里的笑脸

关于实践项目-天猫前端-页脚一 -再整合在一起的提问

用了position

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的天猫</title>
    <link rel="stylesheet" href="font1/iconfont.css">
    <style>
        div.d1{
            text-align: center;
            border-bottom: solid #999999 1px;
            padding-bottom:70px
        }
        .red{
            color: #c40000;
            font-size:60px;
        }
        .p1{
            position: absolute;
            top:5px;
        }
        .p2{
            position: absolute;
            top:5px;
            left:387px;
        }
        .p3{
            position: absolute;
            top:5px;
            left:655px;
        }
        .p4{
            position: absolute;
            top:5px;
            left:930px;
        }
        div.d2{
            display: inline-block;
            margin:7px 24px 0px 62px;
            border-right: solid #999999 1px;
            padding-right: 20px;
            text-align: left;
        }
        div.d2 span{
            display:block;
            color: #999999;
            padding-top:3px;
        }
    </style>
</head>
<body>
<div class="d1">
<span class="iconfont red p1">&#xe604;</span>
<div class="d2">
<b>品质保障</b>
<span>品质护航 购物无忧</span>
</div>
<span class="iconfont red p2">&#xe603;</span>
<div class="d2">
    <b>七天无理由退换货</b>
    <span>为您提供售后无忧保障</span>
</div>
<span class="iconfont red p3">&#xe602;</span>
<div class="d2">
    <b>特色服务体验</b>
    <span>为您呈现不一样的服务</span>
</div>
<span class="iconfont red p4">&#xe605;</span>
<div class="d2" style="border-right: none">
    <b>帮助中心</b>
    <span>您的购物指南</span>
</div>
</div>
</body>
</html>

1 个答案

how2j
答案时间：2021-04-09

牛p ,666

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

2021-04-05 我做的

镜子里的笑脸

关于实践项目-天猫前端-简单搜索栏 -再整合在一起的提问

图标没有用图片，用的是阿里巴巴矢量图库，搜索天猫找到的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的天猫</title>
    <link rel="stylesheet" href="font1/iconfont.css">
    <style>
        body{
            width:87%;
        }
        .red{
            color: #c40000;
            font-size:30px;
            position: absolute;
            top:50px;
            left:130px;
        }
        div.d1{
            float:right;
            background-color: #c40000;
        }
        div.d2{
            background-color:white;
            color: #999999;
        }
        div.d2 a{
            color: #999999;
            text-decoration:none;
            font-size: 14px;
        }
        div.d2 span{
            margin:0px 20px;
            font-size:12px;
        }
        div.d2 a:hover{
            color: #c40000;
        }
        input{
            width:230px;
            border:solid #c40000 3px;
            border-radius:5px;
            padding:10px 3px;
            outline:none;
        }
        button{
            width:65px;
            background-color: #c40000;
            border: none;
            color: white;
            font-size: 14px;
            padding-left:0px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<span class="iconfont red">&#xe7c5;</span>
<div class="d1">
    <input type="text" placeholder="平衡车 原汁机">
    <button>搜天猫</button>
    <div class="d2">
        <a href="#">冰箱</a>
        <span>|</span>
        <a href="#">空调</a>
        <span>|</span>
        <a href="#">女表</a>
        <span>|</span>
        <a href="#">男表</a>
    </div>
</div>
</body>
</html>

1 个答案

how2j
答案时间：2021-04-09

厉害，赞！

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

2021-04-03 我做的，感觉还行

镜子里的笑脸

关于实践项目-天猫前端-搜索栏 -再整合在一起的提问

主要问题就是那个搜索框和搜索按钮卡了好久，一开始总是有一些缝隙，不知道怎么解决，看了答案以后才知道把div的背景全部弄红

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的天猫</title>
    <style>
        img{
            position: absolute;
            left:80px;
            top:30px;
            z-index:-1;
        }
        div.d1{
            width:400px;
            margin:auto;
            margin-top:80px;
            background-color:#c40000;
        }
        input{
            width:270px;
            padding:10px 2px;
            border: solid #c40000 2px;
            color:#919191;
            border-right:none;
        }
        button{
            width:120px;
            background-color:#c40000;
            border:none;
            color: white;
            font-size:20px;
            font-weight:bold;
            padding-left:0px;
            cursor: pointer;
        }
        div.d2{
            width:400px;
            margin: auto;
            padding-top: 2px;
        }
        div.d2 a{
            color: #999999;
            text-decoration: none;
            font-size:14px;
        }
        div.d2 a:hover{
            color:#c40000;
        }
        span{
            padding:0 20px;
            color: #999999;
            font-size: 12px;
            font-weight: bold;
        }
    </style>
</head>
<style>
</style>
<body>
<a href="#"><img src="logo.gif"></a>
<div class="d1">
    <input type="text" placeholder="时尚男鞋 太阳镜">
    <button>搜索</button></div>
<div class="d2">
    <a href="#">平衡车</a>
    <span>|</span>
    <a href="#">扫地机器人</a>
    <span>|</span>
    <a href="#">原汁机</a>
    <span>|</span>
    <a href="#">冰箱</a>
</div>
</body>
</html>

1 个答案

how2j
答案时间：2021-04-09

不错不错，/鼓掌

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

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>

1 个答案

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

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

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

2021-03-28 如何做到实时更新

香芋

关于实践项目-天猫前端-交互的提问

就是说，在输入beginPrice后，下边的商品列表能够实时展示出来大于beginPrice的商品。我这样做的似乎不太行，可能是我想简单了吧。。。

if (!isNaN(begin) && !isNaN(end)) {
                    $("div.productUnit").hide();
                    $("div.productUnit").each(function () {
                        let price = $(this).attr("price");
                        price = Number(price);
                        if (price <= end && price >= begin) {
                            $(this).show();
                        }
                    });
                }
                if (isNaN(begin) && !isNaN(end)) {
                    $("div.productUnit").hide();
                    $("div.productUnit").each(function () {
                        let price = $(this).attr("price");
                        price = Number(price);
                        if (price <= end) {
                            $(this).show();
                        }
                    });
                }
                if (!isNaN(begin) && isNaN(end)) {
                    $("div.productUnit").hide();
                    $("div.productUnit").each(function () {
                        let price = $(this).attr("price");
                        price = Number(price);
                        if (price >= begin) {
                            $(this).show();
                        }
                    });
                }

1 个答案

how2j
答案时间：2021-04-03

现在不就是嘛，把结束价格修改成超级大就行了

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

2021-03-27 用户体验不好

2021-03-16 使用添加复选框伪元素的方式替代红勾图片

YorihimeN

关于实践项目-天猫前端-结算按钮的提问

天猫的红色大勾勾应该是使用复选框的伪元素形式添加的，我自己实现了一下，站长看看可不可行。

<style>
    /* 当复选框被选中后添加伪元素::before */
    input:checked::before {
        /* \2714 是一个勾 */
        content: "\2714";
        font-size: 16px;
        font-weight: bolder;
        color: red;
        /* line-height调整伪元素中的勾显示高度 */
        line-height: 10px;
        /* 将伪元素设置为块级，复选框被选中后让伪元素的白色背景将复选框覆盖掉 */
        display: block;
        width: 13px;
        height: 13px;
        border: 1px black solid;
        background-color: white;
    }
</style>

<label for="checkbox1"><input type="checkbox" name="" id="checkbox1"></label>

1 个答案

how2j
答案时间：2021-03-20

嗯，nice!

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

2021-03-13 站长，最近在一直模仿学习你的项目，在学习开发的过程中，可以把代码放到代码管理网站上吗？

2021-03-10 有什么办法可以让这个按钮居中，不用绝对定位的话

2021-03-08 站长，自己模仿着你的开发过程写的项目然后把代码放在码云上可以吗

提问之前请登陆

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

关于实践项目-天猫前端-项目简介的提问

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

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

上传截图