css梅兰商城项目实战 传智博客

前端项目步骤：

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;(使文字消失，规定文本块中首行文本的缩进，如果使用负值，就会缩进到左边)

这个文字的比例权重在这个网页中会较高，会放在搜索引擎的第一页，将来这个网站被人搜到的概率会较高，这是搜索引擎的优化。

参考博客
https://blog.csdn.net/x_chengqq/article/details/51366428