how2j.cn


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

这就需要经验的积累了。

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

点击进入: 模仿天猫官网

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

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


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




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


最近10个提问
2018-11-12 怎么在java ee Eclipse 中写这个天猫前端的项目?
aying
怎么在java ee Eclipse 中写这个天猫前端的项目?




1 个答案

how2j 答案时间:2018-11-13
这是纯前端,怎么在 eclipse 写 html, 就怎么写它




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2018-11-08 下面5的小的div不在一行,而且文字显示也有问题
lulu111



为什么我按照老师的代码来敲,总是会出现不一样的效果呢?
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <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">
    <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <link href="footerTop.css" rel="stylesheet">
</head>
<body>
    <div style="display: block;" class="footer" id="footer">
        <div class="footer_ensure" id="footer_ensure">
            <a href="#nowhere">
                <img src="http://how2j.cn/tmall/img/site/ensure.png">
            </a>
        </div>

        <div class="footer_desc" id="footer_desc">
            <div class="descColumn">
                <span class="descColumnTitle">购物指南</span>
                <a href="#nowhere">免费注册</a>
                <a href="#nowhere">开通支付宝</a>
                <a href="#nowhere">支付宝充值</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">天猫保障</span>
                <a href="#nowhere">发票保障</a>
                <a href="#nowhere">售后规则</a>
                <a href="#nowhere">缺货赔付</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">支付方式</span>
                <a href="#nowhere">快捷支付</a>
                <a href="nowhere">信用卡</a>
                <a href="#nowhere">蚂蚁花呗</a>
                <a href="nowhere">货到付款</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">商家服务</span>
                <a href="#nowhere">商家入驻</a>
                <a href="#nowhere">商家中心</a>
                <a href="#nowhere">天猫智库</a>
                <a href="#nowhere">天猫规则</a>
                <a href="#nowhere">物流服务</a>
                <a href="#nowhere">喵言喵语</a>
                <a href="#nowhere">运营服务</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">手机天猫</span>
                <a href="nowhere">
                    <img src="http://how2j.cn/tmall/img/site/ma.png">
                </a>
            </div>
        </div>
        <div style="clear: both"></div>
    </div>
</body>
</html>

/*设置整个页脚*/
div.footer{
    /*设置外边距,为什么要设置外边距呢,因为这个是没有外边距的,也就是要和页面等宽*/
    margin: 0px 0px;
    /*因为在上面有一条横线,我们要设置这条横线*/
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #e7e7e7;
}
/*上面的图片*/
div.footer_ensure{
    /*设置上外边距,使其和上面的横线有一定的距离*/
    margin-top: 24px;
    /*设置下外边距,使其和下面的div有一定的距离*/
    margin-bottom: 24px;
    /*设置居中*/
    text-align: center;
}
/*设置放置五个小的div的大盒子*/
div.footer_desc{
    /*设置上面的横线*/
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #e7e7e7;
    /*设置上内边距,这样可以和横线拉开一定的距离*/
    padding-top: 30px;
    /*设置左右外边距,使其居中*/
    margin: 0px 20px;
}
/*设置五个小的div盒子*/
div.footer_desc div.descColumn{
    /*平均分成5个等份*/
    width: 20%;
    /*设置左浮动,因为这是块级元素,不浮动的话会自动换行*/
    float: left;
    /*设置左内边距,使其居中*/
    padding-left: 15px;
}
/*设置每个小盒子的标题*/
div.footer_desc div.descColumn span.descColumnTitle{
    /*设置字体,字体不用设置,用body上提供的字体就可以*/
    /*设置字体加粗*/
    font-weight: bold;
    /*设置字体颜色*/
    color: #646464;
    /*设置字体大小*/
    font-size: 16px;
}
/*设置下面的一个大盒子的a标签*/
div.footer_desc a{
    /*使其呈现块状元素,这样可以换行*/
    display: block;
    /*让每一个a标签距离上一个a标签都有一定的距离,设置上内边距*/
    padding-top: 3px;
}
/*设置整个body元素*/
body{
    font-size: 12px;
    font-family: Arial;
}
/*设置所有的a标签*/
a{
    color: #999;
}
/*设置鼠标悬停*/
a:hover{
    text-decoration: none;
    color: #C40000;
}

							


1 个答案

how2j 答案时间:2018-11-09
那就是代码不一样嘛 你这样,用diffmerge软件,进行文件夹比较。把你自己做的项目文件夹,和我的可运行项目文件夹进行比较 这个软件很牛逼的,可以知道文件夹里哪两个文件不对,而且很明显地标记出来 我这里就有下载和教程: http://how2j.cn/k/18/18-1583/1583.html




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-11-08 为什么我的图片和搜索栏的位置会重叠呢?
2018-11-01 是否可以去掉div.cartProductChangeNumberDiv input{display: inline-block;}
2018-11-01 图标问题
2018-10-30 交作业
2018-10-30 span问题
2018-10-30 我有一个问题
2018-10-29 交作业
2018-10-29 交作业




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

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

上传截图