前端写页面该注意些什么呢?
做了几年的前端,现在写页面应该也算是熟能生巧吧.介绍一下前端需要用到的技巧:
一.切图:
1.对于一个初级前端来说,设计师给到你psd的时候,你首先该做的是什么呢?你先看看浏览一遍,然后就马上开始切图吗?还是你把每个页面都划分一下,头尾肯定是分开的,公共的内容,中间部分的内容呢,分析一遍有没公共的图片,功能的模块内容,到时可以公用,免去代码的多余.事实告诉我们当然是选择后者啦,说下切图,我现在用的ps版本是psCC,拉进去psd之后开始切图,刚开始的时候,我是拉线,这样子可以更准确的用切图工具切出准确的尺寸出来,一个像素都要准确,做到这样就应该是放大再放大的拉线切图.这样子还真是挺花时间的呢,给所有的图片切好之后,你可以直接点击当前的切线右键命名,也可以导出图片,ctrl+shift+alt+s快捷键导出,然后你选择你切图片需要导出的图片格式是什么,有gif,png,jpg就三种用得比较多,png用的是png-24.用来显示透明的图标.保存之后选择你所选中的切片,不用默认选择所有,不然导出来的时候,全部导出混着一大堆其他你不想要的图片.
2.有个插件可以不用去拉线切图那些麻烦的,介绍给你们,就是Cutterman,你去搜索一下,安装就可以使用了,这个是免费的.用法里面也有介绍,点击你想要切的图片,然后导出,导出之前,目录你选择设置一下就好.很方便的,有个问题就是,我电脑比较卡,有时导出来的时候psd比较大,导出时候,会卡几分钟.
3.还有一种方法是导出png图片的,你直接右键该图层,快速导出为png.这个是最快的.
二:重置样式:
用到的基本样式重置;
@charset utf-8; body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, button, textarea, p, th, td{ margin: 0; padding: 0;}
body{ font-size: 12px; font-family: arial, \5B8B\4F53, sans-serif; color: #333; min-width: 1000px; overflow-x: hidden;}
h1, h2, h3, h4, h5, h6, input, select, textarea{ font-size: 100%;}
table{ border-collapse: collapse;}
ul, ol{ list-style: none;}
em, i, address{ font-style: normal;}
fieldset, img{ border: 0;}
input, textarea, button, select{ outline: none;}
img{ vertical-align: bottom;}
a{ color: #333; text-decoration: none;}
a:hover{ color: #FF7000;}
.clearfix:after{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
/* Hides from IE-mac \*/
* html .clearfix{ height: 1%; zoom: 1;}
.clearfix{ display: block;}
/* End hide from IE-mac */
.bold{ font-weight: 700;}
.f10{ font-size: 10px;}
.f14{ font-size: 14px;}
.f16{ font-size: 16px;}
.f18{ font-size: 18px;}
.f20{ font-size: 20px;}
.fl{ float: left; display: inline;}
.fr{ float: right; display: inline;}
.fwr{ font-family: \5FAE\8F6F\96C5\9ED1, sans-serif;}
.fst{ font-family: \5B8B\4F53, sans-serif;}
.far{ font-family: Arial, sans-serif;}
map area{ outline: none; border: none;}三.布局:
布局时候我一般是先吧,公共部分头尾都写好,写在公共的样式文件中调用.然后再写中间的布局.还有列表页的如果有左侧栏的,一般也是公用的.
整个网站的字体颜色,圆角,鼠标经过的颜色,按钮,都是可以公用的.还有其他的根据你该网站的需求来写.
还有js,如果不是每个页面都公用的部分,最好写在当前页面里面就好,不要去公用,不然有些页面没有却调用了,会提示报错的.
图片的话,比如,按钮图标,还有一些是公用的放在公用的文件夹中,小图标做的时候最好用CSS Sprite拼接在一起.提高网站的性能,减少缓存.
布局的时候,要注意问题:
1.标题,如果要求当行,你写的时候记得加高度控制,并设置超出隐藏,同理列表内容,p,div,li等之类的写也应该要超出隐藏.
2.图片,你要注意一定要写图片的宽高固定好,不然,程序员做的时候随便上传一张图片该位置该撑开了,排版都乱了.
3.比如标题,内容左右排版的时候,右边的内容要求右对齐.这种可以这样写:
<ul class="list"> <li> <span>展馆地址：</span><em class="address">广东省 中山市 古镇镇 中兴大道121号</em> </li> </ul>
.list li{color: #999;
margin-bottom: 14px;
overflow: hidden;}
.list li span{ float: left;}
.list li em{padding-left: 64px;
display: block;}效果:
4.列表几列布局时候:
这种左右两边的对齐的,每个列表需要右距离,跟下距离,然后最外的话就会不够,第三列会下去.解决方法:
.list ul{margin-right:-24px;overflow:hidden;}
.list ul li{margin-right:24px;margin-bottom:24px;}5.浮动问题:
如果你比如div里面span.span加了浮动,然后div也有内容,ie7会出现问题,如果你加了右浮动,左边的内容一定要加左浮动,两边浮动ie才不会有问题.
还有如果你div里面加了下拉列表.而你的div当前的就不能加overflow:hidden;去清除浮动撑开里面的内容,如果是外面的div的话很好办,可以在当前加上你的公共样式里面的clearfix,这时内容就会自动撑开了,但如果这时你写的是li的话要撑开又不能隐藏的话,你只能给当前的li加上float:left,也加浮动,最外的父标签也加浮动,这样子也可以撑开.又不会隐藏掉下拉的内容.
本文作者： Jasmine
本文链接： https://www.jianbaizhan.com/article/576
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！