怎样为一个原生系统(非套用CMS)做前端切图[适用大站切图]

做前端切图有三四年了,大大小小的网站也切了几百个了,有企业站、门户站、电商站,但基本都是和CMS对接,后台的界面直接用CMS默认的,所以即使门户站再复杂,也能比较快速容易的解决;

最近接到一个订单,是做一个原生网站系统,所有页面都是从无到有,所有页面都要设计、切图然后做php;开始时把他当作平常的企业站来切,后来出现各种问题,经过几周的无数次删删改改,总算可以看得过去了;下面说一下自己的经验与教训;

一、提前规划很重要:由于网站的策划一般是由策划人员和设计师协商确定了,而切图人员除了一堆psd外,对要做的网站系统一无所知;有几点需要特别注意:哪些页面有共同元素(有可能前端一套header、footer,后端有另外一套,而注册登录又有第三套header、footer),有哪些是同类页面,样式完全一样,只是内容变了而已(由于审题不清,我的psd文件还是按照时间而不是名称排序的,所以有很多完全同样式的页面重新写了很多次,浪费时间精力还给php程序员带来麻烦);该系统中,设计师设计了几套分页导航,但和php程序员沟通了知道只会用一种,做成组件后全站调用,然后我就顿感轻松了一些;

二、CSS命名组合方式:常用的有驼峰法(mainContainer)、下划线(main_container)、横线间隔(main-container),选择一种最喜欢的方式一直用下去,千万不要混用;如果php程序员累死都看不懂,他们就会把界面弄乱之后全部让你重新调整;

三、CSS命名规则:该系统设计psd,前端有15个页面,后台有60个页面,即使把某些样式相同的去掉,还有将近70个页面都要用不同的css来装饰;所以要有一定的规则(千万不要像我,最开始用英文,英文不够用了,开始用英文缩写,又不够了,中英文混拼,一周后再去看连我都不知道是什么意思,php程序员看到绝对会抓狂);由于在此项目中吃了太多苦头,过后便潜心研究猪八戒网、淘宝网、京东的css命名,发现这些大站在css方面最重要的就是“有相似的元素尽量复用,然后为每一个拥有此样式的元素添加多个class”;

四、左、右浮动及清除浮动:为每一个需要左浮动的元素添加class=”lt”,为每一个需要右浮动的元素添加class=”rt”,为每一个左、右浮动的父级元素添加清除浮动class=”cf”,对应css:

.lt{
float:left;
}
.rt{
float:right;
}
.cf:before, .cf:after {  
content:"";  
display:table;  
}  
.cf:after {  
clear:both;  
}  
.cf {  
zoom:1;  
}

五、表单提交:php程序员要求form表单中的提交用input type=”submit”,但是这个不兼容,需要一套兼容代码;

.sub{
border:none;
display:inline-block;
font-size:0;
line-height:0;
*font-size:0;
*line-height:normal;
*padding-left:999px;
*overflow:hidden;
cursor:pointer;
}

以前写企业站时,经常为每一个submit命名一个class,列表页就叫listSub,内容页叫conSub,首页叫indexSub,然后为每一个的css里加上上面一段代码;可是这个就行不通了,基本上有60多个页面有表单,大部分提交按钮的背景都不一样;命名到第十个左右的时候,发现再也无法做到不重名了;我的解决方案从这时开始为每个页面一个总ID,然后所有页面的提交按钮都给一个class=”sub”,添加css背景时,用该页面ID和.sub识别;这样不但可以缓解命名危机,也为css减轻了不少负担;

六、小图标:小于50px*50px的小图标是设计师为了修饰网站特意设计的,如果用img太容易被盗取(新版百度分享、花瓣等可以直接分享网页内所有img),所以一般用背景完成;而i这个html标签不是太常用,毕竟现在很少有人用斜体,用来做小图标正好(此处学自新浪),下面是i做为图标的兼容代码

display:inline-block;
vertical-align:middle;
margin:0 5px;

每个图标只要添加背景和宽高即可使用了;

七、图片和表单兼容:经常用line-height做兼容的切图人员,会对img与文字不兼容、input与文字不兼容、display=inline-block的元素与文字不兼容的情况印象特别深,其实W3C在设计css时是有这个考虑的,当img、input、inline-block设置为vertical-align=middle时,line-height就可以正常使用了(float=left除外,浮动元素尽量别用line-height,让整行高度尽量小,然后用margin或padding隔开整行间距);兼容代码:

*{
padding:0;
margin:0;
}
ol,ul,li{
list-style:none;
}
img{
border:none;
vertical-align:middle;
}
h1,h2,h3,h4,h5,h6{
font-size:12px;
font-weight:normal;
}
input,select{
vertical-align:middle;
}
table {
border-collapse: collapse;
border-spacing: 0;
empty-cells:show;
}

感悟:html和css最大的特点“能复用尽量复用”;不要迷信各种权威重置css,把项目中可能用到的或正在用到的复用代码提取出来,就是最适合你的重置css

版权所有©转载必须以链接形式注明作者和原始出处

发表评论

电子邮件地址不会被公开。 必填项已用*标注