【how2j网站前端项目——天猫前端（第一次）学习笔记2】的更多相关文章

how2j网站前端项目——天猫前端（第一次）学习笔记1

首先是公共页面的学习,有页头.页脚和搜索框. 一.页头就是天猫网站的置顶导航栏: 看似简单,实际做起来也不容易. 写html还是比较简单的,撸起袖子就可以写完.可要想做到上图的样式就难了,难就难在CSS,有绝对定位.相对定位.浮动,背景颜色的选择,字体大小和颜色,这些我都是直接跟着站长的写.这里面用到了html5.jquery库.bootstrap框架.css. 写完纯html后,浏览器上的效果是这样的: 我自己尝试加上CSS后,效果是这样的: (这个是看过站长的代码后,再自己写出来的,第一次自…

how2j网站前端项目——天猫前端（第一次）学习笔记6

开始我的订单页面 学着学着,会觉得我这是在干啥呢?我要学的是Java不是吗?怎么要学这么久的前端啊?说实话,我很迷茫,不知道以后的工作具体是做什么?学的这些能用到吗? 不过,还是要把这个项目跟着走完!加油... 一.我的订单页面——简单的标题部分 自己模仿站长的样子做的,用了站长推荐的工具:屏幕标尺,好测量各个部分的宽度 二.我的订单页面——复杂的产品列表部分 根据站长的思路,自己先写了一份HTML5+CSS的,效果如下,大部分还是很满意的 旺旺的图片,站长是将一个大图片作为背景图片,然后进行裁…

how2j网站前端项目——天猫前端（第一次）学习笔记4

开始产品页面的学习.项目里面有900多种商品,但是每种商品的布局是一致的:1.产品图片 2.基本信息 3.产品详情 4.累计评价 5.交互.从第一个产品图片开始吧! 一.产品图片 产品图片用到了分类页面中学到的一个技术,就是鼠标悬停在某个图片上的时候,这个图片的边框会加粗,这是利用了加一层框架的技术,即在图片外面再加上一层div,这个div平时的时候边框的颜色就是背景颜色(白色),当鼠标悬停在图片上时,让这个外层div的边框显示为不同的颜色就行了. 自己编写玩HTML,再加上CSS样式后,产品图…

how2j网站前端项目——天猫前端（第一次）学习笔记3

开始学习分类页面! 站长介绍说,这个项目一共有17个分类页面,每个分类页面的风格都是相似的:由分类图片. 查询.各种排序方式,产品列表.内容很多,拆成3部分学习:1.排序和价格 2.产品列表 3.交互.学习的时候不要着急,不要急躁,不要急于求成,好了,开始吧. 一.排序和价格 纯html页面: 自己试着加上CSS样式: 看上去自己做的还行哈哈 二.产品列表 纯html的时候: 自己尝试加CSS样式,遇到了问题:当鼠标悬停在某个商品上时,要求边框变成红色,而且边框会加粗,自己采取了两种方式都没有成…

how2j网站前端项目——天猫前端（第一次）学习笔记2

今天早上开始首页内容.首页除了公共页面,还有许多自己的内容:导航和轮播.分类菜单.推荐产品展示,最后还有js的互动. 一.导航和轮播的学习 在自己做图片的轮播时,还是没有一次成功.存在了好几处问题: 问题1:在最外层的div中id没有写对,data-ride没有写对 最外层div中的id应该只写成carousel-of-product,自己多加了一个carousel 还有把data-ride写反了,写成了ride-data   问题2:在ol层中的li中,data-target没有写对 在cla…

how2j网站前端项目——天猫前端（第一次）学习笔记8

其他页面的学习 这些页面有1.查询结果页 2.支付页面 3.支付成功页面 4.确认收货页面上 5.确认收货页面下 6.收获成功页面 7.评价页面上 8.评价页面下 9.登陆页面 10.注册页面 1.查询结果页 站长说:查询结果页面和前面的分类页面是一样的,并且还要简单一些 2. 支付页面 很简单的一个页面(使用了站长推荐的屏幕取色和屏幕量尺工具,做起来得心应手): 3. 支付成功页面 4. 确认收货页面上 5. 确认收货页面下 6. 收获成功页面 7. 评价页面上 8. 评价页面下 9. 登陆页…

how2j网站前端项目——天猫前端（第一次）学习笔记7

开始学习结算页面 结算页面分为3个部分学习:1.简单的头部和收货地址 2.较为复杂的确认订单信息 3.交互 一.简单的头部和收货地址 根据站长的图片,自己模仿着做了一下,刚开始没有想到填写信息的4个框框可以用表格形式,思考了些时间,发现都不合适,然后突然发现可以用表格,一看站长的提示也是用表格.效果如下: 二.较为复杂的确认订单信息页面 模仿站长的例子写的纯Html页面: 尝试自己加上CSS样式: 三.交互 交互内容很简单,当用户点击留言框的时候,出现一个文本域.站长的代码如下: <script…

how2j网站前端项目——天猫前端（第一次）学习笔记5

收拾好心情,现在开始学习第5个页面——购物车页面! 一.结算按钮 这个还是比较简单的,我自己看着站长的样子模仿了一个: 有个地方不会做,就是全选前面的复选框,站长的框里面是白色的,我搞不来. 二.订单项内容 上面是借鉴了站长的布局思路,自己写的CSS样式,有个地方没有做好:1.每一个商品的订单没有垂直居中:我看站长的CSS代码,应该是这句: tr.cartProductItemTR td{ padding: 20px 20px; } 让表格的每一个单元格垂直居中了 2. 购买数量调节的地方,我是…

前端自动化构建工具 gulp 学习笔记 一、

一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构建工具. 基于流:应该就是他的语法方式有点像jquery 那样 如: $(".active").css("background":"red").addClass("default");像这样一直点点下去.前一个表达式的输出作为后一…

关于前端的photoshop初探的学习笔记

写在前边 这还是高三的时候暑假的时候学习这个软件时记的笔记呢,今天又在电脑上找到了它,总觉得不应该让他尘封在我的硬盘上,于是挂了出来.温馨提示:比较乱,写给自己看的,看不下去,按ctrl+W 笔记内容 ps简介可以用于合成.可以三维adobe bridge图像浏览器 可以直接将图片拖动到ps的编辑系统中..但是是出于临时文件状态,还需要对他进行保存..网站上某些图片不能够拉动,但是可以利用截图功能来实现..两张图片同时拉倒一个文件中构成两个不同的图层..打开文件的几种方法.. ps数码相片点阵图…

maven 一个简单项目 —— maven权威指南学习笔记（三）

目标: 对构建生命周期 (build  lifecycle),Maven仓库 (repositories),依赖管理 (dependency management)和项目对象模型 (Project Object Model)有一个基本的理解 目前不准备深入学习maven故此使用工具ideaj 来帮助学习, 用idea创建一个默认的maven工程,结构如下: 使用idea自带的工具运行maven命令的时候可能会遇到异常: -Dmaven.multiModuleProjectDirectory sy…

慕课网-前端JavaScrpt基础面试技巧-学习笔记

章节目录: JS基础知识(上)--讲解 JS 基础语法相关的面试题,分析原理以及解答方法.这一章节讲解了基础知识的第一部分:变量的类型和计算.以及JS "三座大山" -- 原型.作用域和异步中的第一座大山:原型. JS基础知识(中)--讲解 JS 基础语法相关的面试题,分析原理以及解答方法.这一章节讲解了JS "三座大山" -- 原型.作用域. JS基础知识(下)--讲解 JS 基础语法相关的面试题,分析原理以及解答方法.这一章节讲解了基础知识的第三部分:JS &q…

前端javascript框架之AngularJS学习笔记

<!doctype html><html lang="en" ng-app><head><meta charset="utf-8"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script src="angular.js"></scr…

前端javascript框架之BackboneJS学习笔记

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script src="http://documentcloud.github.com/underscore/underscore-m…

python之 前端HTML/CSS基础知识学习笔记

1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head> <title>...</title>…

网页前端状态管理库Redux学习笔记（一）

最近在博客园上看到关于redux的博文,于是去了解了一下. 这个Js库的思路还是很好的,禁止随意修改状态,只能通过触发事件来修改.中文文档在这里. 前面都很顺利,但是看到异步章节,感觉关于异步说得很乱,而且必须配合插件才能实现异步.我是不喜欢用插件的人,能不用则不用.因此自己写了一个异步解决方案.大致的思路如下: 只在一个函数doSometing中处理异步方法和处理返回值,使用action传递执行类型参数 需要执行异步方法时,使用action传递参数,指示函数执行异步,然后返回特定状态,例如字符…

Java后台及Jsp前端的简单分页_学习笔记

在你需要导出显示大量列表时,在一页中都显示出来,是不美观页不实用的.在这种时候,就需要设置一个分页来显示你的内容,如百度的分页: 分页分为:前段分页和后端分页 后端分页: 首先我们应该确定,我们要分页,都需要从哪得到哪些数据: Page<T>类 在Servlet中得到: int pageNumber   //当前页码 , 该数据在Servlet中获取 int pageSize      //每页显示的条数 , 在Servlet中指定 后期计算得到: int index        // 分页…

Linux 第一次学习笔记

一.Linux 为何物 Linux 就是一个操作系统,就像你多少已经了解的 Windows(xp,7,8)和 Max OS ,至于操作系统是什么,就不用过多解释了,如果你学习过前面的入门课程,应该会有个基本概念了,这里简单介绍下操作系统在整个计算机系统中的角色. 我们的 Linux 也就是系统调用和内核那两层,当然直观的来看,我们使用的操作系统还包含一些在其上运行的应用程序,比如文本编辑器,浏览器,电子邮件. 二.Linux 重要人物 1.Ken Thompson:C 语言之父和 UNIX 之父…

IT项目经理-成长手记学习笔记

无论多难,都要记住一点,只要别人不赶你走,你就厚着脸皮待下去,这样你才有可能熬到项目成功. 项目经理要管事,更要管人. 项目计划->职责分工->确定项目范围 遇事及时处理,当场处理,处理错了也比不处理好. 几个绩效指标: 计划价值PV(Planned Value) 实际成本AC(Actual Cost) 挣值EV(Earned Value) 进度偏差(Schedule Variance)SV=EV-PV 成本偏差(Cost Variance)CV=EV-AC 进度绩效指数(Schedule P…

如何打造一个"逼格"的web前端项目

最近利用空余的时间(坐公交车看教程视频),重新了解了前后端分离,前端工程化等概念学习,思考如何打造一个“逼格”的web前端项目. 前端准备篇 前端代码规范:制定前端开发代码规范文档. PS:重中之中,为了下一步实现前端工程化. 编码风格有很多.团队代码规范一定要统一.便于维护web项目.     接口文档规范:制定RESTful架构接口规范文档. PS:果断使用用apiDoc构建API文档.美观好看,易于维护. 还用Word或者Excel写文档,太low了. 前后端分离:简单理解为前端代码不影响…

［360前端星计划］BlackJack(21点)（纯JS,附总部学习笔记）

［360前端星计划］总部学习笔记(6/6) ［360前端星计划］详情跳转 游戏界面预览 目录 一.游戏介绍 1.起源 2.规则 3.技巧 二.游戏设计 1.整体UI构思 2.素材采集 3.游戏总规划 三.代码实现 0.编码规范以及优化记录 1.HTML文档结构 2.CSS布局与动画 3.JavaScript功能模块 四.游戏测试(以下所列皆可正常运行游戏) 1.PC端 2.移动端 五.番外篇 致谢 版权 一.游戏介绍 1.起源     21点又名黑杰克(英文:Blackjack) ,起源于法国,…

SpringBoot学习笔记（三）——Springboot配置文件

SpringBoot不像之前用spring+springMVC做项目的时候,他不需要配置大量的看上去很乱很复杂的xml配置文件.在SpringBoot中你可以通过java代码和注解配置项目,也可以通过简单的几个配置文件来配置项目. 这篇学习笔记只记录下配置文件的使用,至于用java代码配置的内容下次再写. SpringBoot配置文件 spring的配置文件有两种格式: 1.application.properties 2.application.yml 这两种文件可以选择一种来当作你项目的配置…

基于云原生DevOps服务自动化部署前端项目学习总结

本文主要以部署前端Vue项目为例,讲述了如何基于云原生DevOps服务自动化部署前端项目~从开发完成到线上环境,我们只需提交代码即可~ 一.引言 作为一名开发人员,日常工作中我们除了需要负责代码的开发外,通常还需要负责代码的部署,运维等工作.而在传统的手工部署方法中,在每次版本迭代或需求变更完成后,除了将代码提交到代码仓库外,如果需要更新线上环境,我们还需要重复本地构建打包.连接远程服务器.上传代码到服务器指定目录等步骤.这些步骤虽然简单,但是通常耗时耗力,若同时存在多个环境时,也容易引起部署错…

基于vue+springboot+docker网站搭建【五】部署vue前端项目

部署vue前端项目  一.下载项目到本地   https://github.com/macrozheng/mall-admin-web 二.npm install 三.修改api配置,改为你接下来要部署的后台项目的ip:port 四.编译打包 五.部署 蒋dist文件夹压缩成 dist.tar.gz 安装远程复制工具 yum -y install lrzsz 进入nginx文件夹:cd mydata/nginx/ 执行拷贝命令将本地dist文件拷贝到 nginx文件夹下:rz 解压:tar -z…

CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加…

前后端分离之前端项目构建（grunt+require+angular）

前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务端同学那里修改代码,维护成本高,卖力不讨好＝＝ 工作了这么久,深深的感受到了那句名言的魅力,时间就是金钱呀!后来我发现,现在的web开发,谁还用这种低级的方法,大家都已经开始搞前后端分离了! 前后端分离的目的和作用 要弄清前后端分离的目的和作用,首先要知道什么是前后端分离. 现在的web前端越来越偏…

使用gulp来构建一个前端项目

什么是gulp? gulp是一个前端项目构建工具,是自动化项目的构建利器,它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成.你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片等等. 我看了很多网上的资料,目前最流行的两种使用JavaScript开发的构建工具是Grunt和Gulp.而grunt多用在文件较多,逻辑复杂的项目构建,如果只是用来管理小项目的话,gulp方便快捷,是最适合不过的了.…

前端html与css学习笔记总结篇(超详细)

第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的html5抢占移动端的市场 自己创业做老板 随着互联网的普及web开发成为企业的宠儿和核心 web职业发展目标: 第一.梳理知识架构 负责内容的HTML 负责外观的css(层叠样式表) 负责行为的js ps切图 第二.分解目标(起步阶段.提升阶段.成型阶段) 起步阶段: 基本知识的掌握 常用工具的掌…

初学者应该怎么学习前端？web前端的发展路线大剖析！

写在最前: 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性.组件的易用性.分层语义模板和浏览器分级支持等. 前端工程师至少都要满足四类客户的需求: 1.产品经理. 这些是负责策划应用程序的一群人.他们会想出很多新鲜的.奇怪的.甚至是不可能实现的应用.一般来说,产品经理都追求丰富的功能. 2.UI设计…

[Vue 牛刀小试]：第十七章 - 优化 Vue CLI 3 构建的前端项目模板（1）- 基础项目模板介绍

一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习惯进行调整.因此在后面几章的学习中,我将会在整个项目基础上,按照自己的需求进行修改设定. PS:因为毕竟自己还是传统意义上的后端开发,所以这里最终搭建完成的前端项目模板,其实是按照 PanJiaChen 开源的 vue-admin-template 模板进行修改仿写,所以你可以把这个系列后续的文章当…