作为设计师的你们是否有过这样的经历,当你的设计可以做成网页访问的时候,各种华丽的网页特效/交互展示是不是太吸引了,这个时候你会特别崇拜前端工程师,觉得他们就是大神一样的存在。其实“前端”说简单不简单,说难也并没有很难,有些前端知识,设计师也可以学习运用,甚至可能使设计能力有所提升。下面就设计师也可以学习的前端知识,优网科技小优先来给大家讲部分内容:
一、路径关系
先来看一个常见调用图片的方式:
background:url(imges/01.jpg);
图片、链接地址、样式文件、js文件……等都是经常需要外界支持的东西,浏览器通过html标签内的各式url地址去一一找到然后呈现出来,一旦地址错误,比如找不到样式文件或者图片,那网页所呈现出来的就不知道神马鬼了。所以,虽然大多数文件都可以浏览选择并不需要手动去敲,但是了解个中关系,对处理问题也是有一定好处的。
如下图,一个相对较完整的文件夹是酱紫的,包含主页index和所需的样式文件、images、js等,哪怕样式文件就一个都要单独建立一个文件夹,html文件一般放在其他文件的上层,但是html文件很多,或者分模块的情况下也是需要建文件夹哒。看个人喜好啦……
index.html中要是需要引用images下的图片01,地址为:images/01.jpg。
正常情况下,当然不是所有东西都在一个页面上处理啦,不仅样式要单独放在一个.css文件中,所有图片也是要单独放个文件夹的。
不同层级间要引用其他地方的文件时路径该怎么写呢?下面举几类的例子。
1)同级
以index.html为参考点,若再增加一张图片(此处为举例添加的02.jpg文件) ,要引用与自己同等级文件,不用写别的了,直接文件名就OK了。例:url(02.jpg);
2)下级
同样,以index.html为参考点,它要引用比他低一级的01.jpg,首先,01往上找,是它所属的images文件夹,这个文件夹刚好与参考点同一级,即与01之间只跨一级,则使用一个斜杠“/”,(向下两级则是两个斜杠哦)index想要引用images下的文件,首先得经过images的同意,所以路径还要带上它的“签名”,后得来路径则是:url(images/01.jpg);
3)上级
以index.css 为参考点,想引用02.jpg ,首先还是得往上看,参考点属于css文件夹,而02.jpg跟他爹“同辈”,但是不能直呼其名啊,所以用两点“..”来代替,其实这两点也可以是总文件夹的代替名,因为对index.css来说并无多大意义。
好了,找到规律了没?如果index.css要找index.js文件该怎么找捏?这个,留给大家思考一下,嘿嘿……(提示一下,先往上找,再往下找)
亚星管理平台菁思福科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!
亚星管理平台菁思福科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。亚星管理平台菁思福科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站、APP开发)、微信定制开发(微信亚星官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。
责任编辑:亚星管理平台菁思福科技
版权所有:https://www.uzncsrj.com (亚星管理平台菁思福科技) 转载请注明出处