how2j.cn


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

这就需要经验的积累了。

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

点击进入: 模仿天猫官网

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

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



7分56秒
本视频采用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 我做的,感觉还行
2021-04-03 用html+css写的
2021-03-28 如何做到实时更新
2021-03-27 用户体验不好
2021-03-16 使用添加复选框伪元素的方式替代红勾图片
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

上传截图