河南火焰山网站开发禹,查询证书网站建设,产品市场推广方案范文,中小企业网站制作费用是多少?前些日子仿了优酷的首页#xff0c;中间遇到一些问题#xff0c;积累了点经验#xff0c;做个总结。1. 需要最先明白的两点 不要只是无脑的切图#xff0c;要去体会设计师的意图#xff0c;不仅仅是还原设计稿#xff0c;而且要尽可能去还原设计师的设计理念。切图的时候… 前些日子仿了优酷的首页中间遇到一些问题积累了点经验做个总结。 1. 需要最先明白的两点 不要只是无脑的切图要去体会设计师的意图不仅仅是还原设计稿而且要尽可能去还原设计师的设计理念。 切图的时候就提前想好需求可能会有变化这要求我们提前做点工作减少需求变化时的工作量一般是提取页面中的公共组件。如何提取公共组件可以参考《编写高质量代码》。 2. 流程 仔细看PSD文件复杂些的PSD图起码先看3个小时吧。看不好的话后面推倒重来简直麻烦死看PSD的时候主要是注意三个地方 1. 确认好骨架设计比如主要的布局方式是浮动啊普通流啊还是绝对定位啊等等分层设计并赋予相应的z-index值可以在FW里标注上。骨架设计好之后写出整理骨架的代码。 2. 提取共有的组件一方面可以减少工作量另一方面使得CSS文件的弹性更好更好的应对需求的变化。提取组件的原则是模块与模块与模块之间尽量不要包含相同的部分如果有相同的部分尽量提取出来做成一个独立的模块。为了方便重用每一个模块的结构都不应该太复杂。并且模块不应该太多在模块尽可能少的原则下做到尽可能简单提高重用性。 3. 全局样式比如字体样式链接样式等这样就不用见到一个字体就写一个样式了。 开始切图了一次把图切完最省事。某些图标需要用雪碧图合成减少HTTP请求。 从页首开始做完全做完不要留下一部分等到最后在做一部分之后测试。 开始测量的时候骨架部分长宽间距背景颜色可以尝试使用马克鳗来测量标注比FW方便。具体细节比如文字颜色种类什么的可以使用FW。 测试的时候一方面是测试浏览器兼容性另一方面是测量像素对齐推荐使用perfectpixel这个Chrome扩展功能太强大 3. 其他 选择器命名 按照功能命名而不是样式。 驼峰大小写区分单词分割线区分层次。这样的两级命名法基本不会出现命名重复。 如何组织CSS文件 可以按照功能划分比如layoutfontcolor等。可以按照分区划分比如headerfootersidebar等。都可以没有放之四海皆准的按照实际的情况。这次我就尝试了basecommonpage的结构。但是在page层在文件内部我又按照layoutfontcolorheaderfootersidebar混合分类的结构。 在page层的文件中我先把每一部分的注释写上这样确定了CSS的结构然后再一部分一部分的填充。 优先使用class如果某个元素要在JS中添加动态效果并且只在页面中出现了一次那么可以选择使用id标签而不是class这样在写JS的时候选择器的效率更高。 4. 遇到的问题 不指明图片大小IE8甚至不能显示图片。某个样式无效一种可能是拼写错误更可能的原因是选择器的权重太低增加一加权重就好啦。只要打开调试器定位到元素很容易找到出错的地方。如果想要a链接链接到某个具体的万维网页在链接前面加上http:// 就好了。 转载于:https://www.cnblogs.com/technology-life/p/4537601.html
