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

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

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

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

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

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

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

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

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

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