前端项目实战(梅兰商城)
2016-05-10 20:47
239 查看
前端项目步骤:
1.拿到美工设计图后,开始浏览页面布局,将页面简单划分出来
开发整站的两种方式:
①从上到下依次把每个盒子写完
②先把整站的布局给搞定,然后再把每个布局的盒子中的子元素补齐(模块化) 个人比较倾向
2.整站项目的目录结构搭建好:css js image index.html
3.css初始化:这里用的是YAHO的css初始化样式。地址为git@code.csdn.net:snippets/1678156.git
4.测量页面版心宽度及页面top部分(利用PS软件 标尺测量)
要想文字垂直方向上居中,就要将文字所在标签的line-height与容器的height相同。
版心:宽度为970px
5.精灵图:
其他名称:雪碧图,雪碧技术,css sprite
作用:用于将网站上的一些小的图片管理到一个大的图片中。
历史:最早的网速很慢,512kb/s。所以这个时候程序员为了提高用户的体验,将图片做得越小越好,但是这个存在一些缺点,就是每请求一张图片就要发送一条请求去服务器,消耗服务器的性能,后来网速得到提升以后为了减轻服务器的压力,所以将多张小图片合成一张大图来请求。
精灵图的制作:
1.0一定要是一些小图片(最好是不太会发生变化)
2.0精灵图在制作的时候宽度一定要大于最大的那张图片的宽度
3.0图片与图片之间必须要空隙
4.0在精灵图制作完成之后一定要将精灵图的下方留出足够的位置,用来方便将来进行扩展。
使用:在css文件中的相应标签中写 background:url(../image/sprite.png) 位移量(左移为负);
也可以通过background-position:0 0;来定位
6.logo:用h1标签,将图片写在css中,另外在h1标签中写上网站名,并写上
text-indent:-1000em;(使文字消失,规定文本块中首行文本的缩进,如果使用负值,就会缩进到左边)
这个文字的比例权重在这个网页中会较高,会放在搜索引擎的第一页,将来这个网站被人搜到的概率会较高,这是搜索引擎的优化。
1.拿到美工设计图后,开始浏览页面布局,将页面简单划分出来
开发整站的两种方式:
①从上到下依次把每个盒子写完
②先把整站的布局给搞定,然后再把每个布局的盒子中的子元素补齐(模块化) 个人比较倾向
2.整站项目的目录结构搭建好:css js image index.html
3.css初始化:这里用的是YAHO的css初始化样式。地址为git@code.csdn.net:snippets/1678156.git
4.测量页面版心宽度及页面top部分(利用PS软件 标尺测量)
要想文字垂直方向上居中,就要将文字所在标签的line-height与容器的height相同。
版心:宽度为970px
5.精灵图:
其他名称:雪碧图,雪碧技术,css sprite
作用:用于将网站上的一些小的图片管理到一个大的图片中。
历史:最早的网速很慢,512kb/s。所以这个时候程序员为了提高用户的体验,将图片做得越小越好,但是这个存在一些缺点,就是每请求一张图片就要发送一条请求去服务器,消耗服务器的性能,后来网速得到提升以后为了减轻服务器的压力,所以将多张小图片合成一张大图来请求。
精灵图的制作:
1.0一定要是一些小图片(最好是不太会发生变化)
2.0精灵图在制作的时候宽度一定要大于最大的那张图片的宽度
3.0图片与图片之间必须要空隙
4.0在精灵图制作完成之后一定要将精灵图的下方留出足够的位置,用来方便将来进行扩展。
使用:在css文件中的相应标签中写 background:url(../image/sprite.png) 位移量(左移为负);
也可以通过background-position:0 0;来定位
6.logo:用h1标签,将图片写在css中,另外在h1标签中写上网站名,并写上
text-indent:-1000em;(使文字消失,规定文本块中首行文本的缩进,如果使用负值,就会缩进到左边)
这个文字的比例权重在这个网页中会较高,会放在搜索引擎的第一页,将来这个网站被人搜到的概率会较高,这是搜索引擎的优化。
相关文章推荐
- html5 web数据存储
- SEO
- 异步流程控制:7 行代码学会 co 模块
- [译] React 入门
- 如何优雅处理前端异常?
- 前端jquery部分很精彩
- 深入探讨前端框架react
- Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
- 自己动手写的javascript前端等待控件
- 前端必备神器 Snap.svg 弹动效果
- 一张Web前端的思维导图分享
- 一道常被人轻视的web前端常见面试题(JS)
- 浅谈AngularJS--基础
- 浅谈AngularJS--域变量(scope)
- AngularJS' Internals In Depth(深入理解 AngularJS)
- 3ff8 javascript 获取Flash下载进度兼容IE, FireFox,Chrome浏览器
- CSS清除浮动常用方法小结
- window.external 的用法(收藏夹功能)
- document.all用法