大家好,又见面了,我是你们的朋友全栈君。
今日小结
psd是指经过Photoshop处理过保存后的图片,其格式为psd。
这是清除浮动的最常用,最普遍的方法
拿到图片将psd变成html代码的步骤如下:
1.样式文件和初始化
①可以新建三个文件夹。(css,images,js)
然后在css下需要建立三个样式,”index,common(公共),reset(重置)”新手比如我,需要这样写,但是熟练以后就不用了
js下需要建立(index)这一个样式。(即html)
在js下需要将css中的所有文件样式用link引入
reset也是公共样式,以后熟练以后可以将reset和common合并在一起
②为了使得js中的index.html写完代码后,div块,和上面挨着,不留空隙。即不让原来默认样式有作用,需要重写reset默认样式。
将常用的块级元素,行内元素,都重置。用语句{margin:0;padding:0;}
注:一般不用通配符”*”,因为没那么多需要重置。
③要使有序列表,无序列表前的黑点没有,需要用语句”list-style:none;”
④清除浮动(用前面写的方法)
2.开始写js里面的
自己要清楚,把这个psd分成了几部分(比如,头,脚,内容面板块)。用div块级元素,给他们分别命名成英文名字。(一般都用英文名,不用拼音,看起来高级一点)
每一部分的布局(是否居中,需要居中容器,应根据不同的psd进行调整)
在common里面写上js下的index的每一块的高度。
3.明日续
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/137441.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...