how2j.cn


工具版本兼容问题
因为模仿天猫前端主要是界面部分的学习,所以在一开始就会给出实际运行的效果,根据观察到的实际运行效果,自己尝试完成, 完成过程中会出现问题,或者思路堵着了,不知道该如何下手
这个时候,再看样式详解,是如何布局,如何处理细节问题
最后,再自己从头到尾做一遍,把这些知识,技巧转换为自己的,这样就能有效的吸收和掌握



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

步骤 1 : 界面效果   
步骤 2 : 布局   
步骤 3 : HTML部分   
步骤 4 : 样式详解   
步骤 5 : 套用和取消全部样式   
步骤 6 : 切换某个选择器   
步骤 7 : 切换某个选择器的一条样式   
步骤 8 : 动态套用样式   
步骤 9 : 练习模式   
步骤 10 : 基于空白页从头练习   

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

根据这样一个截图,学员可以尝试自己完成。

完成不了也没有关系,自己写一遍就会有很多问题,带着这些问题,学习后面的步骤,收获会更大。
界面效果
<!DOCTYPE html> <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" rel="stylesheet"> <script src="http://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; } </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="forebought">我的订单</a> <a href="forecart"> <span class=" glyphicon glyphicon-shopping-cart redColor" ></span> 购物车<strong>0</strong>件</a> </span> </nav>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
接着是分析布局,只有清楚布局的基础上,才能头脑清楚的设计出希望的目标页面出来。
布局
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
然后是html部分,html本身是充当内容的角色的,没有样式,完全是HTML 代码。

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

本学习模块推出了独有的样式详解功能,在这个功能的辅助下,每个样式的效果和作用会非常立竿见影的表现出来,极大的提高学习的效率和效果

下面是截图,对应的实际功能 进入样式详解
样式详解
步骤 5 :

套用和取消全部样式

edit
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
进入样式详解的学习页面后,首先看到的是套用和取消全部样式
并且在下方的运行效果里看到的是没有样式的html效果。
一旦点击套用全部样式,立马就可以看到拥有样式的界面效果
然后点击取消全部样式,恢复成没有样式的html效果。
套用和取消全部样式
步骤 6 :

切换某个选择器

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

切换某个选择器的一条样式

edit
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
有的时候,一个选择器带来的效果也是比较复杂的。
那么可以点击每个选择器中的不同样式,进行切换,从而达到逐一观察每一个样式的效果,而达到立竿见影的学习效果。
(灰色表示未使用,绿色表示已使用)
切换某个选择器的一条样式
步骤 8 :

动态套用样式

edit
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
另一个强大的功能是动态套用样式。一旦点击此按钮,就会从第一个选择器开始,每隔1000毫秒,不断追加样式,右侧不断地显示样式作用于页面上的进化过程, 通过观察样式对于页面的演进作用,对于整体的理解是非常有帮助的
动态套用样式
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
接下来可以进入练习模式,在练习模式中右侧是html效果
左侧是基于已经存在的选择器,自己编写的样式,参考原样式,自己编写样式,右侧立马刷新编写后的效果。
通过这种方式,可以非常高效率的练习在本知识点所用到的样式
练习模式
步骤 10 :

基于空白页从头练习

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

那么在基于空白页从头练起这里,准备了一个已经导入了jquery,bootstrap的js和样式,<script> <style> 标签都准备好了
甚至准备了一个<div>从空白页开始</div>。

接下来就是你大展拳脚的时候到了
基于空白页从头练习


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


问答区域    
2019-06-23 超链悬停处的text-decoration: none;不起作用,需要放到nav.top a中
铁锅炖猪脚




1 个答案

how2j 答案时间:2019-06-24
多半是因为优先级的原因造成的吧



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2019-06-23 鼠标悬停
铁锅炖猪脚



问题来了,我该如何精准的设置仅作用于购物车 复合选择器0.0
nav.top a:hover{  			/* 问题来了,我该如何精准的设置仅作用于购物车 */
				color: yellow;
				/* 当鼠标移动到超链上的时候,颜色变为天猫红 */
				#C40000 text-decoration: none;
				/* 去掉下划线 */
			}

							


1 个答案

how2j 答案时间:2019-06-24
加个优先级试试吧 !important



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-09-24 请问nav.top a:hover 和nav a:hover有区别吗?
2018-09-23 代码重复了
2018-04-22 实践项目-天猫前端-学习思路
2017-07-05 你们招不招前端
2016-10-19 能不能把文件名说清楚啊,要不然很不方便的,这个网站如果注意一下细节就完美了




提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 实践项目-天猫前端-学习思路 的提问

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

上传截图